es6的数组语法（图文ES6之数组扩展）
es6的数组语法（图文ES6之数组扩展）5 reverse() 反转数组中的元素 返回反转后数组 Y ES5-4 shift() 删除首个数组元素，并把所有其他元素“位移”到更低的索引 返回被删除的数据 Y ES5-1 push() (在结尾)向数组添加一或多个元素 返回新数组长度 Y ES5-2 unshift() （在开头)向数组添加一或多个元素 返回新数组长度 Y ES5-3 pop() 删除数组的最后一位 返回被删除的数据 Y ES5-
在javascript中，数组是最重要的数据结构，没有之一，因为所有的数据结构都可以使用数组模拟和表达。可以说掌握了数组，就掌握了js与数据操作的大部分核心功能。
ES6给数组添加了一些新特性，而这些新特性到目前为止完全可以运用到自己的业务层。
但是，开发者初次接触ES6，很多东西都看得云里来雾里，无从下手。在这一节中将总结有关于ES6给数组提供一些新特性的使用方法，让用户能够听得懂，用的起来。
顺序 方法名 功能 返回值 是否改变原数组 版本
1 push() (在结尾)向数组添加一或多个元素 返回新数组长度 Y ES5-
2 unshift() （在开头)向数组添加一或多个元素 返回新数组长度 Y ES5-
3 pop() 删除数组的最后一位 返回被删除的数据 Y ES5-
4 shift() 删除首个数组元素，并把所有其他元素“位移”到更低的索引 返回被删除的数据 Y ES5-
5 reverse() 反转数组中的元素 返回反转后数组 Y ES5-
6 sort() 以字母顺序(字符串Unicode码点)对数组进行排序 返回新数组 Y ES5-
7 splice() 在指定位置删除指定个数元素再增加任意个数元素 （实现数组任意位置的增删改) 返回删除的数据 Y ES5-
8 concat() 通过合并（连接）现有数组来创建一个新数组 返回合并之后的数组 N ES5-
9 join() 用特定的字符 将数组拼接形成字符串 (默认" ") 返回拼接后的新数组 N ES5-
10 slice() 裁切指定位置的数组 被裁切的元素形成的新数组 N ES5-
11 toString() 将数组转换为字符串 新数组 N ES5-
12 valueOf() 查询数组原始值 数组的原始值 N ES5-
13 indexOf() 查询某个元素在数组中第一次出现的位置 存在该元素 返回下标 不存在 返回 -1 N ES5-
14 lastIdexOf() 方向查询数组某个元素在数组中第一次出现的位置 存在该元素 返回下标 不存在 返回 -1 N ES5-
15 forEach() (迭代) 遍历数组 每次循环中执行传入的回调函数 无/(undefined) N ES5-
16 map() (迭代) 遍历数组 每次循环时执行传入的回调函数 根据回调函数的返回值 生成一个新的数组 有/自定义 N ES5-
17 filter() (迭代) 遍历数组 每次循环时执行传入的回调函数 回调函数返回一个条件 把满足条件的元素筛选出来放到新数组中 满足条件的元素组成的新数组 N ES5-
18 every() (迭代) 判断数组中所有的元素是否满足某个条件 全都满足返回true 只要有一个不满足 返回false N ES5-
19 some() (迭代) 判断数组中是否存在 满足某个条件的元素 只要有一个元素满足条件就返回true 都不满足返回false N ES5-
20 reduce() (归并)遍历数组 每次循环时执行传入的回调函数 回调函数会返回一个值 将该值作为初始值prev 传入到下一次函数中 最终操作的结果 N ES5-
21 reduceRight() (归并)用法同reduce 只不过是从右向左 同reduce N ES5-
22 includes() 判断一个数组是否包含一个指定的值. 是返回 true，否则false N ES6
扩展运算符的应用ES6通过扩展元素符...，好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列
console.log(...[1 2 3])
// 1 2 3
console.log(1 ...[2 3 4] 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div> <div> <div>]
主要用于函数调用的时候，将一个数组变为参数序列
function push(array ...items) {
array.push(...items);
}
function add(x y) {
return x y;
}
const numbers = [4 38];
add(...numbers) // 42
可以将某些数据结构转为数组
[...document.querySelectorAll('div')]
能够更简单实现数组复制
const a1 = [1 2];
const [...a2] = a1;
// [1 2]
数组的合并也更为简洁了
const arr1 = ['a' 'b'];
const arr2 = ['c'];
const arr3 = ['d' 'e'];
[...arr1 ...arr2 ...arr3]
// [ 'a' 'b' 'c' 'd' 'e' ]
注意：通过扩展运算符实现的是浅拷贝，修改了引用指向的值，会同步反映到新数组
下面看个例子就清楚多了
const arr1 = ['a' 'b' [1 2]];
const arr2 = ['c'];
const arr3 = [...arr1 ...arr2]
arr[1][0] = 9999 // 修改arr1里面数组成员值
console.log(arr[3]) // 影响到arr3 ['a' 'b' [9999 2] 'c']
扩展运算符可以与解构赋值结合起来，用于生成数组
const [first ...rest] = [1 2 3 4 5];
first // 1
rest // [2 3 4 5]
const [first ...rest] = [];
first // undefined
rest // []
const [first ...rest] = ["foo"];
first // "foo"
rest // []
如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
const [...butLast last] = [1 2 3 4 5];
// 报错
const [first ...middle last] = [1 2 3 4 5];
// 报错
可以将字符串转为真正的数组
[...'hello']
// [ "h" "e" "l" "l" "o" ]
定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
let map = new Map([
[1 'one']
[2 'two']
[3 'three']
]);
let arr = [...map.keys()]; // [1 2 3]
如果对没有 Iterator 接口的对象，使用扩展运算符，将会报错
const obj = {a: 1 b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object
forEach（）函数
①数组名.forEach（function（数组中一个元素的值）{对这个值进行处理....}）
②数组名.forEach（test）test为方法名，不用加（），把函数引用传进去
③利用函数引用这种方式的话，会自己把每个值传进去，不需要用（）传进去
①map（）方法一定要有一个返回值，没有返回值的话就会返回一个undefined
②map（）方法的返回值是一个数组
③应用场景：要返回一个要利用原数组经过运算后的数组，或者是在一个对象数组中要拿到某一个属性，并且返回一个新数组的情况
①filter可以返回一个新数组，也可以直接改变原数组
①应用场景：
1)已知对象数组，要把对象数组中一些符合要求的对象重新组成一个数组
2）筛选出符合多个条件的对象数组中的一些元素，组成新数组或者是直接覆盖原数组
3）有两个数组（A，B），根据A中的ID值，过滤掉B数组中不符合的数据
①find（）方法只会找到第一个符合的，找到之后就会直接返回，就算下面还有符合要求的，也不会再找下去
②应用场景
1)在对象数组中，找到符合要求的对象 只能找到第一个符合要求的
2)两个对象数组，找A数组中有B数组的ID的元素
3）开发应用环境：博客列表，点击博客列表，根据博客列表的URL的数组，用find找到对应的Id，然后找到对应的列表的详情页的URL，并进行展示
some（）和every（）方法①some()方法只要有一个满足就行，every（）方法要所有的满足才可以，即some（）：一真即真，every（）：一假即假，跟逻辑运算符差不多
②运用场景
1)如果所有的操作系统都大于16位，则该程序可用，否则即为不可用
//some只要有一个大于，它就不会再往下找，直接返回true，因为相当于 || （逻辑或运算符）
//every()相当于&&，找到第一个错的就直接返回false，不再往下找
②应用场景
1)代替map做一些简单的运算
2）将一个对象数组中的某些属性的值抽出来，组成一个新的数组
①reduce（function（sum number）{...} 0）要有两个参数，第一个参数一定要初始化
构造函数新增的方法关于构造函数，数组新增的方法有如下：
- Array.from()
- Array.of()
将两类对象转为真正的数组：类似数组的对象和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）
let arrayLike = {
'0': 'a'
'1': 'b'
'2': 'c'
length: 3
};
let arr2 = Array.from(arrayLike); // ['a' 'b' 'c']
还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组
Array.from([1 2 3] (x) => x * x)
// [1 4 9]
Array.of()
用于将一组值，转换为数组
Array.of(3 11 8) // [3 11 8]
没有参数的时候，返回一个空数组
当参数只有一个的时候，实际上是指定数组的长度
参数个数不少于 2 个时，Array()才会返回由参数组成的新数组
Array() // []
Array(3) // [ ]
Array(3 11 8) // [3 11 8]
实例对象新增的方法
关于数组实例对象新增的方法有如下：
- copyWithin()
- find()、findIndex()
- fill()
- entries()，keys()，values()
- includes()
- flat()，flatMap()
将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组
参数如下：
- target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
- start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。
[1 2 3 4 5].copyWithin(0 3) // 将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2
// [4 5 3 4 5]
find()、findIndex()
find 返回数组中第一个满足条件的元素（如果有的话）， 如果没有，则返回undefined。
find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
[1 5 10 15].find(function(value index arr) {
return value > 9;
}) // 10
数组实例的 findIndex 方法的用法与 find 方法很类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回 -1。
[1 5 10 15].findIndex(function(value index arr) {
return value > 9;
}) // 2
这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。
function f(v){
return v > this.age;
}
let person = {name: 'John' age: 20};
[10 12 26 15].find(f person); // 26
indexOf 方法无法识别数组的 NaN 成员，但是 findIndex 方法可以借助 Object.is 方法做到。
['a' 'b' NaN 'c'].indexOf(NaN)
// -1
['a' 'b' NaN 'c'].findIndex(y => Object.is(NaN y))
// 2
fill()
使用给定值，填充一个数组
['a' 'b' 'c'].fill(7)
// [7 7 7]
new Array(3).fill(7)
// [7 7 7]
还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置
['a' 'b' 'c'].fill(7 1 2)
// ['a' 7 'c']
注意，如果填充的类型为对象，则是浅拷贝
entries()，keys()，values()它们都返回一个遍历器对象，都可以用 for...of 循环进行遍历。
唯一的区别是 keys 是对键名的遍历、 values 是对键值的遍历， entries 是对键值对的遍历。
keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
or (let index of ['a' 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a' 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index elem] of ['a' 'b'].entries()) {
console.log(index elem);
}
// 0 "a"
includes()
方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。
没有该方法之前，我们通常使用数组的 indexOf 方法，检查是否包含某个值。
用于判断数组是否包含给定的值
[1 2 3].includes(2) // true
[1 2 3].includes(4) // false
[1 2 NaN].includes(NaN) // true
方法的第二个参数表示搜索的起始位置，默认为0
参数为负数则表示倒数的位置
[1 2 3].includes(3 3); // false
[1 2 3].includes(3 -1); // true
indexOf 方法有两个缺点：
一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于 -1，表达起来不够直观。
二是，它内部使用严格相等运算符（===）进行判断，这会导致对 NaN 的误判。
flat()，flatMap()说到数组拍平，我们先看一道阿里面试题：
编写一个 JavaScript 函数，接受一个仅包含数字的 多维数组 ，返回拍平以后的结果。例如传入：[1 [[2] 3 4] 5]，返回 [1 2 3 4 5]。
将数组扁平化处理，返回一个新数组，对原数据没有影响
[1 2 [3 4]].flat()
// [1 2 3 4]
flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1
[1 2 [3 [4 5]]].flat()
// [1 2 3 [4 5]]
[1 2 [3 [4 5]]].flat(2)
// [1 2 3 4 5]
方法对原数组的每个成员执行一个函数（相当于执行 Array.prototype.map），然后对返回值组成的数组执行 flat() 方法。该方法返回一个新数组，不改变原数组。
// 相当于 [[2 4] [3 6] [4 8]].flat()
[2 3 4].flatMap((x) => [x x * 2])
// [2 4 3 6 4 8]
flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this
数组的空位数组的空位指，数组的某一个位置没有任何值
ES6 则是明确将空位转为undefined，包括Array.from、扩展运算符、copyWithin()、fill()、entries()、keys()、values()、find()和findIndex()
建议大家在日常书写中，避免出现空位
排序稳定性将sort()默认设置为稳定的排序算法
const arr = [
'peach'
'straw'
'apple'
'spork'
];
const stableSorting = (s1 s2) => {
if (s1[0] < s2[0]) return -1;
return 1;
};
arr.sort(stableSorting)
// ["apple" "peach" "straw" "spork"]
排序结果中，straw在spork的前面，跟原始顺序一致
给大家分享我收集整理的各种学习资料，前端小白交流、学习交流，也可以直接问我，我会组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习-下面是学习资料参考。
前端学习交流、自学、学习资料等推荐 - 知乎
