📌  相关文章
📜  ES6数组方法

📅  最后修改于: 2021-01-01 03:59:46             🧑  作者: Mango

ES6数组方法

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

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

S.no. Methods Description JavaScript Version
1. Array.from() It converts array-like values and iterable values into arrays. ECMAScript 6
2. Array.of() It creates an instance from a variable number of arguments instead of the number of arguments or type of arguments. ECMAScript 6
3. Array.prototype.copyWithin() It copies the part of an array to a different location within the same array. ECMAScript 6
4. Array.prototype.find() It finds a value from an array, based on the specific criteria that are passed to this method. ECMAScript 6
5. Array.prototype.findIndex() The Array.prototype.findIndex() returns the index of the first element of the given array that satisfies the given condition. ECMAScript 6
6. Array.prototype.entries() It returns an array iterator object, which can be used to loop through keys and values of arrays. ECMAScript 6
7. Array.prototype.keys() It returns an array iterator object along with the keys of the array. ECMAScript 6
8. Array.prototype.values() it provides the value of each key. ECMAScript 6
9. Array.prototype.fill() It fills the specified array elements with a static value ECMAScript 6

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

Array.from()

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

句法

Array.from(object, mapFunction, thisValue)

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

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

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

thisValue：这也是可选的。在执行mapFunction时用作此值。

例

let name = Array.from('javaTpoint')

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()

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

句法

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)

参数值

值：它是填充数组的静态值。始终是必需的。

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. Methods Description JavaScript Version
1. concat() This method returns a new array object which contains two or more merged arrays. ECMAScript Version 1
2. join() This method joins the array elements as a string.
3. pop() This method is used to remove and return the last element of an array.
4. push() The push() adds one or more elements at the end of an array.
5. reverse() This method reverses the elements of the given array.
6. shift() This method is used to remove and return the first element of an array.
7. slice() This method returns a new array that contains a copy of the part of the given array.
8. sort() This method returns the element of the given array in sorted order.
9. toString() This method returns the strings with all array elements separated by commas.
10. unshift() The unshift() adds one or more elements at the starting of the given array.
11. splice() This method adds/removes the elements to/from the given array.
12. every() This method is used to determine whether all the elements of an array satisfy the provided function conditions. ECMAScript version 5
13. filter() This method returns the new array, which contains the elements that pass the provided function conditions.
14. forEach() This method invokes the provided function once for each element of an array.
15. isArray() This method determines whether an object is an array or not. It returns true if the object is an array and returns false if not.
16. indexOf() It searches the specified element in the given array and returns the index of the first match.
17. lastIndexOf() It searches the specified element in the given array and returns the index of the last match.
18. map() It calls the specified function for every array element and returns the new array
19. reduce() This method reduces the array to a single value.
20. some() This method returns a Boolean value. Returns true if an array element passes the test else it returns false. ECMAScript version 3