本文目录：
- 1.扩展运算符
- 2.Array.from
- 3.Array.of
- 4.copyWithin
- 5.find和findIndex
- 6.fill
- 7.entries、keys和values
- 8.includes
1.扩展运算符
扩展运算符用三个点(...)表示,从字面上理解，它的功能就是把数组扩展开来,具体形式如下：
let arr = [1, 2, 3];
console.log(...arr); //打印结果 1 2 3
//等价于
console.log(1,2,3);
从上面代码中，我们可以看出...arr展开后的形式是这样的 1,2,3,用逗号隔开的参数序列
默认展开后是以逗号为分割
在函数调用的时候，可以用这个扩展运算符把数组里面的元素展开，分别传给函数的形参
let arr = [4, 5, 6];
function Fn(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
return a + b + c;
}
result = Fn(...arr);
console.log(result);
扩展运算符可以和正常参数结合起来使用，非常的灵活
let arr = [4, 5, 6];
function Fn(a, b, c, d, e, f) {
console.log(a);
console.log(b);
console.log(c);
console.log(d, e, f)
}
Fn(1,...arr, 2, 3); //注意一一对应关系：1->a;...arr->b,c,d;2->e; 3->f
总结： 掌握扩展运算符在传参应用中的关键是抓住他们的一一对应关系
解构赋值中...不要在中间，但是在扩展运算符传参中可以在中间
扩展运算符应用
1.复制数组
如果把一个数组直接赋值给另一个数组，那么会产生引用，相互影响，在es5中，只能通过变通的方式复制数组，但在es6中，我们可以通过扩展运算符来实现数组复制
直接赋值 产生引用
let arr = [1, 2, 3];
let arr2 = arr;
arr2.push(4);
console.log(arr) // [1, 2, 3, 4]
es5 中复制数组
let arr = [1, 2, 3];
let arr3 = arr.concat();
arr3.push(4);
console.log(arr3)
这种方法可以成功的复制数组，并且不产生引用，但是比较麻烦，在es6中我们有了更简便的方法。
下面是es6中的复制数组：
let arr4 = [...arr];
arr4.push(5);
console.log("arr4",arr4); //[1,2,3,5]
console.log("arr",arr) //[1,2,3] 和arr4并不会相互影响
2.合并数组
let arr = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log([...arr,...arr2]) // [1, 2, 3, 4, 5, 6]
3.和解构赋值结合,用于生成数组
let [a, b, ...arr] = [1, 2, 4, 5, 6, 7]
console.log(arr); //[4, 5, 6, 7]
2.Array.from
Array.from：允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等可迭代对象) 上进行有用的转换。
基本语法
Array.from(arrayLike[, mapFunction[, thisArg]])
- arrayLike：必传参数，想要转换成数组的伪数组对象或可迭代对象。
- mapFunction：可选参数，mapFunction(item，index){…} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。
- thisArg：可选参数，执行回调函数 mapFunction 时 this 对象。这个参数很少使用。
例如，让我们将类数组的每一项乘以2：
const someNumbers = { '0': 10, '1': 15, length: 2 };
Array.from(someNumbers, value => value * 2); // => [20, 30]
基本用法
将类数组转换成数组
常见的类数组对象有：函数中的 arguments 关键字，或者是一个 DOM 集合。
在下面的示例中，让我们对函数的参数求和：
function sumArguments() {
return Array.from(arguments).reduce((sum, num) => sum + num);
}
sumArguments(1, 2, 3); // => 6
Array.from(arguments) 将类数组对象 arguments 转换成一个数组，然后使用数组的 reduce 方法求和。
Array.from可以把类数组转成真正的数组
<ul>
<li>nodeing_1</li>
<li>nodeing_2</li>
<li>nodeing_3</li>
<li>nodeing_4</li>
<li>nodeing_5</li>
<li>nodeing_6</li>
</ul>
<script>
let aLi = document.getElementsByTagName('li')
for(let i in aLi){
aLi[i].style.color = "red" //执行报错
}
</script>
上面报错原因是因为aLi是类数组，除了下标外还有其他属性，例如length属性, aLi[length].style.color,这样就会报错
let aLi = document.getElementsByTagName('li')
for(let i in Array.from(aLi)){
aLi[i].style.color = "red"
}
此外，Array.from() 的第一个参数可以是任意一个可迭代对象，我们继续看一些例子:
Array.from('Hey'); // => ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])); // => ['one', 'two']
const map = new Map();
map.set('one', 1)
map.set('two', 2);
Array.from(map); // => [['one', 1], ['two', 2]]
克隆一个数组
在 JavaScript 中有很多克隆数组的方法。Array.from() 可以很容易的实现数组的浅拷贝。
const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);
numbersCopy.push(4)
console.log(numbersCopy)
//[3, 6, 9, 4]
console.log(numbers)
//[3, 6, 9]
console.log(numbers === numbersCopy)
//false
Array.from(numbers) 创建了对 numbers 数组的浅拷贝，numbers === numbersCopy 的结果是 false，意味着虽然 numbers 和 numbersCopy 有着相同的项，但是它们是不同的数组对象。
3.Array.of
这个方法可以将一组数值转换成数组
let arr = Array.of(1, 2, 3,4)
console.log(arr) // [1,2,3,4]
这个方法的主要应用就是弥补Array的不足，基本上看可以取代Array()和new Array，当Array传入一个参数的时候，表示给数组设置长度，传入的参数大于等于2的时候，才返回数组，因此，参数的不同导致行为的差异
//Array的行为不统一，根据参数的不同返回的结果不一样
let arr = Array(4)
let arr2 = Array(1, 3)
let arr3 = Array(1,3,4,5);
console.log(arr, arr2, arr3) // [empty × 4] 、[1, 3]、 [1, 3, 4, 5]
Array.of不管传入多少参数，返回的都是数组
let arr = Array.of(4)
let arr2 = Array.of(1, 3)
let arr3 = Array.of(1,3,4,5)
console.log(arr, arr2, arr3) // [4] [1, 3] [1, 3, 4, 5]
4.copyWithin
将数组内部指定位置的元素复制到指定的目标位置
第一个参数，必选，为目标起始位置
第二个参数，可选，为被复制元素的开始位置
第三个参数，可选，为被复制元素的结束位置
例如下面这段代码，表示将下标3到4之间的元素（其实可以理解为下标为3的元素） 复制到下标为0的位置 原来位置的元素被覆盖。
let arr = [1, 2, 3, 4, 5, 6]
arr.copyWithin(0, 3, 4)
console.log(arr)
//[4,2,3,4,5,6]
下面这个，表示将下标3到5之间的元素（其实可以理解为下标为3和4的元素） 复制到下标为0的位置 原来位置的元素被覆盖。
arr.copyWithin(0,3,5)
console.log(arr) //[4,5,3,4,5,6]
5.find和findIndex
find方法用来查找数组中符合条件的第一个元素，接收一个回调函数
回调函数的第一个参数是每个数组元素，第二个参数是对应数组元素到索引，第三个参数是当前的数组
let arr = [1, 2, 3, 4, 5]
arr.find(function (item,i,a) {
console.log(item,i,a);
})
下面这段代码会返回第一个符合要求的元素4
let arr = [1, 2, 3, 4, 5]
let num = arr.find(function (v,i,a) {
return v > 3
})
console.log(num) //4
findIndex的用法和find类似，只是findIndex返回的是索引位置，而不是具体的值
let arr = [1, 2, 3, 4, 5]
let num = arr.findIndex(function (v,i,a) {
return v > 3
})
console.log(num) //3
6.fill
fill方法用于填充数组，用一个数字去填充整个数组，通常用来初始化一个数组
let arr = [1,2,8,8,8]
arr.fill(1)
console.log("arr",arr)
//[1, 1, 1, 1, 1]
7.entries、keys和values
这几个方法应用在遍历数组中
配合for...of结构去遍历数组
arr.keys()：遍历键名，打印出这个数组所有的下标
let arr = [1, 2, 3, 4, 5];
for(let index of arr.keys()){
console.log(index) //0,1,2,3,4
}
arr.values():遍历值，打印出来数组里面的每一个元素
for(let v of arr.values()){
console.log(v)
}
//1
//2
//3
//4
//5
arr.entries():遍历键/值对
let arr = [1, 2, 3, 4, 5];
for(let index of arr.entries()){
console.log(index)
//[0,1] //[下标，值]
//[1,2]
//[2,3]
//[3,4]
//[4,5]
}
8.includes
includes方法的作用是查看某个数组是否包含给定的值，返回一个布尔值，true表示包含，false表示没有这个值
let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(7)) //false
console.log(arr.includes(1)) //true
