10种尽可能简单JavaScript数组方法

As a front end developer, learning JavaScript is scary. And if you are anything like me, you don’t know where to go, where to start. Thousands of resources to choose from which just makes us anxious and not learn anything. Here is something that helped me get better at the arrays. Hope it helps you too.

作为前端开发人员，学习JavaScript令人恐惧。 而且，如果您像我一样，则不知道去哪里，从哪里开始。 成千上万的资源可供选择，这只会使我们感到焦虑，什么也学不到。 这是一些使我在阵列方面变得更好的东西。 希望它对您也有帮助。

If you want to know more about JavaScript functions, you can read this short article.

如果您想进一步了解JavaScript函数，可以阅读这篇简短的文章。

JavaScript array is a special type of variable that lets you store multiple values just like a list.

JavaScript数组是一种特殊的变量类型，可让您像列表一样存储多个值。

Most programming languages have arrays, but the difference in JavaScript arrays is that you can store different data types in an array which is not possible in other programming languages.

大多数编程语言都有数组，但是JavaScript数组的不同之处在于，您可以在数组中存储不同的数据类型，这是其他编程语言无法实现的。

1.推 (1. Push)

The push() method adds a new element at the end of an array and returns new length. To add items in the beginning use unshift. This can be used in adding an item to a to do list.

push()方法在数组的末尾添加一个新元素，并返回新的长度。 要在开始时添加项目，请使用unshift。 这可以用于将项目添加到待办事项列表中。

const myArray = ["react", "angular"];
myArray.push("vue");//["react", "angular", "vue"]

2.切片 (2. Slice)

The slice() method selects a part of an array, and returns the new array. It is very similar to slicing bread. Remember array index starts from 0. So myArray.slice(1,2) means you want to make a cut in the bread loaf at positions 1 and 2. That will give you the middle part of what lies between positions 1 and 2.

slice()方法选择数组的一部分，然后返回新数组。 这与切面包非常相似。 请记住，数组索引从0开始。因此myArray.slice(1,2)意味着您希望在位置1和2处切面包。这将使您位于位置1和2之间的中间部分。

const myAarray = ["react", "angular", "vue"];
myArray.slice(1,2);//["angular"]

3. Tostring (3. Tostring)

The tostring() method converts an array to a string, and returns the result.

tostring()方法将数组转换为字符串，并返回结果。

const fruits = ["mangoes", "apples", "banana"];
fruits.tostring();//"mangoes,apples,banana"

4.班次 (4. Shift)

The shift() method removes the first element of an array, and returns that remaining.

shift()方法删除数组的第一个元素，并返回剩余的元素。

const fruits = ["mangoes", "apples", "banana"];
fruits.shift();//Gives ["apples", "banana"]

5.换档 (5. Unshift)

The unshift() method adds an element at the beginning of an array.

unshift()方法在数组的开头添加一个元素。

const fruits = ["mangoes", "apples", "banana"];
fruits.unshift("papaya");//Gives ["papaya", "mangoes", "apples", "banana"]

6.地图 (6. Map)

The map() method creates a new array with the results of calling a function for every array element.

map()方法创建一个新数组，并为每个数组元素调用一个函数。

const arr = [1, 2, 3, 10];
arr.map(x => x * 2);// returns [2, 4, 6, 20]

7.流行 (7. Pop)

The pop() method pops off (removes) the last element of an array, and returns that remaining array

pop()方法弹出(删除)数组的最后一个元素，并返回剩余的数组

const fruits = ["mangoes", "apples", "banana"];
fruits.pop();//returns ["mangoes", "apples"]

8.筛选 (8. Filter)

The filter() method creates an array filled with all array elements that pass a test (provided as a function).

filter()方法创建一个数组，其中填充了所有通过测试的数组元素(作为函数提供)。

const js = ["react", "vue", "angular"];
js.filter(word => word.length > 3);//returns the array ["react", "angular"] following the condition we //specified

9.包括 (9. Includes)

The includes() method determines whether an array contains a specified element. It returns boolean true or false.

includes()方法确定数组是否包含指定的元素。 它返回布尔值true或false。

const fruits = ["mangoes", "apples", "banana"];
fruits.includes("apples");//True

10.长度 (10. Length)

This is the most basic one. The length() method gives the number of elements present in an array.

这是最基本的。 length()方法给出数组中存在的元素数。

const array = ["grapes", "oranges", "mangoes"];
console.log(array.length());//Returns 3 in console

结论 (The Conclusion)

JavaScript can be daunting, especially if you are a beginner. But some simple guides can help us reduce the anxiety we get during the learning process. These are the ten JavaScript array methods for you. This helped me in my learning journey. And I believe it will be of importance to you, too.

JavaScript可能令人生畏，特别是如果您是初学者。 但是一些简单的指南可以帮助我们减轻学习过程中的焦虑感。 这些是适合您的十个JavaScript数组方法。 这对我的学习旅程有所帮助。 我相信这对您也很重要。

Further if you want to know more about JavaScript functions, you can read this short article.

此外，如果您想进一步了解JavaScript函数，可以阅读这篇简短的文章。

翻译自: https://medium.com/front-end-weekly/10-javascript-array-methods-as-simple-as-possible-bd51eb8bfac0