ES6数组方法介绍和示例

本文概述

• Array.from()
• Array.of()
• Array.prototype.copyWithin()
• Array.prototype.find()
• Array.prototype.findIndex()
• Array.prototype.entries()
• Array.prototype.keys()
• Array.prototype.values()
• Array.prototype.fill()
• JavaScript数组方法

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

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

让我们了解这些新的数组方法。

Array.from()

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

语法

Array.from(object, mapFunction, thisValue)

让我们了解此函数的参数值。

对象：始终需要此参数值。它是要转换为数组的对象。

mapFunction：它是可选的。这是一个映射函数, 用于调用数组的每个项目。

thisValue：这也是可选的。是执行mapFunction时使用的值。

例子

let name = Array.from('srcmini')

console.log(name)

输出如下

[
  'j', 'a', 'v', 'a', 'T', 'p', 'o', 'i', 'n', 't'
]

Array.of()

在ES5中, 当在数组构造函数中传递单个数值时, 它将创建该大小的数组。 Array.of()是一种创建数组的新方法, 可以修复ES5的这种行为。

通过使用此方法, 如果仅使用单个数字值创建数组, 则它将仅使用该值创建数组, 而不是创建该大小的数组。

例子

let name = Array.of(42)

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

输出如下

[ 42 ]
1

Array.prototype.copyWithin()

这是一种有趣的方法, 已添加到ES6中的数组方法库中。此方法将数组的一部分复制到同一数组中的其他位置。

它返回修改后的数组, 其长度没有任何修改。

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

语法

array.copyWithin(target, start, end)

让我们了解此方法的参数。

目标：始终是必需的。它是复制元素的索引位置。

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)); //omitting the parameter end
console.log(num2.copyWithin(1)); //omitting the parameters start and 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
]

Array.prototype.find()

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

语法

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

让我们了解此方法的参数。

callback：代表执行每个元素的函数。

currentValue：I t是必需参数。它是当前元素的值。

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()方法始终返回实际语句。

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

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' ]

Array.prototype.keys()

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

语法

array.keys()

例子

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

输出如下

0 1 2 3

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

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

JavaScript数组方法