往期回顾
「JavaScript 从入门到精通」2.流程控制和错误处理
前置知识
数组是一个有序的数据集合，使用数组名称和索引进行访问。
let arr = [1,2,3]; arr[0] = 1;
在JavaScript中数组没有明确数据类型。
let arr = [1, 'hi', undefined, fun()];
1.创建数组
创建数组方法有3种：
let arr = new Array(ele1, ele2, ele3, ..., eleN); let arr = Array(ele1, ele2, ele3, ..., eleN); let arr = [ele1, ele2, ele3, ..., eleN];
上面是已知数组元素，另外一种还有创建一个长度不为0，且有没有任何元素的数组：
let len = 5; let arr = new Array(len); // 方法1 let arr = Array(len); // 方法2 let arr = []; // 方法3 arr.length = len;
若传入的数组长度不是整数，则报错：
let arr = new Array(3.5); let arr = Array(3.5); let arr = []; arr.length = 3.5; //Uncaught RangeError: Invalid array length
其中要注意这两种创建方法是不同的：
let arr1 = new Array(4); // [empty × 4]
let arr2 = [4]; // [4]
for(let k in arr1){
console.log(k);
} // undefined
for(let k in arr2){
console.log(k);
} // 0
2.使用数组
2.1 简单使用
获取数组指定位置的值：
let a = [1,2,5]; a[0]; // 1 a[2]; // 5 a[3]; // undefined
获取数组长度：
let a = [1,2,5]; a.length; // 3 a["length"]; // 3
设置数组指定位置的值：
let a = [1,2,5]; a[0] = 9; a[2] = 99; a[3] = 999;
2.2 理解数组length
- 数组的索引值是从0开始，即上面数组索引0的是1,索引1的值是2，依次下去。
- 数组length永远返回的是数组最后一个元素的索引加1。
- 可通过arr.length = 0来清空数组。
- 可通过arr.length = len来设置数组长度。
2.3 遍历数组
遍历数组就是以某种方法处理数组的每个元素，简单如下：
- 使用for循环：
- 使用for...in：
- 使用forEach：
- arr.forEach(callback) 接收一个回调方法。
- callback(val, index, array) : 接收三个参数：
- val : 当前处理的元素；
- index : 当前处理的元素的索引；
- array : 正在处理的数组；
可参考MDN Array.prototype.forEach 的详细介绍。
3. 数组方法（访问和修改）
可参考W3school JavaScript Array 对象 的详细介绍。
3.1 concat()
连接两个或更多的数组，并返回一个新数组。
- 语法:
- arr.concat(a1, a2, ..., an);
- 参数:
- arr：目标数组；
- a1,a2,...,an：需要合并的元素；
let a1 = [1,2,3]; let a2 = [9,99,999]; let a = a1.concat(a2); // [1, 2, 3, 9, 99, 999]
3.2 join()
使用指定分隔符，连接两个或多个数组的元素，返回一个字符串。
- 语法:
- arr.join(sep);
- 参数:
- arr：目标数组；
- sep：连接的分隔符，默认值为“,”；
3.3 pop()和push()
- pop(): 删除并返回数组最后一个元素，改变原数组。
- push(item): 向数组末尾添加一个或多个元素，改变原数组，返回新的数组长度。
- 方便记忆和理解：两个都是从数组末尾操作，pop()是删除最后一个元素，push()是向最后一位添加新的元素。
3.4 shift()和unshift()
- shift(): 删除并返回数组第一个元素，改变原数组。
- unshift(item): 向数组头部添加一个或多个元素，改变原数组，返回新的数组长度。
方便记忆和理解：两个都是从数组头部操作，shift()是删除第一个元素，unshift()是向第一位添加新的元素。
3.5 reverse()
颠倒数组中元素的顺序，改变原数组。
3.6 slice()
用于提取数组中一个片段，作为新数组返回。
slice(start[,end]): 接收2个参数：
- start: 必需，指定起始索引，若负数则从数组最后开始算起，-1为倒数第一位，-2为倒数第二位，以此类推。
- end： 可选，指定结束索引，若没传则表示到数组结束。
注意：
end若有指定的话，是不包含end索引上的值。
3.7 splice()
从数组中删除指定索引开始的项目，然后返回被删除的项目。
- 语法： arr.splice(index, num, a1, a2,...,an);
- 参数：
- index: 必需，起始位置的索引，若负数则从数组最后开始算起；
- num：必需，删除的数量，若为0则不删除；
- a1,a2,...an：可选，为数组添加的元素；
3.8 sort()
对数组的元素进行排序，改变原数组。
可接受一个回调方法作为比较函数，来决定排序方式。
比较函数应该具有两个参数 a 和 b，返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。 若 a 等于 b，则返回 0。 若 a 大于 b，则返回一个大于 0 的值。
3.9 indexOf()和lastIndexOf()
两者都是在数组搜索指定元素，只是indexOf()返回的是搜索到的第一个元素的索引，而lastIndexOf()返回的是搜索到的最后一个元素的索引。
语法：
indexOf(ele[,start])和lastIndexOf(ele[,start]);
参数：
- ele: 需要搜索的元素。
- start: 开始搜索的索引。
4. 数组方法（迭代）
以下是ES6规范新增的数组方法：
可参考MDN Array 的详细介绍。
4.1 forEach()
对数组的每个元素执行一次提供的函数。
语法：
arr.forEach(callback)。
参数：
callback(val, index, arr) : 需要执行的函数，接收三个参数：
- val : 正在处理的当前元素;
- index : 可选，正在处理的当前元素的索引;
- arr : 可选，正在操作的数组;
4.2 every()
测试数组的所有元素是否都通过了指定函数的测试。
语法：
arr.every(callback)。
参数：
callback(val, index, arr) : 需要执行的函数，接收三个参数：
- val : 正在处理的当前元素;
- index : 可选，正在处理的当前元素的索引;
- arr : 可选，正在操作的数组;
返回值：
若都通过返回true，否则返回false。
4.3 some()
测试数组中的某些元素是否通过由提供的函数实现的测试。
语法：
arr.some(callback)。
参数：
callback(val, index, arr) : 需要执行的函数，接收三个参数：
- val : 正在处理的当前元素;
- index : 可选，正在处理的当前元素的索引;
- arr : 可选，正在操作的数组;
返回值：
若有一个通过返回true，否则返回false。
4.4 filter()
将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。
语法：
arr.filter(callback)。
参数：
callback(val, index, arr) : 需要执行的函数，接收三个参数：
- val : 正在处理的当前元素;
- index : 可选，正在处理的当前元素的索引;
- arr : 可选，正在操作的数组;
返回值：
一个返回通过测试的元素的数组，若都没有则返回空数组。
4.5 map()
传入一个操作函数，对每个元素执行此方法，并返回一个执行后的数组。
语法：
arr.map(callback)。
参数：
callback(val, index, arr) : 需要执行的函数，接收三个参数：
- val : 正在处理的当前元素;
- index : 可选，正在处理的当前元素的索引;
- arr : 可选，正在操作的数组;
返回值：
一个新数组，每个元素都是回调函数的结果。
5. 数组的拓展（ES6）
5.1 拓展运算符
拓展运算符使用(...)，类似rest参数的逆运算，将数组转为用(,)分隔的参数序列。
拓展运算符主要使用在函数调用。
若拓展运算符后面是个空数组，则不产生效果。
替代apply方法
拓展运算符的运用
- (1)复制数组：
通常我们直接复制数组时，只是浅拷贝，如果要实现深拷贝，可以使用拓展运算符。
- (2)合并数组：
注意，这里合并数组，只是浅拷贝。
- (3)与解构赋值结合：
与解构赋值结合生成数组，但是使用拓展运算符需要放到参数最后一个，否则报错。
5.2 Array.from()
将 类数组对象 和 可遍历的对象，转换成真正的数组。
5.3 Array.of()
将一组数值，转换成数组，弥补Array方法参数不同导致的差异。
5.4 find()和findIndex()
find()方法用于找出第一个符合条件的数组成员，参数为一个回调函数，所有成员依次执行该回调函数，返回第一个返回值为true的成员，如果没有一个符合则返回undefined。
回调函数接收三个参数，当前值、当前位置和原数组。
findIndex()方法与find()类似，返回第一个符合条件的数组成员的位置，如果都不符合则返回-1。
5.5 fill()
用于用指定值填充一个数组，通常用来初始化空数组，并抹去数组中已有的元素。
并且fill()的第二个和第三个参数指定填充的起始位置和结束位置。
[1,2,3].fill('a',1,2);// [1, "a", 3]
5.6 entries(),keys(),values()
主要用于遍历数组，entries()对键值对遍历，keys()对键名遍历，values()对键值遍历。
5.7 includes()
用于表示数组是否包含给定的值，与字符串的includes方法类似。
第二个参数为起始位置，默认为0，如果负数，则表示倒数的位置，如果大于数组长度，则重
置为0开始。
5.8 flat(),flatMap()
flat()用于将数组一维化，返回一个新数组，不影响原数组。
默认一次只一维化一层数组，若需多层，则传入一个整数参数指定层数。
若要一维化所有层的数组，则传入Infinity作为参数。
flatMap()是将原数组每个对象先执行一个函数，在对返回值组成的数组执行flat()方法，返回一个新数组，不改变原数组。
flatMap()只能展开一层。
6. 数组的拓展（ES7）
6.1 Array.prototype.includes()方法
includes()用于查找一个值是否在数组中，如果在返回true，否则返回false。
includes()方法接收两个参数，搜索的内容和开始搜索的索引，默认值为0，若搜索值在数组中则返回true否则返回false。
与indexOf方法对比，下面方法效果相同：
includes()与indexOf对比：
- includes相比indexOf更具语义化，includes返回的是是否存在的具体结果，值为布尔值，而indexOf返回的是搜索值的下标。
- includes相比indexOf更准确，includes认为两个NaN相等，而indexOf不会。
另外在判断+0与-0时，includes和indexOf的返回相同。
公众号：前端自习课