ES6数组方法介绍和示例 _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中引入的数组方法列表如下。

S.no.	方法	描述	JavaScript版本
1.	Array.from()	它将类似数组的值和可迭代的值转换为数组。	ECMAScript 6
2.	Array.of()	它从可变数量的参数而不是参数数量或参数类型创建实例。	ECMAScript 6
3.	Array.prototype.copyWithin()	它将数组的一部分复制到同一数组中的其他位置。	ECMAScript 6
4.	Array.prototype.find()	它根据传递给此方法的特定条件从数组中找到一个值。	ECMAScript 6
5.	Array.prototype.findIndex()	Array.prototype.findIndex()返回满足给定条件的给定数组的第一个元素的索引。	ECMAScript 6
6.	Array.prototype.entries()	它返回一个数组迭代器对象, 该对象可用于遍历数组的键和值。	ECMAScript 6
7.	Array.prototype.keys()	它返回一个数组迭代器对象以及该数组的键。	ECMAScript 6
8.	Array.prototype.values()	它提供每个键的值。	ECMAScript 6
9.	Array.prototype.fill()	它用静态值填充指定的数组元素	ECMAScript 6

让我们了解这些新的数组方法。
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()

【ES6数组方法介绍和示例】例子

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数组方法

S.no.	方法	描述	JavaScript版本
1.	concat()	此方法返回一个包含两个或多个合并数组的新数组对象。	ECMAScript版本1
2.	join()	此方法将数组元素作为字符串连接。
3.	pop()	此方法用于删除并返回数组的最后一个元素。
4.	push()	push()在数组的末尾添加一个或多个元素。
5.	reverse()	此方法反转给定数组的元素。
6.	shift()	此方法用于删除并返回数组的第一个元素。
7.	slice()	此方法返回一个新数组, 其中包含给定数组部分的副本。
8.	sort()	此方法以排序顺序返回给定数组的元素。
9.	toString()	此方法返回字符串, 其中所有数组元素都用逗号分隔。
10.	unshift()	unshift()在给定数组的开头添加一个或多个元素。
11.	splice()	此方法向/从给定数组添加/删除元素。
12.	every()	此方法用于确定数组的所有元素是否满足提供的功能条件。	ECMAScript版本5
13.	filter()	此方法返回新数组, 其中包含通过提供的函数条件的元素。
14.	forEach()	此方法为数组的每个元素调用一次提供的函数。
15.	isArray()	此方法确定对象是否为数组。如果对象是数组, 则返回true, 否则返回false。
16.	indexOf()	它在给定数组中搜索指定的元素, 并返回第一个匹配项的索引。
17.	lastIndexOf()	它在给定数组中搜索指定的元素, 并返回最后一个匹配项的索引。
18.	map()	它为每个数组元素调用指定的函数并返回新数组
19.	reduce()	此方法将数组减少为单个值。
20.	some()	此方法返回一个布尔值。如果数组元素通过测试, 则返回true, 否则返回false。	ECMAScript版本3