介绍:访问,获取数组所有元素或指定某项元素,并对数组元素进行一些操作
方法一:for循环
// for循环 最常见
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] + 1; // 直接通过索引修改原数组的值
}
console.log('for循环', arr); //for循环 [2,3,4,5,6]
let list = [{ sex: '男' }, { sex: '女' }, { sex: '男' }];
for (let i = 0; i < list.length; i++) {
list[i].sex = '女';
}
console.log('for循环', list); //for循环 [{sex: '女'}, {sex: '女'}, {sex: '女'}]
方法二:forEach
介绍:调用数组的每个元素,没有返回值,不会改变原数组
语法:
arr.forEach((item,index,arr)=>{
}
)
说明:
item:当前数组元素
index:数组元素当前项
arr:原数组
特点:
1、没有返回值
2、不会改变原数组
3、不会对空数组进行检测
示例:将数组元素乘2
// forEach循环
let arr2 = [1, 2, 3, 4, 5];
let arrT = [];
arr2.forEach(item => {
item = item * 2;
arrT.push(item);
});
console.log('foEach', arr2, arrT);
// 1.不会改变原数组,所以arr2还是[1,2,3,4,5]
// 2.没有返回值,如果对数组元素进行了处理需要额外定义一个空数组,然后将处理后的数组元素添加到新建的空数组里面
// 3.写法简洁,注意和map的区别
方法三:map
介绍:返回一个新数组,新数组元素是原数组元素经过函数调用处理后的值,并没有改变原数组
语法:
let newArr=oldArr.map((item,index,oldArr)=>{执行语句})
说明:
item:当前数组元素
index:数组元素当前项
oldArr:原数组
特点:
1、有返回值
2、原数组不会改变
3、不会对空数组进行检测
示例:数组元素扩大3倍
// map循环
let arr3 = [1, 2, 3, 4, 5];
let newArr3 = arr3.map(item => {
// 有返回值
return item * 3;
});
console.log('map', arr3); //map [1, 2, 3, 4, 5] 原数组不变
console.log('map', newArr3); //map [3, 6, 9, 12, 15] 返回一个新数组
方法四:filter()
介绍:过滤筛选数组元素,返回满足条件的元素,过滤掉不满足的元素
语法:
let newArr4=arr4.filter((item,index,arr4)=>{return 执行语句})
说明:
item:当前数组元素
index:数组元素当前项
arr4:原数组
特点:
1、有返回值
2、不会改变原数组
3、不会对空数组进行检测
示例:筛选出大于5的元素
// filter过滤
let arr4 = [1, 2, 4, 5, 67, 8];
let newArr4 = arr4.filter(item => {
return item > 5;
});
console.log('filter', arr4); // filter [1, 2, 4, 5, 67, 8] 原数组不变
console.log('filter', newArr4);//filter [67, 8] 返回新数组
方法五:find()方法
介绍:返回满足条件的第一个元素值,如果没有,返回undefined
语法:
let newArr=arr.find((item,index,arr)=>{return 执行语句})
说明:
item:当前元素值
index:当前元素索引
arr:原数组
特点:
1、有返回值
2、不会改变原数组
3、对于空数组,函数是不会执行的
// find()
let arr5 = [1, 2, 3, 4, 5];
let newArr5 = arr5.find(item => {
return item > 2;
});
let newArr6 = arr5.find(item => {
return item > 6;
});
console.log('find', arr5); // find (5) [1, 2, 3, 4, 5] 原数组保持不变
console.log('find', newArr5); // find 3 返回满足条件的第一个数组元素
console.log('find', newArr6); // find undefined 没有符合条件的元素返回undefined
方法六:every()
介绍:所有元素满足判断条件则返回true,否则为false
语法:
let newArr=arr.every((item,index,arr)=>{return 执行语句})
示例:
// 将所有元素进行判断, 返回一个布尔值, 原数组不变
// 如果所有元素都满足判断条件,则返回true,否则为false。
let arr = [1, 2, 3, 4];
let newArr1 = arr.every(item => {
return item > 2;
});
let newArr2 = arr.every(item => {
return item < 5;
});
console.log(arr); // [1, 2, 3, 4] 原数组保持不变
console.log(newArr1); // false
console.log(newArr2); // true
// 注意: every() 不会对空数组进行检测。
// 注意: every() 不会改变原始数组
方法七:some()
介绍:只要有一项满足判断条件,返回true,所有元素都不满足判断条件返回false
示例:
// 将所有元素进行判断, 返回一个布尔值, 原数组不变
// 如果存在元素满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false。
// (判断条件注意和every方法区分)
let arr = [1, 2, 3, 4];
let newArr1 = arr.some(item => {
return item > 2;
});
let newArr2 = arr.some(item => {
return item > 5;
});
console.log(arr); // [1, 2, 3, 4] 原数组保持不变
console.log(newArr1); // true
console.log(newArr2); // false