ES6数组新增

时间:2022-07-23
本文章向大家介绍ES6数组新增，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

一、扩展运算符

将一个数组转为用逗号分隔的参数序列。

示列代码
const arr = [
  ...('9000' > '10000' ? ['a'] : []),
  'b',
];
console.log(arr) // ['a', 'b']

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

二、 Array.from()

该方法可以将类数组对象或可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）转换为数组对象，类数组即：可以通过索引访问元素，并且拥有 length 属性；

示例代码
const obj = {
  0: 'apple',
  1: 'banana',
  2: 'pear',
  length: 3
}
Array.from(obj) // ['apple', 'banner', 'pear']

Array.from('hello') // ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

三、Array.of()

该方法主要弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。Array.of比Array()或new Array()更好，他并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array(3) // [, , ,]
Array(1,2) // [1,2]
Array.of() // []
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
模拟实现
function ArrayOf(){
  return [].slice.call(arguments);
}

四、 数组实例的 copyWithin()

ES6为Array增加了copyWithin函数，用于操作当前数组自身，用来把某些个位置的元素复制并覆盖到其他位置上去。

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

三个参数，从targget处开始替换复制源（替换数量为end-start超出数组长度则不复制），start和end可省略，start省略即从0开始，若不省略从start处开始，若start为负数即从数组末尾开始计数，end省略即数组的长度。

target：目的起始位置。 start：复制源的起始位置，可以省略，可以是负数。 end：复制源的结束位置，可以省略，可以是负数，实际结束位置是end-1。

示例代码：

将arr1的第一项开始替换6-3个替换成arr1第3到6项。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr.copyWithin(1, 3, 6) // [1, 4, 5, 6, 5, 6, 7, 8, 9, 10, 11]

五、数组实例find和findIndex

find方法 二个参数，回调函数callback有三个参数currentValue,index,array。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员（循环终止）。如果没有符合条件的成员，则返回undefined。find方法第二个参数thisArg，可选用于绑定this

示例代码：
let num = 0;
[1, 5, 10, 15].find(curr => {
  num++;
  return curr > 9;
}) // 10
console.log(num) // 3

findIndex方法 和find方法用法一样，不同之处在于，find是返回第一个返回值为true的成员，而findIndex是返回第一个返回值为true的成员的索引。如果所有成员都不符合条件，则返回-1。

let num = 0;
[1, 5, 10, 15].findIndex(curr => {
  num++;
  return curr > 9;
}) // 2
console.log(num) // 3

六、数组实例的fill

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。 arr.fill(value[, start[, end]])

三个参数：

value：为填充值 start：起始索引，默认值为0。 end：终止索引，默认值为 this.length。

示例代码：
['a', 'b', 'c'].fill(7,0,1) // [7, 'b', 'c']

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

七、数组实例的entries()，keys()和values()

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

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

八、数组实例的includes()

用于检测数组中是否包含某个元素

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

九、数组实例的 flat()，flatMap()

Array.prototype.flat()

该方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 Array.flat(depth)，depth可选 指定要提取嵌套数组的结构深度，默认值为 1，若depth值为Infinity即不管有多少层嵌套，都要转成一维数组。(注意：flat() 方法会移除数组中的空项)

示例代码：
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity) // [1, 2, 3]
[1, 2, , 4, 5].flat() // [1, 2, 4, 5]
Array.prototype.flatMap()

该方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。它返回 一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。 2个参数：callback(currentValue, index, array)和thisArg

示例代码：
var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

十、数组的空位

ES5数组处理遇到空位会忽略，而ES6遇到空位会转换为undefined。

示例代码：
ES5：['a',,'b'].filter(x => true) // ['a','b']

ES6：Array.from(['a',,'b']) // [ "a", undefined, "b" ]

随机文章
Javascript知识点必读
最近更新