内置对象
JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象
JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean...
==对象只是带有属性和方法的特殊数据类型。==
学习一个内置对象的使用，只要学会其常用的成员的使用（通过查文档学习）
可以通过MDN/W3C来查询
内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。
MDN
Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
- MDN
- 通过查询MDN学习Math对象的random()方法的使用
案例
//JavaScript 组成：ECMAScript BOM DOM
//ECMAScript:变量、注释、数据类型、类型转换、操作符、流程控制语句（判断和循环） 数组、对象、构造函数、内置对象
//JavaScript中的对象有三种：自定义对象、内置对象、浏览器对象
//ECMAScript中的对象：自定义对象、内置对象
//内置对象：Math/Array/Date...
//最常用的属性和方法
//差文档：MDN、W3C
console.log(Math.random()); //0.8001890192704588 返回的是0-1之间的随机数
//1.生成min到max之间的随机数
var min=10;
var max=20;
console.log(Math.random()*(max-min)+min); //17.87411706620979 返回的是10-20之间的随机数（包含小数）
console.log(Math.floor(Math.random()*(max-min+1)+min)); //17.87411706620979 返回的是10-20之间的随机整数 +1包含20，不+1不包含20
console.log(parseInt(Math.random()*(max-min)+min));//返回的是1-20之间的随机数 不包含20
如何学习一个方法？
- 方法的功能
- 参数的意义和类型
- 返回值意义和类型
- demo进行测试
Math对象
==Math对象不是构造函数==，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供
跟数学相关的运算来找Math中的成员（求绝对值，取整）
Math
演示：==Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()==
Math.PI // 圆周率
Math.random() // 生成随机数
Math.floor()/Math.ceil() // 向下取整/向上取整
Math.round() // 取整，四舍五入
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
Math.sin()/Math.cos() // 正弦/余弦
Math.power()/Math.sqrt() // 求指数次幂/求平方根
解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//不带（）是属性，是一个值 带（）的是方法 表示方法的调用
//1. Math.PI // 圆周率
console.log(Math.PI);//3.141592653589793
// 2. Math.random() // 生成随机数
var max=6;
var min=1;
console.log(Math.random()*(max-min)+min); //1-6之间随机数（包含小数 取不到6 因为 Math.random()的取值范围为[0,1)）
console.log(Math.floor(Math.random()*(max-min+1)+min)); //1-6之间随机整数 可以取到6
// 3. Math.floor()/Math.ceil() // 向下取整/向上取整
console.log(Math.floor(5.2)); //5
console.log(Math.ceil(6.5)); //7
// 4. Math.round() // 取整，四舍五入
console.log(Math.round(6.3)); //6
console.log(Math.round(6.5)); //7
// 5. Math.abs() // 绝对值
console.log(Math.abs(6.5));//6.5
console.log(Math.abs(-6.5)); //6.5
// 6.Math.max()/Math.min() // 求最大和最小值
console.log(Math.max(6,5)); //6
console.log(Math.min(6,5,1));//1
</script>
</head>
<body>
</body>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 1.求10-20之间的随机数
var max=20;
var min=10;
console.log(Math.floor(Math.random()*(max-min+1)+min)); //返回的是10-20之间随机整数 [10,20]
// 2.随机生成颜色RGB [0,255]
//如：rgb(112,112,112)
function random(min,max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
function randomRGB(min,max) {
var color1=random(min,max);
var color2=random(min,max);
var color3=random(min,max);
return 'rgb('+color1+','+color2+','+color3+')';
}
console.log(randomRGB(0,255));
// 3.模拟实现max()/min()
// function getMax() {
// var max=arguments[0];
// for(var i=1;i<arguments.length;i++) {
// if (max<arguments[i]) {
// max=arguments[i];
// }
// }
// return max;
// }
// var max=getMax(3,5,6,8);
// console.log(max);
// function getMin() {
// var min=arguments[0];
// for(var i=1;i<arguments.length;i++) {
// if (min>arguments[i]) {
// min=arguments[i];
// }
// }
// return min;
// }
// var min=getMin(3,5,6,8);
// console.log(min);
var MyMath={
max:function() {
var max=arguments[0];
for(var i=1;i<arguments.length;i++) {
if (max<arguments[i]) {
max=arguments[i];
}
}
return max;
},
min:function() {
var min=arguments[0];
for(var i=1;i<arguments.length;i++) {
if (min>arguments[i]) {
min=arguments[i];
}
}
return min;
},
}
console.log(MyMath.max(10,1,200,30));
console.log(MyMath.min(10,1,200,30));
</script>
</head>
<body>
</body>
</html>
静态成员和实例成员的的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var MyMath={
PI:3.1415926,
max:function(){
},
min:function(){
},
};
//工具中使用静态成员
//静态成员 直接使用对象来调用的
//MyMath.PI;
//MyMath.max()
//当有很多个对象的时候 使用构造函数的形式来创建对象
//实例成员:构造函数中的成员就是实例成员
//什么是实例：对象的另一种说法
function Person(name,age) {
this.name=name;
this.age=age;
this.say=function(){
console.log(this.name+':嘿嘿哈哈');
}
}
//通过构造函数创建对象
var p=new Person('zs',18);
console.log(p);
p.say();
</script>
</head>
<body>
</body>
</html>
Date对象
创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。
// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
var now = new Date();
console.log(now.valueOf()); // 获取距1970年1月1日（世界标准时间）起的毫秒数
Date构造函数的参数
1. 毫秒数 1498099000356 new Date(1498099000356)
2. 日期格式字符串 '2015-5-1' new Date('2015-5-1')
3. 年、月、日…… new Date(2015, 4, 1) // 月份从0开始
==- 获取日期的毫秒形式==
var now = new Date();
// valueOf用于获取对象的原始值
console.log(date.valueOf())
// HTML5中提供的方法，有兼容性问题
var now = Date.now();
// 不支持HTML5的浏览器，可以用下面这种方式
var now = + new Date(); // 调用 Date对象的valueOf()
案例解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// Math对象和Date对象的区别
//Math不是一个构造函数，里面提供的是静态成员
// var MyMath={
// PI:3.1415926,
// max:function() {
// console.log(5);
// },
// };
//静态成员
// MyMath.PI;
//MyMath.max();
//Date 是一个构造函数，首先要通过new Date() 来创建日期实例（对象），实例成员
// var d=new Date();
// console.log(d);//Fri May 04 2018 00:34:08 GMT+0800 (中国标准时间)
//GMT 格林威治时间 也称为世界标准时间
//GMT+0800(中国标准时间)
//距离1970-1-1相差的毫秒数
// console.log(d.valueOf());
//日期构造函数
// 1.空构造函数 获取的是当前时对象
// var d=new Date();
// console.log(d);
// console.log(d.valueOf());
//2.构造函数中传入 毫秒值
// var d=new Date(1525365651149);
// console.log(d);
//3.可以传入日期形式的字符串
// var d=new Date('1955-8-8 8:8:8');
// console.log(d);//Mon Aug 08 1955 08:08:08 GMT+0800 (中国标准时间)
//4.可以传入数字
// var d=new Date(1928.8,8);
// console.log(d);
// console.log(d.valueOf()); //-1304409600000 因为1928比1970小，所以返回的是负值
//如何获取日期对象的毫秒值
// var d=new Date();
//获取日期对象的毫秒值 不用我们调用
// console.log(d.valueOf());
//和valueOf的作用是一样的 获取毫秒值
// console.log(d.getTime());
//获取当前时间毫秒值 静态成员
// var num=Date.now(); //浏览器兼容问题 HTML5中的
// console.log(num);
//+在这里取正
// var num=Number(new Date());
var num=+new Date();
console.log(num);
</script>
</head>
<body>
</body>
</html>
==- 日期格式化方法==
toString() // 转换成字符串
valueOf() // 获取毫秒值
// 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
==- 获取日期指定部分==
getTime() // 返回毫秒数和valueOf()结果一样，valueOf()内部调用的getTime()
getMilliseconds()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份，***从0开始***
getFullYear() //返回4位的年份 如 2016
解释说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// //2017-10-10 10:10:10
// var d=new Date();
// //打印日期对象的时候 内部调用了toString()
// console.log(d);
// console.log(d.toString());
// console.log(d.toDateString());//Fri May 04 2018
// console.log(d.toTimeString());
// //01:11:30 GMT+0800 (中国标准时间)
// console.log(d.toLocaleString()) ;
//2018/5/4 上午1:11:30
//获取日期中指定部分
var d=new Date();
console.log(d.getFullYear());
// 注意，月份是从0开始的
console.log(d.getMonth()+1 );
console.log(d.getDate());
console.log(d.getHours());
console.log(d.getMinutes());
console.log(d.getSeconds());
</script>
</head>
<body>
</body>
</html>
案例
- 写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(d) {
//如果date不是日期对象，返回
if (!date instanceof Date) {
return;
}
var year = d.getFullYear(),
month = d.getMonth() + 1,
date = d.getDate(),
hour = d.getHours(),
minute = d.getMinutes(),
second = d.getSeconds();
month = month < 10 ? '0' + month : month;
date = date < 10 ? '0' + date : date;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute:minute;
second = second < 10 ? '0' + second:second;
return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {
//判断参数date是否是日期对象
//instanceof instance 实例（对象） of 的
// console.log(date instanceof Date); //false 表示date这个变量不是通过new Date创建出来的对象 而是传过来的1
if (!(date instanceof Date)) {
console.error('date不是日期对象');
return;
}
// console.log(date.getFullYear());
// console.log(date.getMonth());
// yyyy-MM-dd HH:mm:ss的形式
var year=date.getFullYear(),
month=date.getMonth()+1,
day=date.getDate(),
hour=date.getHours(),
minute=date.getMinutes(),
second=date.getSeconds();
// if(month<10) {
// month='0'+month;
// }
month=month<10?'0'+month:month;
day=day<10?'0'+day:day;
hour=hour<10?'0'+hour:hour;
minute=minute<10?'0'+minute:minute;
second=second<10?'0'+second:second;
return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
}
// var d=1;
// formatDate(d);
var d=new Date();
var dateStr=formatDate(d);
console.log(dateStr); //2018-5-4 8:47:0 返回的是当前时间
d=new Date(2017,8,9);
var dateStr=formatDate(d);
console.log(dateStr);//2017-9-9 0:0:0
</script>
</head>
<body>
</body>
</html>
==- 计算时间差，返回相差的天/时/分/秒==
function getInterval(start, end) {
var day, hour, minute, second, interval;
interval = end - start;
interval /= 1000;
day = Math.round(interval / 60 /60 / 24);
hour = Math.round(interval / 60 /60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}
Array对象
- 创建数组对象的两种方式
-
字面量方式
-
new Array()
// 1. 使用构造函数创建数组对象
// 创建了一个空数组
var arr = new Array();
// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 创建了一个数组，里面存放了4个数字
var arr = new Array(1, 2, 3, 4);
-
// 2. 使用字面量创建数组对象
var arr = [1, 2, 3];
// 获取数组中元素的个数
console.log(arr.length);
-
检测一个对象是否是数组
- instanceof
- Array.isArray() HTML5中提供的方法，有兼容性问题
函数的参数，如果要求是一个数组的话，可以用这种方式来进行判断
-
toString()/valueOf()
- toString() 把数组转换成字符串，逗号分隔每一项
- valueOf() 返回数组对象本身
-
数组常用方法
演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()// 1 栈操作(先进后出)
push()
pop() //取出数组中的最后一项，修改length属性
// 2 队列操作(先进先出)
push()
shift() //取出数组中的第一个元素，修改length属性
unshift() //在数组最前面插入项，返回数组的长度
// 3 排序方法
reverse() //翻转数组
sort(); //即使是数组sort也是根据字符，从小到大排序
// 带参数的sort是如何实现的？
// 4 操作方法
concat() //把参数拼接到当前数组
slice() //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice() //删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
// 5 位置方法
indexOf()、lastIndexOf() //如果没找到返回-1
// 6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
// 7 方法将数组的所有元素连接到一个字符串中。
join() -
清空数组
// 方式1 推荐
arr = [];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);
案例
网友评论