数组的扩展----ES6重刷08

在此我会着重讲扩展运算符【三点运算符】，结合对于数组的一些便捷操作及深拷贝；其次讲讲Array实例的某些新的方法及注意事项【略带Iterator接口个返回值为Iterator遍历器对象的genrator函数function *() {}】；最后讲讲哪些数据结构存在内置部署的Iterator接口，而对于没有内置部署的Iterator接口的数据结构，怎末进行自定义的Iterator接口部署。

一、扩张运算符【三点运算符】
1、适用于那些数据结构？
首先总的来说三点运算符是解包对象，为什么能解包呢，是因为利用了被解包对象中的遍历器，也就是Iterator接口，（至于为什么Object数据结构并没有内置的Iterator接口，却可以被三点运算这点我也还未清楚【若有大佬清楚，还望点明小弟，在此不胜感激】），这就说明拥有内置Iterator接口的数据结构就可以被三点运算符解包。

好现在我们明白了能被三点运算符解包的数据结构有内置Iterator接口这一特点（除了Oobject），那我们就来说说那些数据结构存在内置的Iterator接口
原生具备 Iterator 接口的数据结构如下。
Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象 // 类似document.querySelectorAll('div')

由于我们这次是数组的扩展，我们就讲讲三点运算符为数组的操作带来了哪些便捷

便捷一、对数组的增

const arr1 = [1, 2, 3]
let test = [...arr1 , 4]
console.log('test', test) // [1, 2, 3, 4]在这里插入代码片

便捷二、对数组的copy
1、当原数组内部的元素为基本数据类型【Undefined、Null、String、Number、Boolean】时，对数组的拷贝为深拷贝

const arr1 = [1, 2, 3]
const test = [...arr1]
test[0] = 111
console.log('test', test) // [111, 2, 3]
console.log('arr1', arr1) // [1, 2, 3]

2、当原数组的内部元素存在引用数据类型【Object、Array、Function】时，对数组的拷贝为浅拷贝

let arr = [1, 2, [1, 2, 3]]
const test = [...arr]
arr[2] = Object.assign(arr[2], [4, 5, 6])
console.log(test) // [1, 2, [4, 5, 6]]

便捷三、合并数组

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const test = [...arr1, ...arr2]
console.log('test', test) // [1, 2, 3, 4, 5, 6]

便捷四、配合解构解析

const { first: objectFirst, ...objectRest } = { first: 'first', second: 'second', third: 'third' }
const [ arrayFirst, ...arrayRest ] = [1, 2, 3, 4, 5]
console.log('objectFirst', objectFirst) // first
console.log('objectRest', objectRest) // {second: "second", third: "third"} 
console.log('arrayFirst', arrayFirst) // 1
console.log('arrayRest', arrayRest) // [2, 3, 4, 5]

二、扩展运算的解包和打包【当用于函数传参时】

const firstTest = (...args) => {
  console.log(args)
}
const secondTest = ([...args]) => {
  console.log(args)
}
const thirdTest = ({...args}) => {
  console.log(args)
}

firstTest('first', 'second') // ["first", "second"]
secondTest('first', 'second') // ["f", "i", "r", "s", "t"]
thirdTest('first', 'second') // {0: "f", 1: "i", 2: "r", 3: "s", 4: "t"}

两种情况
1、当...args没有被区域性括号【{}、[]】包裹时，则表现为打包，args以数组形式返回所有参数。

2、当...args被区域性括号【{}、[]】包裹时，则表现为解包，args以所对应的数组或对象的形式返回被解包元素的所有子元素。

三、Array.from方法的注意事项
作用：将类似数组的数据结构转化为真正的数组结构，比如NodeList对象转化Array
注意事项：
1、能转化内置了Iterator接口的数据结构，也就是说上述的七种
2、能转化拥有.length属性的类数组数据结构
3、若被转化数据对象本身就为数组，则会返回一个同样的新的数组【意味着是深拷贝哦】。

其他的实例方法就不加累述了，mdn文档，在此也同样对自己警告，时不时多看看七种基本类型数据结构实例方法