JavaScript学习笔记（五）--- 内置对象（Math、Date、Array、String）

JavaScript学习笔记（五）— 内置对象

一、内置对象

1、概念

​ JavaScript 中的对象共分为3种：自定义对象、浏览器对象和内置对象。之前我们自己创建的对象都属于自定义对象，而内置对象又称为 API ，是指JavaScript 语言自己封装的一些对象，用来提供一些常用的基本功能，来帮助我们提高开发速度，例如： 数学-Math、 日期-Date 、数组-Array、字符串-String 等等。

​ JavaScript 的内置对象很多，我们不可能都记住，所以我们要学会查阅资料，我们可以通过 MDN （https://developer.mozilla.org/zh-CN/）或者 W3C 来查询，下面我们来学习一些最常用的内置对象。

2、Math对象

​ Math不是一个构造函数，而是一个具体的对象，不需要通过 new 去实例化。Math 对象是数学对象，它的属性和方法是数学常数和数学运算（绝对值，取整，最大值）。调用这些属性和方法时都是以 Math.属性 、Math.方法 的形式来调用。

常用的属性和方法：

        // 1.Math.PI  圆周率
        console.log(Math.PI);  // 3.141592653589793
        // 2.Math.floor() 向下取整  Math.ceil() 向上取整
        console.log(Math.floor(1.1));  // 1
        console.log(Math.floor(1.9));  // 1
        console.log(Math.ceil(1.1));  // 2
        console.log(Math.ceil(1.9));  // 2
        // 3.Math.round() 四舍五入取整
        // 注意 n.5是个特殊值，它只会朝着变大的方向取整，包括负数
        console.log(Math.round(1.4));  // 1
        console.log(Math.round(1.5));  // 2
        console.log(Math.round(-1.5));  // -1
        console.log(Math.round(-1.6));  // -2
        // 4.Math.abs()取绝对值
        console.log(Math.abs(-1));  // 1
        console.log(Math.abs(1));  // 1
        // 5.Math.max() 和 Math.min()  求最大值和最小值
        console.log(Math.max(1,2,6,8));  // 8
        console.log(Math.min(1,2,6,8));  // 1
        // 6.Math.random() 获取范围在[0,1)内的随机小数
        console.log(Math.random());
        // 通过Math.random() 来获得指定范围内的随机整数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1,5));

3、日期对象

​ Date 对象和 Math 对象正好相反，他不是具体对象，仅仅是一个构造函数，在使用时需要通过 new 进行实例化后才能使用，如果创建实例时并未传入参数，则得到的日期对象是当前系统时间对应的日期对象。如果传入了参数，那么则按照参数来创建时间对象。Date 对象 是用来处理日期和时间的。Date 对象是基于1970年1月1日00:00:00 起的毫秒数。

创建实例化对象：

        // 1.获取当前系统时间的 Date 对象
        var nowTime = new Date();
        console.log(nowTime);
        // 2.获取指定的时间的 Date对象
        //参数的写法有： 数字型 2021,05,06，
        // 但数字型输出的月份，比实际月份大一个月，在实际应用中要注意
        // 字符串型： '2021-5-6 9:29:31' 或者 '2021/5/6'
        var future1 = new Date('2021/5/1');
        var future2 = new Date('2021-5-1 9:29:36');
        var future3 = new Date(2021,5,1);
        console.log(future1);
        console.log(future2);
        console.log(future3);

常用的属性和方法：

       var date = new Date('2021-4-7 16:47:36');
        // 1.getFullYear() 获取Date对象的年份
        console.log(date.getFullYear());  // 2021
        // 2. getMonth() 获取Date对象的月份
        // 注意 获取的月份是0-11,比Date对象的实际月份要少1个月，
        // 0代表1月份，11代表12月份，所以在实际应用时要加1
        console.log(date.getMonth()+1);
        // 3.getDate() 获取Date对象的日子
        console.log(date.getDate());
        // 4.getDay() 获取Date对象的日子是星期几
        // 1~6 代表周一到周六  0 代表 周日
        console.log(date.getDay());
        //将代表星期几的数字转换成具体星期几
        var arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day =  date.getDay();
        console.log('Date对象的日子是：'+arr[day]);
        // 5.getHours() 获取Date对象的小时
        console.log(date.getHours());
        // 6.getMinutes() 获取Date对象的分钟
        console.log(date.getMinutes());
        // 7.getSeconds() 获取Date对象的秒数
        console.log(date.getSeconds());

获取Date实例的时间戳(总毫秒数)：

​ 在这我们需要明白一个定义：时间戳是什么？ 时间戳是一个整数值，表示自1970年1月1日00:00:00 UTC（the Unix epoch）以来的毫秒数，忽略了闰秒，所以时间戳永远不可能重复，因为时间一去不复返。

        // 实例化Date对象
        var date = new Date();
        // 1. 用于获取对象的时间戳
        console.log(date.valueOf());
        console.log(date.getTime());
        // 2. 简单写可以这么做 这也是实际应用中最常用的
        var date2 = + new Date();
        console.log(date2);
        // 3. HTML5中提供的方法，使用时要注意兼容性问题
        var date3 = Date.now();
        console.log(date3);


 // 秒转换时间公式
// 计算天数
// d = parseInt(总秒数/60/60/24);
// 计算小时
// h = parseInt(总秒数/60/60%24);
// 计算分钟
// m = parseInt(总秒数/60%60);
// 计算秒
// s = parseInt(总秒数%60);
// 转换毫秒
// 1 s = 1000 ms。

其他方法：
如果想同时获取日期和时间，建议使用toString()。
如果只想获取日期，建议使用 toDateString()。
如果只想获取时间，建议使用 toTimeString()。
如果想要获取UTC时间，建议使用 toUTCString()。
如果想要获取可读性友好的时间格式，建议使用toLocaleString()。

	let date1 = new Date();
    // 同时获取日期和时间
    console.log(date1.toString()); // 输出：Fri Jan 05 2024 15:03:30 GMT+0800 (中国标准时间)
    // 获取日期
    console.log(date1.toDateString()); // 输出：Fri Jan 05 2024
    // 获取时间
    console.log(date1.toTimeString()); // 输出：15:03:30 GMT+0800 (中国标准时间)
    // 获取UTC时间
    console.log(date1.toUTCString()); // 输出：Fri, 05 Jan 2024 07:03:30 GMT
    // 获取本地时间的字符串
    console.log(date1.toLocaleString()); // 输出：2024/1/5 15:04:24
    

4、数组对象

​ 下面介绍的都是实现某种功能的部分方法，只是常用的一些方法，其他方法请查阅MDN。

①创建数组

​ 创建数组对象有：数组字面量 [] 和 new Array() 。其中new Array() 在没有参数时，创建的是一个空的数组对象，需要后续添加数组元素，但如果在创建数组时传入了一个参数，则参数代表数组的长度，如果传入了多个参数，则参数为数组元素。

//没有参数
var arr1 = new Array();  // 空数组
//一个参数
var arr2 = new Array(6); // 一个长度为6的数组  此时的数组元素都是 undefined
//多个参数
var arr3 = new Array(1,2,3,4,5,6);  // 一个长度为6的数组  数组元素是 1 2 3 4 5 6

如果我们想要在声明数组的同时，初始化数组的元素，可以借助fill()方法来实现：

// 创建一个长度为6的数组 并利用fill()方法将所有元素设置为0
var arr2 = new Array(6).fill(0); 
console.log(arr2); // [0,0,0,0,0,0]
// 创建一个长度为6的数组 并利用fill()方法将所有元素设置为'元素'
arr2 = new Array(6).fill('元素'); 
console.log(arr2); // ['元素', '元素', '元素', '元素', '元素', '元素']

②检测一个对象是否为数组对象

​ 检测方法有：instanceof 运算符 和 Array.isArray() 方法 ；instanceof 用来判断一个对象是否是某个构造函数的实例，可以用于判断数组对象、自定义对象等等很多方面。Array.isArray()用于判断一个对象是否为数组对象，但isArray() 是 HTML5 中提供的方法，在使用时要注意兼容性的问题。

//instanceof 运算符
var arr1 = [1, 23];
var obj1 = {};
console.log(arr1 instanceof Array); // true
console.log(obj1 instanceof Array); // false、

//Array.isArray() 方法
var arr2 = [1, 23];
var obj2 = {};
console.log(Array.isArray(arr2));   // true
console.log(Array.isArray(obj2));   // false

③添加和删除数组元素

​ 添加数组元素的方法有：push() 和 unshift() 。push() 是向数组的的末尾添加数组元素，并返回数组的新长度。unshift() 是向数组的开头添加数组元素，并返回数组的新长度。

​ 删除数组元素的方法有： pop() 和 shift() 。 pop() 是删除数组的最后一个元素，使数组的长度减 1 ，并返回被删除元素的值。shift() 是删除数组的第一个元素，是数组的长度减 1 ，并返回被删除元素的值。

		var arr = new Array(1,2,3,4,5,6);       
		console.log(arr.length)
        // 在数组开头添加一个元素 返回值为 7
        console.log(arr.unshift(0));
        // 在数组末尾添加一个元素  返回值为 8
        console.log(arr.push(7));
        //查看数组
        console.log('添加后的数组');
        for(var i = 0 ; i < arr.length ; i++){
            console.log(arr[i]);
        }
        //删除数组第一个元素  返回被删除元素的值   0
        console.log(arr.shift());
        //删除数组最后一个元素 返回被删除元素的值   7
        console.log(arr.pop());
        //查看数组
        console.log('删除后的数组');
        for(var i = 0 ; i < arr.length ; i++){
            console.log(arr[i]);
        }

④数组排序

​ 改变数组元素的排列顺序的方法有：reverse() 和 sort() 。reverse() 是用来颠倒数组中元素的顺序，没有参数，返回值为修改后的数组，可用于字符串数组和数字数组。sort() 是对数字数组的元素进行排序，返回值为修改后的数组，根据参数的不同来判断是进行升序排序还是降序排序，默认无参数时，排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列进行排序的，如果参数为“function(a,b){ return a-b;}”，则为升序；如果参数为“function(a,b){ return b-a;}”，则为降序。
如果数组中全是英文字母，我们还可通过sort() 函数调整数组按照元素首字母的英文字母顺序排序（A ~ Z，a ~ z），如果首字母相同则比较第二个字母，以此类推。而且顺序无法调整为倒叙，只能是正序。

		var arr = [1,6,4,8,21];
        //颠倒
        console.log(arr.reverse()); // [21, 8, 4, 6, 1]
        // 升序
        console.log(arr.sort(function(a,b){ return a-b;}));  //[1, 4, 6, 8, 21]
        //降序
        console.log(arr.sort(function(a,b){ return b-a;}));  //[21, 8, 6, 4, 1]
        // 全大写字母排序
        arr = ['B','A','D','C'];
        console.log(arr.sort()) // ['A','B','C','D']
        // 全小写字母排序
        arr = ['b','a','d','c'];
        console.log(arr.sort()) // ['a','b','c','d']
        // 大小写字母混杂排序 先排大写  再排小写 
        arr = ['C','A','d','H','b'];
        console.log(arr.sort()) // ['A', 'C', 'H', 'b', 'd']
        // 多个字母
        arr = ['ab','ba','ac'];
        console.log(arr.sort()) // ['ab', 'ac', 'ba']
        

sort() 参数详解：

⑤数组元素查找

​ 从数组中获取指定元素索引值的方法有：indexOf() 和 lastIndexOf() 。indexOf() 是从第一个数组元素开始查找，如果找到，则返回第一个指定元素的索引，如果不存在，则返回 -1 。lastIndexOf() 是从最后一个数组元素开始查找，如果找到，则返回第一个指定元素的索引，如果不存在，则返回 -1 。总的来说：indexOf() 从前往后查找，按数组排序来说返回的是第一个指定元素。lastIndexOf() 从后往前查找，按数组排序来说返回的是最后一个指定元素。

        // 只返回第一个满足条件的索引号 
        // 如果在该数组里面找不到元素，则返回的是 -1  
         var arr = ['red', 'green', 'blue', 'pink', 'blue'];
        console.log(arr.indexOf('blue'));  // 2
        // 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
        console.log(arr.lastIndexOf('blue')); // 4

⑥数组转换成字符串

​ 把数组转换成字符串的方法有：toString() 和 join(‘分隔符’) 。toString() 是将数组元素转换成字符串元素后，用逗号 ‘,’ 把他们连接成一个字符串，并返回这个字符串。join(‘分隔符’) 也是将数组元素转换成字符串元素后，用分隔符将他们连接一个字符串，并返回这个字符串。分隔符可以是 + - ￥ & 等任意符号，如果括号里没有写用什么分隔符连接，则默认用逗号 ‘,’ 连接。

        // 1. toString() 将我们的数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString()); // 1,2,3
        // 2. join(分隔符) 
        var arr1 = ['green', 'blue', 'pink'];
        console.log(arr1.join()); // green,blue,pink
        console.log(arr1.join('-')); // green-blue-pink
        console.log(arr1.join('&')); // green&blue&pink

⑦ 数组求和
reduce()是数组的一个内置方法，它可以用于对数组的元素进行累积计算。该方法接受一个回调函数作为参数，并且可以接受一个初始值作为可选参数。reduce() 不会改变原数组。
下面是reduce()方法的具体语法：

array.reduce(callback[, initialValue])

其中callback参数是一个回调函数用于对数组元素进行计算，其拥有四个参数：
accumulator：累加器，用于存储上一次callback累积的结果，如果指定了 initialValue 则为指定的值，否则为 array[0] 的值。
currentValue：当前处理的元素值，在第一次调用时，如果指定了 initialValue，则为 array[0] 的值，否则为 array[1]。
currentIndex：当前处理的currentValue 在数组中的索引位置。在第一次调用时，如果指定了 initialValue 则为 0，否则为 1。
array：调用 reduce() 的数组本身。
可选参数initialValue表示求和的初始值，用于作为累加器的初始值。如果不提供初始值，则默认使用数组的第一个元素作为初始值，并从第二个元素开始进行累积计算。

const numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((a, b, c, d) => {
  console.log(a); // 输出上一次`callback`累积的结果
  console.log(b); // 输出当前处理的元素值
  console.log(c); // 输出当前处理的元素的索引
  console.log(d); // 输出调用 reduce() 的数组本身
  return a + b;
}, 0);

let sum = numbers.reduce((a, b) => {
  return a + b;
}, 0);
console.log(sum); // 输出：15

sum = numbers.reduce((a, b) => {
  return a + b;
}, 10);
console.log(sum); // 输出：25

⑧ 其他方法

​ 数组还有一些经常使用的方法：concat() 、 slice() 和 splice() 。concat() 是用来连接多个数组的，他不会对原数组产生影响，只是在连接后返回一个新数组。slice(begin,end) 是用来对数组进行截取的，截取的是索引号从begin 到 end - 1 的元素，不包括end，如果没有end ，怎从begin 截取到最后一个元素。返回的是截取的新数组，不对原数组产生影响。splice(begin,num,新元素) 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容,此方法会改变原数组。begin 表示从哪个元素开始，num表示要改变元素的数量，新元素在删除时不需要写这个参数，在添加和替换时，表示用来替换和添加的新元素。

// 1.concat()
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// ["a", "b", "c", "d", "e", "f"]

// 2.slice()
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
//没有end
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// ["camel", "duck"]
console.log(animals.slice(1, 5));
// ["bison", "camel", "duck", "elephant"]

// 3.splice()
var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
// ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
console.log(months);
// ["Jan", "Feb", "March", "April", "May"]
months.splice(1,1);
console.log(months);
// ["Jan", "March", "April", "May"]

5、字符串对象

​ 谈到字符串对象，我们首先要有这样一个概念： 字符串的不可变。字符串的不可变是指在改变字符串对象的内容时，看上去是修改了相应内存空值，其实际上是在内存中开辟了一个新空间，然后将字符串的内存地址换成新空间的内存地址，原来地址空间内的值不会改变，这个特点就叫做字符串的不可变。字符串的所有方法，都不会修改字符串本身（字符串是不可变的），每次操作完成后都是返回一个新创建的字符串。因为字符串的不可变，我们在多次拼接或修改字符串时，会占用大量的内存，所以我们不要频繁修改字符串。

下面介绍一些常用的操作字符串的方法

①查找字符在字符串中的位置

​ 查找字符在字符串中的位置有两种：indexOf() 和 lastIndexOf() 两种。indexOf(‘str’,location)，共有两个参数：str 代表要查找的字符，location代表从字符串哪个位置开始查找，用索引号来表示位置，索引号从 0 开始。如果找到了就返回该字符在字符串中的位置（索引号），如果字符串中有多个该字符，则返回第一个查找到的字符位置，找不到就返回 -1。**lastIndexOf(‘str’,location)**同理，只不过是从字符串的后面往前开始查找，返回从后往前第一个该字符的位置。

        var str = '改革春风吹满地，春天来了';
        console.log(str.indexOf('春'));  //从头开始查找   2
        console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找   8
        console.log(str.lastIndexOf('春'))  // 从最后开始往前查找  8
        console.log(str.lastIndexOf('春',3)) // 从索引号是 3的位置开始往前查找  2

//实例：查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
 // 核心算法：先查找第一个o出现的位置
        // 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
        // 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
        var str = "oabcoefoxyozzopp";
        var index = str.indexOf('o');
        var num = 0;
        while (index !== -1) {
            console.log(index);
            num++;
            index = str.indexOf('o', index + 1);
        }
        console.log('o出现的次数是: ' + num);

②根据位置获取对应的字符

​ 根据 index 字符串的索引号获取对应位置的字符有三种方法：charAt(index) 、charCodeAt(index) 和 str[index] 。charAt(index)的返回值是对应位置的字符本身。charCodeAt(index) 返回的是对应位置字符的ASCII码，可应用于判断用户按下了哪个键盘按键。 str[index]也是返回对应位置的字符本身，只不过是HTML5新增的方法，在实际应用中要注意兼容性问题。

        // 根据位置返回字符
        // 1. charAt(index) 根据位置返回字符
        var str = 'andy';
        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(0)); // 97
        // 3. str[index] H5 新增的
        console.log(str[0]); // a

③对字符串进行操作

​ 常用的对字符串进行操作的方法有： 连接字符串 concat()，截取字符串 substr() 、slice() 、 substring() ，替换字符串中的字符 replace() ，将字符串切分成数组 split() 。

      // 1. concat('字符串1','字符串2'....) 效果等效于str + str ，+号更常用 
      var str = 'andy';
      console.log(str.concat('red'));  // andyred

      // 2. substr('截取的起始位置', '截取几个字符'); 这个是最常用的字符串截取方法 重点掌握
      var str1 = '改革春风吹满地';
      console.log(str1.substr(2, 2));  // 春风
      // 第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符
	  // slice(start,end)  从start位置开始 ，截取到end的前一个字符 不包括end
	  console.log(str1.slice(2, 3));  // 春
	  // substring(start,end)  从start位置开始 ，截取到end的前一个字符 不包括end
	  console.log(str1.substring(2, 3));  // 春

      // 3. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个匹配的字符
      var str = 'andyandy';
      console.log(str.replace('a', 'b'));  // bndyandy
	  //如果想要替换所有匹配的字符  则需要用到循环
      // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
      var str1 = 'abcoefoxyozzopp';
      while (str1.indexOf('o') !== -1) {
          str1 = str1.replace('o', '*');
      }
      console.log(str1);   // abc*ef*xy*zz*pp

      // 4. 字符转换为数组 split('分隔符') 返回值为切割后的数组
      var str2 = 'red, pink, blue';
      console.log(str2.split(',')); // [red,pink,blue]
      var str3 = 'red&pink&blue';
      console.log(str3.split('&'));  // [red,pink,blue]

二、数据类型

​ 简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null。

​ 复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

​ 基本包装类型（不太理解，后续补充）：基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。JavaScript 提供了三个特殊的引用类型：String、Number和 Boolean。这些类型与其他引用类型相似，但同时也具有与各自的基本类型相应的特殊行为。实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而能够调用一些方法来操作这些数据。

//把基本数据类型包装为复杂数据类型
// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;