你应该知道的 10 个数组方法👀

基础知识🕺

那么数组是什么？🤔

ar·ray /əˈrā/ 名词 1. 有序的系列或排列。

在计算机科学中，数组数据结构（或简称数组）是一种由元素集合组成的数据结构，每个元素至少由一个数组索引或键标识。数组的存储方式使得每个元素的位置可以通过数学公式根据其索引元组计算出来。

在 JavaScript 中，数组本质上是一种包含值列表的数据结构。这些值可以是字符串、整数，甚至是对象。数组没有固定的类型或长度限制。

数组使用方括号引用：元素的[]索引仅仅表示元素在数组中的“位置”。元素的索引从 0 开始计算，而不是从 1 开始。例如，。newArray = [1, 2, 3, 4];在本例中， 1 位于第 0 位。

您可以使用带括号的索引来检索项目[]。例如： newArray[0]这将返回1。 newArray[2]将返回3。
另一个示例是let cats = ["Sebastian", "Emmy", "Mr.Whiskers"]; cats[1]将返回"Emmy"

如果你掌握了这些基本概念，就可以开始学习数组方法了。你很快就会发现，有很多不同的方法可以让你的逻辑更加精简高效。这里有 10 个常用的数组方法，值得你掌握。🆒

方法🥳

1）.push() | 将元素添加到数组末尾

       let names = ["Nick", "Chris", "Ben"];
       names.push("Rebecca"); 
       console.log(names);
       // names = ["Nick", "Chris", "Ben", "Rebecca];

2).pop | 删除数组中的最后一个元素

       let cities = ["New York", "Los Angeles", "Atlanta"]; 
       cities.pop(); 
       console.log(cities); 
       // cities = ["New York", "Los Angeles"];

3).shift | 删除数组的第一个元素

       let ages = [30, 26, 24, 20];
       ages.shift(); 
       console.log(ages);
       // ages = [26, 24, 20]

4).unshift | 将元素添加到数组的开头

       let ages = [30, 26, 24, 20];
       ages.unshift(60); 
       console.log(ages);
       // ages = [60, 30, 26, 24, 20];

5) .splice | 在给定索引处添加、删除或替换元素。第一个参数是索引，第二个参数是要删除的元素数，第三个参数是要替换或添加的值。

       // to remove elements
       let animals = ["cat", "dog", "shark", "horse", "alligator"]; 
       animals.splice(1, 2); 
       // remove 2 elements at index 1, including index 1
       // so what's being "spliced" is "dog" and "shark"
       console.log(animals);
       // animals  = ["cat", "horse", "alligator"];

       // to add elements
       let animals = ["cat", "dog", "shark", "horse", "alligator"]; 
       animals.splice(2, 0, "zebra"); 
       // at index 2, splice (or remove) 0 elements, add "zebra" 
       animals  = ["cat", "dog", "zebra", "shark", "horse", "alligator"];

       // to replace elements
       let animals = ["cat", "dog", "shark", "horse", "alligator"]; 
       animals.splice(2, 1, "zebra"); 
       // an index 2, replace 1 element ("shark") with "zebra"
       // at index 2, splice (or remove) 0 elements, add "zebra" 
       animals  = ["cat", "dog", "zebra", "horse", "alligator"];

6) .slice | 返回数组的浅拷贝。它可以接受一个或两个参数，分别表示切片的“起始”和“结束”。请注意，必须包含“起始”参数，而不应包含“结束”参数。

       let colors = ["Blue", "Red", "Orange", "Purple", "Pink"];
       let lessColors = colors.slice(1, 3);
       console.log(lessColors); 
       // colors = ["Red", "Orange"];

👉如果只包含一个参数，它将保留“开始”值之后的每个元素。

       let colors = ["Blue", "Red", "Orange", "Purple", "Pink"];
       let lessColors = colors.slice(2); 
       // colors[2] = "Orange" which now becomes the 1st element
       console.log(lessColors);
       // lessColors = ["Orange", "Purple", "Pink];

❗️ .splice 和 .slice 可能比较难记。你可以把 splice 想象成一个非常动态的方法，它可以移除、替换或添加元素，并修改现有数组……而 .slice 主要作用是移除值并创建一个新数组。

7）.forEach | 对数组中的每个元素执行一个函数

       let miles = [1, 3, 5, 10];
       let moreMiles = [];
       miles.forEach(element => moreMiles.push(element + 10))
       console.log(moreMiles);
       // [11, 13, 15, 20];

8).map | 创建一个新数组，并对数组中的每个元素执行提供的函数

       let population = [200, 600, 170, 100];
       let doublePopulation = population.map(element => element * 2);
       // we are assigning the result of mapping to doublePopulation
       // we would not be able to do this with the .forEach method
       // because it returns undefined
       console.log(doublePopulation);       
       // [400, 1200, 340, 200]

❗️ 注意 .forEach 和 .map 的区别在于，当你调用 .forEach 方法时，它返回 undefined 而 .map 返回一个新数组！

9) .reduce | 将数组合并（或归约）为一个值。学习 reduce 方法的一个简单方法是将数组中的所有元素相加。该方法接受两个参数：累加器和当前值。

       let ticketPrices = [99.54, 56.43, 122.94];
       let totalCostOfTickets = ticketPrices.reduce((total, amount) => total + amount)
       // the accumulator is total; it's holding the new values as you add
      // the amount is the next ticket price. 
       totalCostOfTickets = 278.91

10） .filter | 使用传递提供的函数的元素创建一个新数组。

       let names = ["Rebecca", "Chris", "Ben", "Rachel"];
       names = names.filter(name => name[0] === "R") 
       // this is looping through each name and checking if 
       // the first index of the string (aka first letter) is "R".
       console.log(names):
       // names = ["Rebecca", "Rachel"];

       let ages = [16, 21, 26, 14];
       ages = ages.filter(age => age >= 21) 
       // this is looping through each age and checking if  
       // the value is greater than or equal to 21.
       console.log(ages):
       // ages = [21, 26];

还有很多其他方法，但这些方法绝对值得收藏！🙌 感谢您的阅读，如果您对本文有任何反馈或疑问，欢迎随时联系我们！

文章来源：https://dev.to/rebeccauranga/10-array-methods-you-should-know-nn5

你应该知道的 10 个数组方法 👀 基础知识 🕺

你应该知道的 10 个数组方法👀

基础知识🕺

基础知识🕺

方法🥳