1. forEach
这个方法是为了取代for循环遍历数组的,返回值为undefined
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
例如:
let item = [21, 2, 15, 9, 40, 5, 7, 99];
item.forEach((item,index,arr)=>{
console.log(item);
console.log(index);
console.log(arr);
})
其中:
- item代表遍历的每一项
- index代表遍历的每项的索引
- arr代表数组本身
2. filter
接收函数 函数返回布尔值 过滤数组 遍历找到符合条件的 也就是return为true
let item = [21, 2, 15, 9, 40, 5, 7, 99];
let newArr= item.filter((item,index,arr)=>{
//返回数组每项值大于9的数组
return item > 9
})
console.log(newArr); // [21, 15, 40, 99]
3. map
map方法主要对数组的复杂逻辑处理时用的多,特别是react中遍历数据,也经常用到,写法和forEach类似
支持return返回值,把每一次循环return返回的值组成一个新的数组,对原数组没有影响
// 在实际中,我们可以利用map方法方便获得数组对象中的特定属性值
let users = [
{"name": "张小花", "email": "zhang@qq.com"},
{"name": "body", "email": "body@qq.com"},
{"name": "李小璐", "email": "li@qq.com"}
];
let newEmail = users.map(function (item) {
return item.name;
});
console.log(newEmail.join(',')); // 张小花,body,李小璐
//第2种获取数组对象中的值
let emails = [];
users.map(function (item){
emails.push(item.email);
});
console.log(emails); // ["zhang@qq.com", "body@qq.com", "li@qq.com"]
4. some
some方法用于只要数组中至少存在一个满足条件的结果 返回值就是true 否则返回false
接收函数 返回boolean
let item = [21, 2, 15, 9, 40, 5, 7, 99];
let someArr= item.some((item,index,arr)=>{
return item>100
})
console.log(someArr); // false
5. every
every方法用于数组中的每一项都得满足条件时,返回值就是true 否则返回false 接收函数 返回boolean
let item = [21, 2, 15, 9, 40, 5, 7, 99];
let everyArr= item.every((item,index,arr)=>{
return item>1
})
console.log(everyArr); // true
6. includes
includes() 方法用于判断字符串是否包含指定的子字符串。
如果找到匹配的字符串则返回 true,否则返回 false。
接收函数 返回boolean
注意: includes() 方法区分大小写。
var arr = [10, 20, 30, 40, 50];
let arr1 = arr.includes(10); //true
let arr2 = arr.includes(50, 2); //false
console.log(arr1,arr2);
array.includes(element, start)
//element 是必要参数,它是要搜索的元素。
//start 是一个可选的参数,默认值是0,在数组的哪个位置开始搜索。
7. findIndex
接收函数 适用于复杂数据类型 最终返回数值(下标),数据返回第一个符合条件的下标 不符合的返回-1
注意: findIndex() 对于空数组,函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。
/*对象,取出满足要求的下标*/
const nameArr = [
{ id: 1, userName: "zhaoqian", age: 16 },
{ id: 2, userName: "sunli", age: 18 },
{ id: 3, userName: "zhouwu", age: 26 },
{ id: 4, userName: "zhengwang", age: 18 },
];
/*满足条件,返回下标位置2*/
var i1 = nameArr.findIndex((value) => value.age == 26);
console.log(i1);
/*没有满足条件的,返回-1*/
var i2 = nameArr.findIndex((value) => value.id == 168);
console.log(i2);
8. indexOf
接收数值 返回数值(下标),符合条件返回下标 否则返回-1 适用于基础类型
let indexList = [];
let arr2 = ['a', 'b', 'a', 'c', 'a', 'd'];
let element = 'a';
let index = arr2.indexOf(element); /*满足条件,返回下标位置0*/
let element1 = 'a1';
let index1 = arr2.indexOf(element1); /*没有满足条件的,返回-1*/
while (index !== -1) {
indexList.push(index);
index = arr2.indexOf(element, index + 1);
}
console.log(indexList);
// [0, 2, 4]
9. find
接收函数 方法返回(内部)第一个符合条件的整条数据,没有符合的的直接返回undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArr= arr.find((item) => {
// find() 方法为数组中的每个元素都调用一次函数执行:
// 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
// 如果没有符合条件的元素返回 undefined
return item > 3;
});
// 输出结果
console.log(newArr); // 4