Top 10 JavaScript Array Methods Every Web Developer Must Know

1、pop( ) method

此方法从数组中删除最后一个元素并返回该元素

let cities = ["Delhi","Lucknow","Banglore","Mumbai"];
// remove the last element
let removedcity = cities.pop();
console.log(cities);//["Delhi", "Lucknow", "Banglore"]
console.log(removedcity);

pop method.png

2、push( ) method

此方法将零个或多个元素添加到数组的末尾

let city = ["北京","上海","广州"];
//add "南京" to the array
city.push("南京");//将南京添加到数组尾部
console.log(city);

push( ) method.png

3、reduce( ) method

此方法对数组的每个元素执行 reduce 函数并返回单个输出值

const numbers = [20,10,18,12];
const sum = numbers.reduce((x,y) => x + y,0);
console.log(sum);//60

reduce( ) method.png

4、foreach( ) Method

此方法为每个数组元素执行提供的函数

/*
This method executes a provided function for each array element.
*/
const words = ['HTML','CSS','JavaScript'];
words.forEach(words => console.log(words));

foreach( ) Method.png

5、find( ) method

This method returns the value of the first array element that satisfies the provided test function.
此方法返回满足提供的测试函数的第一个数组元素的值

/*
This method returns the value of the first array element that satisfies the provided test function.
*/ 
const numbeNj = [7,14,8,128,56];
const found = numbeNj.find(element => element > 10);
console.log(found);//14

find( ) method.png

6、sort( ) method

此方法按特定顺序（升序或降序）对数组的项目进行排序。

/*
This method sorts the items of an array in a specific order(ascending or descending).
*/ 
let city = ["Shanghai","Nanjing","GuangZhou","JiangNing"];
//sort the city array in ascending oderr
let sortedArray = city.sort();
console.log(sortedArray);

sort( ) method.png

7、 filter( ) method

此方法返回一个新数组，其中包含由给定函数定义的所有测试元素

 /*
This method returns a new array with all elements that test defined by the given function.
*/ 
const najjj = ["HTML","CSS","JavaScript","Python"];
let longword = najjj.filter(najjj => najjj.length > 4);
console.log(longword);

filter( ) method.png

8、map( ) method

此方法创建一个新数组，其中包含为每个数组元素调用函数的结果

/*
This method creates a new array with the results of calling a function for every array element.
*/ 
const hhhhh = [1,2,3,4,5];
const doubled = hhhhh.map(x => x * 2);
console.log(doubled);

map( ) method.png

9、findIndex( ) method

此方法返回满足提供的测试函数的第一个数组元素的索引，否则返回-1

/*
This method retuns the index of the frist array element that satisfies the provied test function or else returns.-1.
*/ 
const kkk = [6,11,9,100,46];
const indexFound = kkk.findIndex(element => element > 15);
console.log(indexFound);//3

findIndex( ) method.png

10、concat( ) method

此方法通过合并两个或多个值/数组返回一个新数组

/*
This method returns a new array by merging two or more values/arrays.
*/ 
let primeNumbers = [2,3,5,7];
let evenNumbers = [2,4,6,8];
// join two arrays
let joinedArrays = primeNumbers.concat(evenNumbers);
console.log(joinedArrays);

concat( ) method.png

Thanks for reading.