扩展运算符

1.什么是扩展运算符？

扩展运算符是三个点（...），他是rest参数的逆运算。rest参数是将参数放到一个数组里，而扩展运算符是将数组转为用逗号分隔的参数序列。

//rest参数
function a(...item){
	console.log(item);
}
a(1,2,3)//[1,2,3]


//拓展运算符
function b(x,y){
	console.log(x,y);
}
b(...[1,2,3])//1 2
b(...[],1,2)//1 2
b(...(true?[1,2]:[]))//1 2

扩展运算符+空数组=没得用
扩展运算符+（表达式）=正常使用

2.扩展运算符的运用

1.合并数组

let a=[1,2,3]
let b=[4,5,6]
//es5
console.log(a.concat(b));//[1,2,3,4,5,6]
//es6
console.log([...a,...b]);//[1,2,3,4,5,6]

2.解构赋值

let list=[1,2,3,4,5,6]
//es5
let a=list[0]
let b=list.slice(1)
console.log(a);//1
console.log(b);//[2,3,4,5,6]
//es6
let [c,...d]=list
console.log(c);//1
console.log(d);//[2,3,4,5,6]

注意：扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

Array

1.Array.from()

作用： 将类似数组的对象和可遍历的对象转化为数组。

什么是类似数组的对象？

对象里有length属性的，且key值是0，1，2...的序列。如下
{0:'a',length:2}

let a={0:1,length:2}
let b=Array.from(a)
console.log(b);//[1,undifined]

什么是可遍历的对象？

对象部署了Iterator接口即可遍历。
像是上面例子的a就没部署Iterator接口，所以a就不是一个可遍历的对象。

像是扩展运算符也是可以将特定的对象转化成数组。扩展运算符的原理是调用iterator接口，也就是说对于可遍历的数据结构，扩展运算符可以将其转化成数组，例如argument，NodeList都可以被扩展运算符转化成数组，但对于上述的a就不行了，会报没有iterator的错。

有的浏览器没有部署Array.from()可咋整？

const toArray=(()=>Array.from?Array.from:obj=>[].slice.call(obj))()

就是用被转换的对象调用数组实例的slice函数。

接受第二个参数

Array.from()接受第二个参数，第二个参数的作用是遍历生成的数组并处理每个元素，将处理后的结果返回。

let a={0:1,1:2,length:2}
Array.prototype.from=Array.from//不想老是写Array.from,于是把这个方法挂在了原型上，由实例去调用，可以少些一些字母
let b=[].from(a,x=>x*x)
console.log(b);//[1,4]

接受第三个参数

当第二个参数里用了this指针，那么第三个参数可以将第二参数里的this指向第三个参数。
注意：如果要使用第三个参数，第二个参数不能是箭头函数，因为箭头函数中没有自己的this指针且指针指向不可变。

let a={0:1,1:2,length:2}
let c={index:2}
Array.prototype.from=Array.from
function d(x){return x*this.index}
let b=[].from(a,d,c)
console.log(b);//[2,4]

2.Array.of()

作用： 将传参变为数组。

console.log(Array());//[]
console.log(Array(2));//[,]
console.log(Array(1,2));//[1,2]
console.log(Array.of());//[]
console.log(Array.of(2));//[2]
console.log(Array.of(1,2));//[1,2]

由于直接用Array()转数组，不同个数的参数会导致不同的结果，是的转数组的功能不纯粹，于是有了Array.of()来转数组。

3.数组实例copyWidthin()

作用： 将数组中指定位置的元素复制到其他的位置（会改变原来的数组）

let a=[1,2,3,4,5]
console.log(a.copyWithin(0,1,5))//[2, 3, 4, 5, 5]
console.log(a);//[2, 3, 4, 5, 5]

copyWidthin函数包含三个参数：
第一个参数：从哪个下标开始覆盖原数组。
第二个参数：从哪个下标开始复制。
第三个参数：复制到哪个下标的前一个元素为止。

4.数组实例find()和findIndex()

find:
作用： 返回第一个符合条件的元素，没有符合的返回undefined。
findIndex：
作用： 返回第一个符合条件的元素的下标，没有符合的返回-1。

let a=[1,2,3,4,5,NaN]
console.log(a.findIndex((value,index,arr)=>value==2))//1
console.log(a.findIndex((value,index,arr)=>Object.is(NaN,value)));//5
console.log(a.find((value,index,arr)=>value==2));//2
console.log(a.find((value,index,arr)=>Object.is(NaN,value)));//NaN
console.log(a.indexOf(2));//1
console.log(a.indexOf(NaN));//-1

find和findIndex的参数是一个回调函数，这个函数包含三个参数，分别是遍历元素的值value，遍历元素的索引index，所遍历的数组arr，数组里的每个元素都会调用这个回调函数。
由于find和findIndex的参数都是回调函数，于是他们可以通过Object.is函数来区分NaN，而indexOf不行。

5.数组实例fill

作用： 用某个值（可以是对象）填充数组或者数组的指定位置（原数组会被覆盖）。

let a=[1,2,3,4,5]
let b=[6,7,8,9]
console.log(a.fill(7));//[7, 7, 7, 7, 7]
console.log(a);//[7, 7, 7, 7, 7]
console.log(b.fill(10,1,3));//[6, 10, 10, 9]

6.数组实例entries，keys，values

作用： 三者都是返回一个遍历器对象，entries是键值对的遍历，keys是键的遍历，values是值的遍历。

let a=[1,2,3,4,5]
for(let key of a.keys()){
	console.log(key);
}//0 1 2 3 4
for(let value of a.values()){
	console.log(value);
}//1 2 3 4 5
for(let elem of a.entries()){
	console.log(elem);
}//[0,1] [1,2] [2,3] [3,4] [4,5]

7.数组实例includes

作用：数组是否包含某个元素。

let a=[1,2,3,4,5]
console.log(a.includes(2));//true
console.log(a.includes(2,3));//false

第二个参数是开始搜索的位置。

【ES6】学习笔记：数组的扩展