Foreword:
When learning advanced js, you will learn several methods about arrays. I will list a few here, and briefly introduce the usage and characteristics. The syntax of each method is similar.
1.forEach()
forEach iterates (traverses) the array. This method has no return value and will modify the original array content.
The function is to call a method for each array element; traverse each element in the array without stopping the loop because of return and break
let arr = new Array(1, 2, 3, 4, 9, 4, 3, 5);
累加
let num = 0;
arr.forEach(function(value, index, array) {
console.log('每个数组元素' + value);
console.log('每个数组元素的索引号' + index);
console.log('数组本身' + array);
num += value;
})
console.log(num);
Print a part of the result
2. filter() method
The filter() method creates a new array whose elements are checked by checking all elements in the specified array that meet the criteria,
Mainly used to filter arrays, this method will not modify the value of the original array
value是arr数组中的每一个值,index为下标
let newArr = arr.filter(function(value, index) {
return value >= 3;
});
console.log(newArr);The output is as follows
Three.some()
It is used to detect whether the elements in the array meet the specified conditions, that is, to find whether there are elements in the array that meet the conditions
Note that its return value is a boolean value. If the element is found, it returns true, and if it cannot find it, it returns false.
If the first element that satisfies the condition is found, the loop is terminated and the search is not continued
// array.some(function(currentValue,index,arr))
// currentValue:数组当前项的值
// index：数组当前的索引
// arr：数组对象本身
查找数组中是否有大于或等于20这个值
let arr = new Array(10, 30, 4);
let flag = arr.some(function (value) {
return value >= 20;
});
console.log(flag);
查找数组中是否有'甘雨'这个值
let arr1 = new Array('甘雨', '胡桃', '雷神', '可莉', '迪奥娜');
let myWife = arr1.some(function (value) {
return '甘雨' === '甘雨';
});
console.log(myWife);The output is as follows
Four.every()
every() method: Check whether all elements of an array are greater than or equal to a certain number
Different from some, some returns true if there is a value in the array that satisfies the condition, but this returns true only if all members are satisfied
let arr = new Array(10, 30, 4);
// 这里只传一个值, 就是指当前元素了
判断arr数组中是否每一个值都大于10
let flag = arr.every((item) => {
return item > 10;
});
console.log(flag);//falseFive. map()
map() method: After calling a specified method for each element in the original array, a new array is formed by the returned value.
Generate a new array according to a certain mapping relationship. map has the meaning of map and also has the meaning of mapping.
Features: can't stop
let arr3 = [{ name: '甘雨', age: 18 }, { name: '胡桃', age: 16 }, { name: '可莉', age: 8 }]
// 希望去处理一下这和个arr数组 拿到的数组元素去掉年龄只要名字
let arrNew = arr3.map(item => {
return { name: item.name }
});
console.log(arrNew);The output is as follows
Six. find and findIndex
find method: Find the first element that meets the conditions and return undefined if the element is found
findIndex method: Find the first element that meets the conditions and return -1 if the subscript of this element is not found
Literally, find itself has the meaning of searching, and findIndex is the search index.
let arr1 = new Array('甘雨', '胡桃', '雷神', '可莉', '迪奥娜');
let flag = arr1.find((item) => {
return item === '可莉'
})
console.log(flag);
console.log('=====================');
let flag2 = arr1.findIndex((item) => {
return item === '可莉'
})
console.log(flag2);The output is as follows
Seven. reduce()
generally used to sum
// reduce方法
let arr = [20, 30, 40];
// 后面这个0的话就是累加的初始值,也就是sum的值 当然也可以不写
// item代表的就是arr数组中的每一项了
let res = arr.reduce((sum, item) => {
console.log(sum, item);
return sum + item;
}, 0);
console.log(res);The output is as follows
Each method iterates through the array
Note: among them, forEach() will modify the contents of the original array; filter() will return a new array; some() and every() will return Boolean values; find returns elements, findIndex returns subscripts, find returns undefined if not found, findIndex not found returns -1