ES6中引入了一些新的数组方法,例如:Array.of()
,Array.from()
等。
ES6中引入的数组方法列表如下:
编号 | 方法 | 描述 | 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() |
返回满足给定条件的给定数组的第一个元素的索引。 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 |
此方法的一般是用于从类似数组的对象中启用新的数组创建。 它将类似数组的值和可迭代的值(例如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' ]
在ES5中,当在数组构造函数中传递单个数值时,它将创建该大小的数组。 Array.of()
是一种创建数组的新方法,可以修复ES5的这种行为。通过使用此方法,如果仅使用单个数字值创建数组,则它将仅使用该值创建数组,而不是创建该大小的数组。
示例
let name = Array.of(42) console.log(name) console.log(name.length)
执行上面示例代码,得到一些以下结果:
[ 42 ] 1
这是一种有趣的方法,已添加到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 ]
这是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()
方法与ES5filter()
方法不相似,因为filter()
方法始终返回匹配数组(返回多个匹配项),但是find()
方法始终返回实际语句。
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
此方法返回一个数组迭代器对象,该对象可用于遍历数组的键和值。
条目将返回一个数组数组,其中每个子数组都是[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.entries()
方法。 顾名思义,它用于返回数组迭代器对象以及数组的键。
语法
array.keys()
示例代码:
var colours = ["Red", "Yellow", "Blue", "Black"]; var show = colours.keys(); console.log(...show);
执行上面示例代码得到以下结果:
0 1 2 3
此方法类似于Array.keys()
和Array.entries()
,但它提供了每个键的值。
语法
array.values()
示例代码:
var colours = ["Red", "Yellow", "Blue", "Black"]; var show = colours.values(); console.log(...show);
执行上面示例代码,得到以下结果:
Red Yellow Blue Black
此方法用静态值填充指定的数组元素。 该值可用于填充数组的一部分或填充整个数组。 它修改了原始数组。可以指定填充的开始和结束位置。 如果未指定,则将填充所有元素。
语法
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