es6 数组的扩展

es6数组的扩展

1. 扩展运算符

扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

• 基本使用

console.log(...[1,2,3]) // 1 2 3

console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5

• 函数的扩展

function add(a,b){
    console.log(a,b) // 2 3
}
let arr = [2,3]
add(...arr)

函数参数的扩展,函数执行时使用扩展运算符将一个数组传进去，这是这个数组会被展开

• 替代函数的apply方法

// Es5写法
function A(a,b,c){
    console.log(a,b,c)  // 1 2 3
}
let arr = [1,2,3]
A.apply(null,arr)

// Es6写法
function Es6(a,b,c){
    console.log(a,b,c)  // 1 2 3
}
let ary = [1,2,3]
Es6(...ary)

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

• 扩展运算符的应用

1. 复制数组

let arr = [1,2,3]
let ary = arr
ary[0]=100
console.log(arr) // [100, 2, 3]

由于数组是复合属性，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。上面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a2，会直接导致a1的变化。

let arr = [1,2,3]
let ary = [...arr]
ary [0] = 100
console.log(arr) // [1, 2, 3]

上面代码将arr展开放入一个新的数组中,改变arr不影响ary，所以使用扩展运算符可以帮我们更方便的复制数组

2. 合并数组

let a = [1,2]
let b = [3,4]
let c =  [...a,...b]
console.log(c) // [1,2,3,4]

上面代码我们使用扩展运算符将数组a和数组b展开放到一个新的数组里，然后赋值给c实现了数组合并

3. 类数组转数组

function a(){
    console.log(arguments)
    let arr = [...arguments]
    console.log(arr)
}
a(1,2,3,4)

上面代码使用扩展运算符将arguments展开放入一个新的数组中，可以实现类数组转数组

2.Array.from()

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组。

• 基本用法

let arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length: 3
};
let arr = Array.from(arrayLike)
console.log(arr)  // ["a", "b", "c"]

只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。

console.log(Array.from('hello')) // ['h', 'e', 'l', 'l', 'o']
let arr = new Set([1,2,3])
let array = Array.from(arr)
console.log(array)  // [1, 2, 3]

上面代码中，字符串和 Set 结构都具有 Iterator 接口，因此可以被Array.from转为真正的数组。

---

let a = [1,2,3]
let b = Array.from(a)
console.log(a===b) // false

上面代码中，如果Array.from中传入的是一个真正的数组，他的返回值就是一个科隆过的新数组

---

let a = {
    0:1,
    1:2,
    2:3,
    length:3
}
let b = Array.from(a,item=>item+1)
console.log(b) // [2, 3, 4]
// 等同于
let arr = Array.from(a).map(item=>item+1)
console.log(arr)

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

---

let a = {
    0:1,
    1:2,
    2:3,
    length:3
}
window.name= 0
let b = Array.from(a,item=>this.name+=item,this)
console.log(b) // [2, 3, 4]
console.log(window.name)  // 0123

如果map函数里面用到了this关键字，还可以传入Array.from的第三个参数，用来绑定this。

3.Array.of()

• Array.of方法用于将一组值，转换为数组。

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

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

console.log(Array(),Array(3),Array(3, 11, 8))  // [] (3)[empty × 3]length: 3__proto__: Array(0) (3) [3, 11, 8]

上面代码中，Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于 2 个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。

4. 数组实例的copyWithin()

数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

• 它接受三个参数
  • target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
  • start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
  • end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
• 这三个参数都应该是数值，如果不是，会自动转为数值。

// 将3号位复制到0号位
let arr = [1, 2, 3, 4, 5]
    let a= arr.copyWithin(0, 3, 4)
    console.log(a) //[4,2,3,4,5]

5.数组实例的 find() 和 findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

    let arr = [1, 2, 3, 4, 5]
    let a = arr.find(item=>item==3)
    console.log(a) // 3

这个方法，如果他找到了符合条件的数组成员，就不会在继续便利，直接将符合条件的数组成员返回

---

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

    let arr = [1, 2, 3, 4, 5]
    let a = arr.findIndex(item=>item==3)
    console.log(a) // 2

这个方法是找到当前符合条件的数组成员的位置，找到也会停止遍历直接返回

6.数组实例的 fill()

fill方法使用给定值，填充一个数组。

    let arr = [1, 2, 3, 4, 5]
    arr.fill(11)
    console.log(arr) // [11, 11, 11, 11, 11]

上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

---

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

    let arr = [1, 2, 3, 4, 5]
    arr.fill(11,3,4)
    console.log(arr) //  [1, 2, 3, 11, 5]

上面代码表示，fill方法从 3 号位开始，向原数组填充 11，到 4 号位之前结束。

---

    let arr = [1, 2, 3, 4, 5]
    arr.fill({name:'haha'},3,4)
    console.log(arr)  // [1, 2, 3, {…}, 5]

注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

7.数组实例的 entries()，keys() 和 values()

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

---

let arr = [1,2,3]
    for (let index of arr.keys()) {
        console.log(index); // 0 1 2
    }

keys()是对键名的遍历，也就是对数组的索引

---

    let arr = [1,2,3]
    for (let index of arr.values()) {
        console.log(index); // 1  2  3
    }

values 是对数组的值进行遍历

---

    let arr = [1,2,3]
    for (let [index,item] of arr.entries()) {
        console.log(index,item); // index:0 1 2 item:1 2 3
    }

>  entries可以拿到索引也可以拿到值

8.数组实例的 includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

    let arr = [1,2,3]
    let bool=arr.includes(1)
    let bool2=arr.includes(12)
    console.log(bool) // true
    console.log(bool2)  // false

---

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

    let arr = [1,2,3]
    let bool=arr.includes(1,0)
    console.log(bool) // false

9.数组实例的 flat()，flatMap()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

    let arr = [1,2,[3,4,5]]
    let a=arr.flat()
    console.log(a) // [1,2,3,4,5]

---

    let arr = [1, 2, [3, [4, 5]]]
    let a=arr.flat(2)
    console.log(a) // [1,2,3,4,5]

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1,上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。

---

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

    let arr = [1, 2, [3, [4, 5,6,[7,8,[9]]]]]
    let a=arr.flat(Infinity)
    console.log(a) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

---

flatMap()方法对原数组的每个成员执行一个函数（相当于执行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]

10.数组的空位

数组的空位指，数组的某一个位置没有任何值。
注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。

• ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。
  • forEach(), filter(), reduce(), every() 和some()都会跳过空位。
  • map()会跳过空位，但会保留这个值
  • join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

    let ary =[,1,2]
    ary.forEach(item => {
        console.log(item) // 1 2
    });
    
    // filter方法
    ['a',,'b'].filter(x => true) // ['a','b']

    // every方法
    [,'a'].every(x => x==='a') // true
    
    // reduce方法
    [1,,2].reduce((x,y) => x+y) // 3
    
    // some方法
    [,'a'].some(x => x !== 'a') // false
    
    // map方法
    [,'a'].map(x => 1) // [,1]
    
    // join方法
    [,'a',undefined,null].join('#') // "#a##"
    
    // toString方法
    [,'a',undefined,null].toString() // ",a,,"

• ES6 则是明确将空位转为undefined。

    Array.from(['a',,'b'])
    // [ "a", undefined, "b" ]
    
    [...['a',,'b']]
    // [ "a", undefined, "b" ]
    
    [,'a','b',,].copyWithin(2,0) // [,"a",,"a"]
    
    new Array(3).fill('a') // ["a","a","a"]
    
    // entries()
    [...[,'a'].entries()] // [[0,undefined], [1,"a"]]
    
    // keys()
    [...[,'a'].keys()] // [0,1]
    
    // values()
    [...[,'a'].values()] // [undefined,"a"]
    
    // find()
    [,'a'].find(x => true) // undefined
    
    // findIndex()
    [,'a'].findIndex(x => true) // 0

注意：由于空位的处理规则非常不统一，所以建议避免出现空位。