ES6标准入门 - 6. 数组的扩展

时间：2021-02-20 12:09:10 收藏：0 阅读：0

扩展运算符 spread

...
如同rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。
该运算符主要用于函数调用
如果扩展运算符后面是一个空数组则不产生任何效果
由于扩展运算符可以展开数组，所以不再需要使用apply方法将数组转为函数的参数。

#例子1
# ES5 的写法
function f (x, y, z) {
  ...
}
let args = [0, 1, 2]
f.apply(null, args)

# ES6 的写法
f(...args)

# 例子2
# ES5 的写法
let arr1 = [0, 1, 2]
let arr2 = [3, 4, 5]
Array.prototype.push.apply(arr1, arr2)

# ES6 的写法
arr1.push(...arr2)

扩展运算符的应用
- 合并数组
  - arr1.concat(arr1, arr2) -> [...arr1, ...arr2, ...arr3]
- 与解构赋值结合
  - const [first, ...rest] = [1, 2, 3, 4, 5]
  - 如果将扩展运算符用于数组赋值，则只能将其放在参数的最后一位。
- 函数的返回值
  - js的函数只能返回一个值如果需要返回多个值，只能返回数组或者对象。扩展运算符提供了解决这个问题的方法。
  - 通过扩展运算符可以直接将数据传入构造函数中
- 字符串
  - 使用扩展运算符可以将字符串转为真正的数组
  - ` [...‘hello‘] -> [ ‘h‘, ‘e‘, ‘l‘, ‘l‘, ‘o‘]
  - 能够正确识别32位的Unicode字符。
- 实现了iterator接口的对象
  - 任何iterator接口的对象都可以用扩展运算符转为真正的数组。
  - 扩展运算符内部调用的是数据结构的iterator接口，因此只要具有iterator接口的对象，都可以使用扩展运算符，如Map结构。
  - Generator函数运行后会返回一个遍历器对象，因此也可以使用扩展运算符。
  - 对于没有iterator接口的对象，使用扩展运算符将会报错。

Array.from

Array.from方法用于将两类对象转为真正的数组：类似数组的对象(array-like object)和可遍历(iterable)对象(包括新增的数据结构Set和Map)

# 类数组对象本质特征只有一点： 即必须有length属性
let arrayLike = {
  ‘0‘ : ‘a‘,
  ‘1‘ : ‘b‘,
  ‘2‘ : ‘c‘,
  length : 3
}
# ES5
let arr1 = [].slice.call(arrayLike)
# ES6
let arr2 = Array.from(arrayLike)

实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将其转换为真正的数组。
如果参数是一个真正的数组，则Array.from方法会返回一个一模一样的数组。
对于还没有部署该方法的浏览器可以使用Array.prototype.slice()方法替代。
Array.from还可以接收第二个参数，作用类似于数组的map方法。即对每个元素进行处理，将处理后的值放入数组。

Array.from(arrayLike, x => x * x)
# 等同于
Array.from(arrayLike).map(x => x * x)

还可以传入Array.from第三个参数，用来绑定this。
Array.from可以将各种值转换为真正的数组，并且提供map功能。
Array.from可以利用第一个参数指定第二个参数运行的次数
- ` Array.from({ length : 2 }, () => ‘jack‘) //[ ‘jack‘, ‘jack‘]
Array.from的另一个应用是将字符串转换为数组，然后返回字符串的长度，因为它能正确处理各种Unicode字符，可以避免js将大于\uFFFF的Unicode字符算作两个字符的bug。

Array.of()

Array.of方法用于将一组值转换为数组。
这个方法主要的目的是弥补数组构造函数Array()的不足 -> 因为参数个数的不同导致的行为的差异。

Array.of( 3 )   // [3]
Array(3)   // [, , ,]

Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载，它的行为非常统一。
Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。
Array.of方法可以用下面的代码模拟实现

function ArrayOf () {
  return [].slice.call(arguments)
}

数组实例的方法

copyWithin()
- 该方法会在当前数组内部将指定位置的成员复制到其他位置(会覆盖原有成员)，然后返回当前数组。即会修改当前的数组。

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

target :从该位置开始替换数据。
start : 从该位置开始读取疏，默认为0。如果为负值，表示倒数(相加的结果)。
end : 到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
这三个参数都应该是数值，如果不是，会自动转为数值。

find()和findIndex()
- find
  - 用于找出第一个符合条件的数组成员，
  - 参数：回调函数。
    - 该方法的回调参数可以接收三个参数：依次为当前的值，当前的位置，和原数组。
  - 所有数组成员依次执行该回调函数，直到找到第一个为true的成员，然后返回该成员。
  - 如果没有符合的成员即返回undefined。
- findIndex
  - 返回第一个符合条件的数组成员的位置。
  - 如果所有数组成员都不符合，则返回-1。
- 这两个参数都可接收第二个参数，用来绑定回调函数的this值。
- 这两个方法都可以发现NaN，弥补了数组indexOf方法的不足。
  - indexOf方法无法识别数组的NaNcy成员，但是findIndex方法可以借助Object.is实现。
  - [NaN].findIndex(y => Object.is(NaN, y)
fill()
- 该方法使用给定值填充一个数组。

[‘a‘, ‘b‘, ‘c‘].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

fill方法用于空数组的初始化时非常方便。数组中已有的元素会被全部抹去。
fill方法还可接收第二个和第三个参数，用于指定填充的起始位置和结束位置。

entries() / keys() / values()
- 以上三个方法用于遍历数组。并且都返回一个遍历器对象，可用for...of循环遍历。
- keys()是对键名的遍历。
- values()是对键值的遍历。
- entries()是对键值对的遍历。

for(let index of [‘a‘, ‘b‘].keys()) { 
  console.log(index)
}
# 如果不使用for...of循环，可以手动调用遍历器对象的next方法进行遍历。
let letter = [‘a‘, ‘b‘, ‘c‘]
let entries = letter.entries()
console.log(entries.next().value) //[0. ‘a‘]
console.log(entries.next().value) //[0. ‘b‘]
console.log(entries.next().value) //[0. ‘c‘]

includes()
- 该方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。
- [1, 2, 3].includes(2) // true
- 该方法的第二个参数表示搜索的起始位置。
- 如果第二个参数为负数，则表示倒数的位置。如果该负数的绝对值大于数组长度，则会重置为0开始。
- 没有该方法之前，我们通常使用数组的indexOf方法检查是否包含某个值。
- 但是indexOf方法有两个缺点
  - 不够语义化
    - 其含义是找到参数值的第一个出现的位置，所以要比较是否不等于-1，表达起来不够直观。
  - 内部使用严格相等运算符回导致对NaN的误判。

数组的空位

空位不是undefined，一个位置的值等于undefined依然是有值的。空位是没有任何值的，in运算符可以说明这一点。
ES5对空位的处理很不一致，大多数情况下会忽略空位。
- forEach()、filter()、every()、some()都会跳过空位。
- map会跳过空位，但会保留这个值。
- join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。
- Array.form()、 ...扩展运算符会将数组的空位转为undefined，即该方法不会忽略这个空位。
- copyWithin()会连着空位一起复制。
- fill()会将空位视为正常的数组位置。
- for...of循环也会遍历空位。
由于空位的处理规则非常不统一，所以建议避免出现空位。

笔记内容整理来自阮一峰老师的《ES6标准入门》