ES6 数组方法
ES6 数组方法
ES6 中引入了一些新的数组方法，例如如 Array.of()、Array.from()、 等等。
ES6 中引入的数组方法如下表。
| 方法 |
说明 |
JavaScript 版本 |
| Array.from() |
它将类数组值和可迭代值转换为数组。 |
ECMAScript 6 |
| Array.of() |
它从可变数量的参数而不是参数数量或参数类型创建一个实例。 |
ECMAScript 6 |
| Array.prototype.copyWithin() |
它将数组的一部分复制到同一数组中的不同位置。 |
ECMAScript 6 |
| Array.prototype.find() |
它根据传递给此方法的特定条件从数组中找到一个值。 |
ECMAScript 6 |
| Array.prototype.findIndex() |
Array.prototype.findIndex() 返回满足给定条件的给定数组的第一个元素的索引。 |
ECMAScript 6 |
| Array.prototype.entries() |
它返回一个数组迭代器对象，可用于遍历数组的键和值。 |
ECMAScript 6 |
| Array.prototype.keys() |
它返回一个数组迭代器对象以及数组的键。 |
ECMAScript 6 |
| Array.prototype.values() |
它提供了每个键的值。 |
ECMAScript 6 |
| Array.prototype.fill() |
用静态值填充指定的数组元素 |
ECMAScript 6 |
让我们了解这些新的数组方法。
Array.from()
这个方法的一般功能是从类似数组的对象启用新数组创建。它将类似数组的值和可迭代值(例如 set 和 map)转换为数组。
语法
Array.from(object, mapFunction, thisValue)
让我们了解一下这个函数的参数值。
对象: 这个参数值总是需要的。它是要转换为数组的对象。
mapFunction: 它是可选的。它是一个映射函数，用于调用数组的每一项。
thisValue: 它也是可选的。这是一个在执行 mapFunction 时用作 this 的值。
示例
let name = Array.from('lidihuo')
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)
输出
Array.prototype.copyWithin()
这是一个有趣的方法，被添加到 ES6 中的数组方法库中。此方法将数组的一部分复制到同一数组中的不同位置。
返回修改后的数组，长度没有任何修改。
注意: 此方法不会向数组添加更多项，而是仅覆盖原始数组的元素。
语法
array.copyWithin(target, start, end)
让我们了解这个方法的参数。
目标: 它总是必需的。复制元素的索引位置。
start: 可选参数。它指的是开始复制元素的索引位置。它的默认值是0。如果这个参数的值为负，那么start将从末尾开始计数。
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)
来了解一下这个方法的参数。
回调: 它代表了执行每个元素的函数。
currentValue: It 是必需的参数。它是当前元素的值。
index: 它是一个可选参数。它是当前元素的数组索引。
arr: 它也是一个可选参数。它是 find() 操作的数组。
thisValue: 它是可选的。这是一个在使用回调时用作this 的值。
示例
var arr=[5,22,19,25,34];
var result=arr.find(x=>x>20);
console.log(result);
输出
注意: 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)
输出
Array.prototype.entries()
此方法返回一个数组迭代器对象，可用于遍历数组的键和值。
Entries 将返回一个数组数组，其中每个子数组都是一个 [index, value] 的数组。
语法
示例
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() 方法类似。顾名思义，它用于返回一个数组迭代器对象以及数组的键。
语法
示例
var colours = ["Red", "Yellow", "Blue", "Black"];
var show = colours.keys();
console.log(...show);
输出
Array.prototype.values()
这个方法类似于Array.keys()和Array .entries() 除了它提供每个键的值。
语法
示例
var colours = ["Red", "Yellow", "Blue", "Black"];
var show = colours.values();
console.log(...show);
输出
Array.prototype.fill()
此方法用静态值填充指定的数组元素。该值可用于填充数组的一部分或填充整个数组。
可以指定填充的开始和结束位置。如果未指定，则将填充所有元素。
语法
array.fill(value, start, end)
参数值
值: 填充数组的静态值。它始终是必需的。
start: 它是开始填充数组的索引。可选，默认值为0。
end: 停止填充数组的索引。它也是可选的，它的默认值是数组的长度。
示例
var colours = ["Red", "Yellow", "Blue", "Black"];
var show = colours.fill("Green",2,4);
console.log(...show);
输出
JavaScript 数组方法
| 方法 |
说明 |
JavaScript 版本 |
| concat() |
此方法返回一个包含两个或多个合并数组的新数组对象。 |
ECMAScript 版本 1 |
| join() |
该方法将数组元素作为字符串连接起来。 |
| pop() |
该方法用于移除并返回数组的最后一个元素。 |
| push() |
push() 在数组末尾添加一个或多个元素。 |
| reverse() |
此方法反转给定数组的元素。 |
| shift() |
该方法用于移除并返回数组的第一个元素。 |
| slice() |
此方法返回一个新数组，其中包含给定数组部分的副本。 |
| sort() |
此方法按排序顺序返回给定数组的元素。 |
| toString() |
此方法返回所有数组元素以逗号分隔的字符串。 |
| unshift() |
unshift() 在给定数组的开头添加一个或多个元素。 |
| 11. |
splice() |
此方法向/从给定数组添加/删除元素。 |
| every() |
该方法用于判断数组的所有元素是否满足提供的函数条件。 |
ECMAScript 版本 5 |
| filter() |
此方法返回新数组，其中包含通过提供的函数条件的元素。 |
| forEach() |
此方法为数组的每个元素调用一次提供的函数。 |
| isArray() |
这个方法判断一个对象是否是一个数组。如果对象是数组则返回真，否则返回假。 |
| indexOf() |
它搜索给定数组中的指定元素并返回第一个匹配项的索引。 |
| lastIndexOf() |
它搜索给定数组中的指定元素并返回最后一个匹配项的索引。 |
| map() |
它为每个数组元素调用指定的函数并返回新数组 |
| reduce() |
此方法将数组缩减为单个值。 |
| some() |
此方法返回一个布尔值。如果数组元素通过测试，则返回 true，否则返回 false。 |
ECMAScript 版本 3 |
