ECMAScript/ES6数组方法

ES6中引入了一些新的数组方法，例如：Array.of()，Array.from()等。

ES6中引入的数组方法列表如下：

1.Array.from()方法

此方法的一般是用于从类似数组的对象中启用新的数组创建。 它将类似数组的值和可迭代的值(例如set和map)转换为数组。

语法

Array.from(object, mapFunction, thisValue)

此函数的参数值说明如下：

• object: 始终需要此参数值。 它是要转换为数组的对象。
• mapFunction: 可选的。 这是一个映射函数，用于调用数组的每个项目。
• thisValue: 可选的。在执行 mapFunction时，使用类似于this的功能。

示例代码：

let name = Array.from('Xntutor')  

console.log(name)

执行上面示例代码，得到以下结果：

PS D:\es6> node test.js
[
  'X', 'n', 't',
  'u', 't', 'o',
  'r'
]

2.Array.of()方法

在ES5中，当在数组构造函数中传递单个数值时，它将创建该大小的数组。 Array.of()是一种创建数组的新方法，可以修复ES5的这种行为。通过使用此方法，如果仅使用单个数字值创建数组，则它将仅使用该值创建数组，而不是创建该大小的数组。

示例

let name = Array.of(42)  

console.log(name)  
console.log(name.length)

执行上面示例代码，得到一些以下结果：

[ 42 ]
1

3.Array.prototype.copyWithin()方法

这是一种有趣的方法，已添加到ES6中的数组方法库中。此方法将数组的一部分复制到同一数组中的其他位置。它返回修改后的数组，其长度没有任何修改。

注意：此方法不会向数组中添加更多项，而只会覆盖原始数组的元素。

示例：

array.copyWithin(target, start, end);

此方法的参数说明如下：

• target：始终是必需的。它是复制元素的索引位置。
• start：是可选参数。它指的是开始复制元素的索引位置。 它的默认值为0。如果此参数的值为负，则将从头算起。
• end：也是可选参数。它指的是停止复制元素的索引位置。 它的默认值是数组的长度。

示例

const num = [1,2,3,4,5,6,7,8,9,10];  
const num1 = [1,2,3,4,5,6,7,8,9,10];  
const num2 = [1,2,3,4,5,6,7,8,9,10];  
console.log(num.copyWithin(1,3,5));  
console.log(num1.copyWithin(1,3)); // 省略参数 end  
console.log(num2.copyWithin(1)); // 省略参数 start 和 end

执行上面示例代码，得到以下结果：

[
  1, 4, 5, 4,  5,
  6, 7, 8, 9, 10
]
[
  1, 4,  5, 6,  7,
  8, 9, 10, 9, 10
]
[
  1, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

4.Array.prototype.find()方法

这是ES6的另一个新功能。 它根据传递给此方法的特定条件从数组中找出指定值。 它返回满足给定条件的第一个元素值。

语法

array.find(callback(currentValue, index, arr),thisValue)

方法的参数说明如下：

• callback: 它代表执行每个元素的函数。
• currentValue: 必需的参数，它是当前元素的值。
• index: 可选参数，它是当前元素的数组索引。
• arr: 可选参数，它是find()操作的数组。
• thisValue: 可选参数，它是使用回调时使用的值。

示例代码

var arr=[5,22,19,25,34];    
var result=arr.find(x=>x>20);    
console.log(result);

执行上面示例代码，得到以下结果：

22

注意：ES6 find()方法与ES5 filter()方法不相似，因为filter()方法始终返回匹配数组(返回多个匹配项)，但是find()方法始终返回实际语句。

5.Array.prototype.findIndex()方法

Array.prototype.findIndex()方法返回满足给定条件的给定数组的第一个元素的索引。 如果没有元素满足条件，则返回-1。

语法

array.findIndex(callback(value,index,arr),thisArg)

示例代码：

var arr=[5,22,19,25,34];    
var result=arr.findIndex(x=>x>20);    
console.log(result)

执行上面示例代码，得到以下结果：

1

6.Array.prototype.entries()方法

此方法返回一个数组迭代器对象，该对象可用于遍历数组的键和值。

条目将返回一个数组数组，其中每个子数组都是[index, value]数组。

语法

array.entries()

示例

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.entries();  

for (i of show) {  
  console.log(i);  
}

执行上面示例代码，得到以下结果：

[ 0, 'Red' ]
[ 1, 'Yellow' ]
[ 2, 'Blue' ]
[ 3, 'Black' ]

在上面的示例中，也可以使用传播运算符代替for...of循环，如下示例得到相同的结果。

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.entries();  
console.log(...show);

执行上面示例代码，得到以下结果：

[ 0, 'Red' ] [ 1, 'Yellow' ] [ 2, 'Blue' ] [ 3, 'Black' ]

7.Array.prototype.keys()方法

此方法的工作方式类似于Array.entries()方法。 顾名思义，它用于返回数组迭代器对象以及数组的键。

语法

array.keys()

示例代码：

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.keys();  
console.log(...show);

执行上面示例代码得到以下结果：

0 1 2 3

8.Array.prototype.values()方法

此方法类似于Array.keys()和Array.entries()，但它提供了每个键的值。

语法

array.values()

示例代码：

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.values();  
console.log(...show);

执行上面示例代码，得到以下结果：

Red Yellow Blue Black

9.Array.prototype.fill()方法

此方法用静态值填充指定的数组元素。 该值可用于填充数组的一部分或填充整个数组。 它修改了原始数组。可以指定填充的开始和结束位置。 如果未指定，则将填充所有元素。

语法

array.fill(value, start, end)

以下是上面参数的说明：

• value: 填充数组是一个静态值，必需项。
• start: 它是开始填充数组的索引。可选项，其默认值为0。
• end: 它是停止填充数组的索引。 可选项，其默认值是数组的长度。

示例代码

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.fill("Green",2,4);  
console.log(...show);

执行上面示例代码，得到以下结果：

Red Yellow Green Green