12JavaScript中的内置对象

技术交流QQ群:1027579432，欢迎你的加入！

1.内置对象

JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象；
前两种对象是JS中的基础内容，属于ECMAScript，第三个浏览器对象属于JS独有的，后面JS API中会有讲解；
内置对象：JS语言自带的一些对象，这些对象提供给开发者使用，并提供了一些常用的或者最基本且必要的功能(属性和方法)；
JavaScript中提供了多个内置对象：Math、Date、Array、String等；

2.查文档

MDN：学习内置对象的使用时，只要学会其常用成员的使用即可。可以通过查阅文档学习，通过MDN/W3C来查阅；
Mozilla开发者网络(MDN)提供了有关开发网络技术(Open Web)的信息，包括HTML、CSS和万维网及HTML5应用的API；
MDN官方网站
如何学习对象中的方法？
- 首先查阅该方法的功能；
- 接着查看里面参数的意义和类型；
- 再查看返回值的意义和类型；
- 最后，通过demo进行测试；

3.Math对象

Math对象：不是一个构造函数，所以不需要new来调用，而是直接使用里面的属性和方法。

Math.PI  // 圆周率
Math.floor()  // 向下取整
Math.ceil() // 向上取整
Math.round()
// 四舍五入
Math.abs()  // 绝对值
Math.max()/Math.min()  // 最大值或最小值// 实际案例如下：
// 绝对值
console.log(Math.abs(-1));
console.log(Math.abs('-1'));  // -1 隐式转换，会把字符串型的-1转换为数字型的-1
console.log(Math.abs('curry')); // NaN// 取三个整数方法
console.log(Math.floor(-1.2));  // 向下取整-2
console.log(Math.ceil(1.9));  // 向上取整2
console.log(Math.round(3.4)); // 3 四舍五入,其他数字都是四舍五入，但是.5特殊，它往大了取！
console.log(Math.round(-1.5));  // -1

随机数方法random()

random()返回一个随机的小数，小数的范围是[0,1)；
random()函数没有传入的参数；

返回的是一个随机小数[0, 1)；

// 随机数方法random()：返回一个随机小数[0, 1)
console.log(Math.random());// 案例：得到两个数之间的随机整数，并且包含两个端点
// 记住公式：Math.floor(Math.random() * (max - min + 1)) + min
function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}var res = getRandom(1, 10);
console.log(res);// 案例：随机点名
var arr = ['curry', 'durant', 'harden', 'james']
console.log(arr[getRandom(0, arr.length - 1)]);// 案例：猜数字游戏
var random = getRandom(1, 10);
while (true) {var num = prompt('你来猜？输入1~10之间的一个数字：');if (num > random) {alert('你猜大了');} else if (num < random) {alert('你猜小了');} else {alert('恭喜你答对了!');break;}
}

4.日期对象

Date()对象是一个构造函数，必须使用new来调用创建我们的日期对象；

参数常用的写法：

数字型 2020,02,15
字符串型 '2020-02-15 14:23:56'

Date()方法使用实例如下：

// 日期对象Date
var obj = new Object();  // 创建了一个对象
var arr = new Array();  // 创建了一个数组对象
// 如果没有参数，返回系统当前的时间
var date = new Date();  // 创建了一个日期对象
console.log(date);
var date1 = new Date(2020, 02, 15);
console.log(date1);  // 返回的是3月不是2月
var date2 = new Date('2020-02-15 14:26:59');  // 常用的写法
console.log(date2);

日期的格式化

需要获取日期指定的部分，因此要手动得到这种格式。

// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear());  // 返回当前日期的年
console.log(date.getMonth());  // 返回的月份+1等于实际的月份即3月
console.log(date.getDate()); // 返回的是几号
console.log(date.getDay());  // 3 周六返回的是6，周一返回的是1，周日返回的是0
// 返回2020年2月15日 星期六
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);// 格式化日期 时分秒
var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
// 案例：要求封装一个函数返回当前的时分秒
function getTimer() {var time = new Date();var h = time.getHours();h = h < 10 ? '0' + h : h;var m = time.getMinutes();m = m< 10 ? '0' + m : m;var s = time.getSeconds();s = s < 10 ? '0' + s : s;return h + ':' + m + ':' + s;
}
console.log(getTimer());

获取日期总的毫秒(时间戳)形式

Date对象是基于1970年1月1日(世界标准时间)算起的毫秒数，我们经常利用总的毫秒数来计算时间，因为它更准确。

// 获取Date对象总的毫秒数(时间戳)，不是当前时间的毫秒数，而是距离1970年1月1日后算起的总毫秒数
// 1.通过valueOf()或者getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
// 2.简单写法(实际开发中最常用的方法！)
var date11 = +new Date();  // +new Date()返回的就是总的毫秒数
console.log(date11);
// 3.更简单的方法(H5新增的特性)
console.log(Date.now());

倒计时案例

// 案例：倒计时效果
/* 先把输入的时间减去现在的时间就是剩余时间即倒计时。又因为不能用时分秒直接相减。因此，把剩余时间转换为时间戳来实现。再把剩余时间总的毫秒数转换为天 时 分 秒
转换公式如下：
d = parseInt(总秒数/60/60/24);
h = parseInt(总秒数/60/60%24);
m = parseInt(总秒数/60%60);
s = parseInt(总秒数%60); */
function countDown(time) {var nowTime = +new Date(); // 返回的是当前时间总的毫秒数var userInputTime = +new Date(time); // 返回用户输入的时间var res = (userInputTime - nowTime) / 1000; // res就是剩余时间总的毫秒数var d = parseInt(res / 60 / 60 / 24);d = d < 10 ? '0' + d : d;var h = parseInt(res / 60 / 60 % 24);h = h < 10 ? '0' + h : h;var m = parseInt(res / 60 % 60);m = m < 10 ? '0' + m : m;var s = parseInt(res % 60);s = s < 10 ? '0' + s : s;return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2020-02-15 18:16:59'));
var date = new Date();
console.log(date);

5.数组对象

创建数组对象的两种方式：

字面量方式；

new Array()；

// 1.字面量方式
var arr = ['curry', 'harden', 'durant'];
// 2.new Array()方式
var arr1 = new Array();  // 创建了一个空的数组
var arr2 = new Array(2);  // 这个2表示数组的长度为2，表示数组中有两个元素
console.log(arr2);
var arr3 = new Array(3, 3);  // 等价于创建了数组[2,3]
console.log(arr3);

检测是否为数组

(1). instanceof是一个运算符，它可以用来检测是否为数组；

(2). Array.isArray(参数)方法[H5新增的特性]

// 检测是否为数组：instanceof或isArray()方法
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

添加或删除数组元素的方法
```
// 添加或删除数组元素方法
// push()
var arr = [1, 2, 3];
// arr.push(4, 'curry');
console.log(arr.push(4, 'curry')); // 返回的是新数组的长度
console.log(arr);
// unshift()
console.log(arr.unshift('red', 'blue'));
console.log(arr);
// pop()
console.log(arr.pop());  // 返回值是curry
console.log(arr);
// shift()
console.log(arr.shift());
console.log(arr);
```
- push():数组尾部追加元素；
  - push():在数组末尾添加一个或者多个数组元素；
  - push()的目的是给数组追加新的元素；
  - push()中的元素直接写需要追加的数组元素；
  - push()操作结束后返回的是新数组的长度；
  - 原数组也会发生变化；
- unshift():数组头部追加元素；
  - unshift():在数组开头添加一个或者多个数组元素；
  - unshift()的目的是给数组追加新的元素；
  - unshift()中的元素直接写需要追加的数组元素；
  - unshift()操作结束后返回的是新数组的长度；
  - 原数组也会发生变化；
- pop():删除数组中的最后一个元素
  - pop()的目的是删除数组的最后一个元素，记住一次只能删除一个元素；
  - pop()没有参数；
  - pop()操作结束后返回的是被删除的那个元素；
  - 原数组也会发生变化；
- shift():删除数组中的第一个元素
  - shift()的目的是删除数组的第一个元素，记住一次只能删除一个元素；
  - shift()没有参数；
  - shift()操作结束后，返回的是被删除的那个元素；
  - 原数组也会发生变化；

数组排序

// 数组翻转与排序
// 1.翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
// 2.冒泡排序
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {// return a - b;  // 按照升序进行排序return b - a;  // 按照降序进行排序
});
console.log(arr1);

数组索引方法

// 数组索引方法：indexOf(数组元素)和lastindexOf(数组元素)
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.indexOf('blue'));  // 只返回第一个满足条件的索引号
console.log(arr.indexOf('yellow'));  // 如果该数组中找不到元素，则返回的是-1
console.log(arr.lastIndexOf('blue')); // 注意返回的索引号是4，只是查找顺序是从后往前查找！
console.log(arr.lastIndexOf('yellow'));

数组转换为字符串

// 数组转换为字符串
// 1.toString()
var arr = [1, 2, 3, 'curry'];
console.log(arr.toString());
// 2.join('分隔符')
console.log(arr.join());
console.log(arr.join('-'));
console.log(arr.join('&'));

其他重要方法

6.字符串对象

基本包装类型：把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

为了便于操作基本数据类型：JavaScript还提供了三个特殊的引用类型：String、Number、Boolean。

// 对象才会有属性和方法，复杂数据类型才有属性和方法
// 简单数据类型为什么会有length属性呢？
// 基本包装类型：将简单数据类型包装成为复杂数据类型
// (1)把简单数据类型包装为复杂数据类型
var temp = new String('andy');
// (2)把临时变量的值赋值给str
str = temp;
// (3)销毁临时变量
temp = null;

字符串的不可变性：是指里面的值不可变，虽然看上去可以改变内容，但是其实是地址变了。实质是在内存中新开辟了一个内存空间。

// 字符串的不可变性 var str = 'andy'; console.log(str); str = 'red'; console.log(str);

因为字符串的不可变性，所以不要大量拼接字符串！

// 因为字符串的不可变性，所以不要大量拼接字符串！
var str = '';
for (var i = 1; i <= 1000000; i++) {str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断开辟新的内存空间

根据字符返回位置

字符串的所有方法，都不会修改字符串本身(字符串是不可变的)，操作完成后会返回一个新的字符串。

// 根据字符返回位置：indexOf('要查找的字符'，[起始的位置])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春', 3));  // 从索引号3的位置开始查找字符'春'
console.log(str.lastIndexOf('吹'));

根据位置返回字符[重点]

// 根据位置返回字符
// 1.charAt(index):根据位置返回字符
var str = 'Curry';
console.log(str.charAt(3));
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {console.log(str.charAt(i));
}
// 2.charCodeAt(index):根据位置返回字符的ASCII码，目的：判断用户按下了哪个键
console.log(str.charCodeAt(3));
// 3.str[index]  (H5新增特性)
console.log(str[2]);

字符串操作方法[重点]

// 字符串的操作方法
// 1.concat('字符串1', '字符串2', ...)
var str = 'Curry';
console.log(str.concat(' Harden'));
// 2.substr('截取的起始位置', '截取几个字符')
var str1 = 'CurryHarden';
console.log(str1.substr(5, 6));  // Harden

其他方法

// 其他方法
// 1.替换字符replace('被替换的字符', '替换后的字符')，它只会替换第一次出现的字符
var str = 'Harden Curry Durant';
console.log(str.replace(' ', '+'));
// 案例：将所有的字符o替换为*
var str = 'abcoefoxyozzopp';
while(str.indexOf('o') != -1) {str = str.replace('o', '*');
}
console.log(str);
// 2.字符转换为数组split('分隔符')，类似于前面的join
var str = 'Curry, Durant, Harden';
console.log(str.split(','));
var str = 'Curry&Durant&Harden';
console.log(str.split('&'));
// 3.toUpperCase()：转换为大写字母
// 4.toLowerCase()：转换为小写字母

7.资料下载

笔记及代码，欢迎star,follow,fork…