【笔记】ES6 数组的扩展

ES6对数组也进行了一些扩展，不过很多东西我觉得平时不太常用，就粗略的了解一下。

• 扩展运算符...

// 简单示例
console.log(...[1, 2, 3]) // 1 2 3
function sum(a, b) {
  return a + b
}
sum(...[1, 2]) // 3

• 扩展运算符的应用

// 复制数组
const arr1 = [1, 2]
const arr2 = [...arr1]

// 合并数组
const arr3 = [...arr1, ...arr2]

// 与解构赋值配合使用
const [a, ...b] = [1, 2, 3]
console.log(a) // 1
console.log(b) // [2, 3]
// 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
const [x, ...y, z] = [1, 2, 3] // 报错

// 字符串转数组
const strArr = [...'郭德纲']
console.log(strArr) // ['郭', '德', '纲']

• Array.from()
  将类数组对象或可迭代对象转化为数组。

// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])) // [1, 2]
// 如果数组包含空位
console.log(Array.from([1, , 2])) // [1, undefined, 2]

// 将类似数组的对象转为数组
const arrLike = {
  '0': 1,
  '1': 2,
  length: 2
}
console.log(Array.from(arrLike)) // [1, 2]

// 该方法还可以接收第二个参数
// 作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
console.log(Array.from(arrLike, item => item * 2)) // [2, 4]
console.log(Array.from({length: 2}, () => 'a')) // ['a', 'a']

• Array.of()
  将一组值转换为数组。

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

• 实例方法find()和findIndex()
  – 数组实例的find方法，用于找出第一个符合条件的数组成员
  – 数组实例的findIndex方法，返回第一个符合条件的数组成员的位置

const target = ['a', 'b', 'c'].find(item => item === 'b')
console.log(target) // b
const targetIndex = ['a', 'b', 'c'].findIndex(item => item === 'b')
console.log(targetIndex) // 1

// find和findIndex的回调支持三个参数，分别是：当前项、索引、原数组
['a', 'b', 'c'].find((item, index, arr) => {
  if (item === 'b') {
    console.log(item, index, arr)
  }
}) // b 1 ['a', 'b', 'c']

// find和findIndex支持传入第二个参数，用来绑定回调函数的this对象
function func(item) {
  return item > this.age
}
const person = { age: 18 }
console.log([16, 17, 18, 19, 20].find(func, person)) // 19

• 实例方法fill()
  使用给定值填充一个数组。可接收三个参数，第一个表示给定值，第二个表示替换起始位置，第三个表示替换结束位置

console.log(['a', 'b', 'c'].fill(1)) // [1, 1, 1]
console.log(new Array(3).fill(1)) // [1, 1, 1]
console.log(['a', 'b', 'c', 'd'].fill(7, 1, 3)) // ['a', 7, 7, 'd']

// 注意，如果填充的是对象或数组，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象
const arr1 = new Array(3).fill({ name: '郭德纲' })
arr1[0].name = '岳云鹏'
console.log(JSON.stringify(arr1)) // [{"name":"岳云鹏"},{"name":"岳云鹏"},{"name":"岳云鹏"}]
const arr2 = new Array(3).fill([])
arr2[0].push(1)
console.log(JSON.stringify(arr2)) // [[1],[1],[1]]

• 实例方法entries()，keys()和values()
  – keys返回一个键名的遍历器对象
  – values返回一个键值的遍历器对象
  – entries返回一个键值对的遍历器对象

const arr = ['a', 'b', 'c']
// 键名的遍历
for(let key of arr.keys()) {
  console.log(key)
}
// 0
// 1
// 2
// 键值的遍历
for(let value of arr.values()) {
  console.log(value)
}
// a
// b
// c
// 键值对的遍历
for (let entry of arr.entries()) {
  console.log(entry)
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

• 实例方法includes()
  – 判断数组上是否包含给定值。
  – 第一个参数为需要判断的值。
  – 第二个参数为搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

console.log([1, 2, 3].includes(2)) // true
console.log([1, 2, 3].includes(4)) // false
console.log([1, 2, NaN].includes(NaN)) // true
console.log([1, 2, 3].includes(1, 1)) // false

• 实例方法flat()和flatMap()
  – 将多维数组拉平

// 普通用法
console.log([1, 2, [3, 4]].flat()) // [1, 2, 3, 4]
console.log([1, 2, [3, [4, 5]]].flat()) // [1, 2, 3, [4, 5]]

// 传入第一个参数，表示拉平的深度
console.log([1, 2, [3, [4, 5]]].flat(1)) // [1, 2, 3, [4, 5]]
console.log([1, 2, [3, [4, 5]]].flat(2)) // [1, 2, 3, 4, 5]
// 如果不论几层都要拆成一维的，可以传入Infinity
console.log([1, 2, [3, [4, [5, 6]]]].flat(Infinity)) // [1, 2, 3, 4, 5, 6]

// flatMap()方法对原数组的每个成员执行一个函数
// 然后对返回值组成的数组执行flat()方法
// 该方法返回一个新数组，不改变原数组
console.log([1, 2, 3].flatMap(item => [item, item * 2])) // [1, 2, 2, 4, 3, 6]
// 相当于 [[1, 2], [2, 4], [3, 6]].flat()

• 实例方法at()
  – at方法接受一个整数作为参数，返回对应位置的成员，支持负索引
  – 如果参数位置超出了数组范围，at返回undefined

const arr = [1, 2, 3, 4, 5]
console.log(arr.at(1)) // 2
console.log(arr.at(-1)) // 5
console.log(arr.at(6)) // undefined
console.log(arr.at(-6)) // undefined

• 数组的空位

console.log([,,,].length) // 3

// 注意，空位不是undefined，某一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点
// 第一个数组的 0 号位置是有值的，第二个数组的 0 号位置没有值
console.log(0 in [undefined, undefined, undefined]) // true
console.log(0 in [,,,]) // false

// ES6会将空位转为undefined
console.log([1,,2]) // [1, undefined, 2]