前面的话
前一段时间在做代码CR时，看到一些“另类”的数组方法。感觉不错，见名知义又简洁。今晚在面试时问面试者forEach能否中断，竟然答不出来，其实稍有代码量肯定能意识到的。在这里做个总结。
- forEach遍历数组
- 不能中断遍历，而且不能修改元素
- 可以改变元素本身的属性
arr.forEach(item=>{
return // 不生效
break // 不生效
item = 2 // 无法改变元素本身
item.prop // 如果元素是对象，可以改变元素属性
})
这是最常见的数组遍历方法，代码量稍大一些的同学应该都踩过forEach无法中断的坑
- for...in 遍历数组或者对象
for(const key in arr)key是指下标，而并不是元素本身- 可以中断遍历
const obj = {
name: "joven",
age: 12,
};
// for in 可以遍历对象
for (const key in obj) {
console.log(key);
}
// 输出name,age
const arr = [1, 2, 3, 4, 5];
// for in 也可以遍历数组
for (const key in arr) {
if (key == 2) {
// return; // return中断遍历，不执行后面的语句
break; // break中断遍历，跳出当前循环
}
console.log(arr[key]);
}
// 输出1，2
由于遍历数组时
for(const key in arr)中key并不是元素本身，取元素还得多写一个语句，所以更建议使用for...of
- for...of遍历数组
for(let item of arr)item是指元素并不是指下标- 遍历可以中断
- 不能遍历对象
const obj = {
name: "joven",
age: 12,
};
// for of 不可以遍历对象
// for (const item of obj) {
// console.log(item);
// }
const arr = [1, 2, 3, 4, 5];
// for of 也可以遍历数组
for (const item of arr) {
if (item == 2) {
return; // return中断遍历，不执行后面的语句
// break; // break中断遍历，跳出当前循环
}
console.log(item);
}
// 输出1
来自ES6新的数组方法，非常完美。
- find在数组里面找一项符合条件的元素 如何作用的：遍历数组，对每一项执行指定函数，如果为true，返回这一项，并中断遍历;如果一直没找到，返回undefined
const arr = [1, 2, 3, 4, 5];
let target = arr.find(item => {
return item === 2;
});
console.log(target); // 输出2
不要忘记函数的return
- findIndex在数组里面找一项符合条件的元素的下标;如果没有找到的话，返回-1
const arr = [1, 2, 3, 4, 5];
let target = arr.findIndex(item => {
return item === 2;
});
console.log(target); // 输出1
注意：如果没有找到，返回-1，并不是undefined
- map基于原数组构造新数组，新数组元素结构可自定义 如何作用的：返回新数组，遍历原数组，每一项执行指定函数，函数返回值作为新数组的项
const arr = [
{
name: "joven",
age: 30,
},
{
name: "yangqian",
age: 26,
},
];
const newArr = arr.map((item) => {
return {
nickname: item.name,
age: item.age + 1,
};
});
console.log(newArr); //[ { nickname: 'joven', age: 31 }, { nickname: 'yangqian', age: 27 } ]
如果不满意当前数组的元素结构，第一个应该想到用map
-
every数组元素都满足条件 如何作用：遍历数组，每一项执行指定函数，所有结果为true,就返回true
-
some数组元素有一个满足条件
如何作用：遍历数组，每一项执行指定函数，只要有一项结果为true,就返回true
const arr = [1, 2, 3, 4, 5, 6];
const status = arr.every((item) => {
return item > 1;
});
console.log(status); // false
const res = arr.some((item) => {
return item > 1;
});
console.log(res); // true
every和some方法的使用，可以少写不少代码且见名知义。建议多多使用
- reduce
如何作用:
- 中间变量的初始值为第2个参数;
- 中间变量和元素的计算结果都会赋值给中间变量**;
- 遍历结束后，reduce返回中间变量
应用场景：累加和阶乘
数组.reduce((中间变量,元素)=>{
return 中间变量和元素的计算
},中间变量的初始值)
let arr2 =[1,2,3,4,5]
let jiecheng = arr2.reduce((yinzi,item)=>{
console.log(yinzi,item)
return yinzi*item
},1)
reduce还有更多好用的技巧
补充
以下情况，用到filter和map需要遍历两次数组，所以更建议直接使用for...of
const arr = [
{
id: 111,
age: 18,
},
{
id: 222,
age: 19,
},
{
id: 333,
age: 20,
},
{
id: 444,
age: 21,
},
];
// 要求：把数组中age>19的元素的id以,拼接成字符串
const str1 = arr
.filter((item) => {
return item.age > 19;
})
.map((item) => {
return item.id;
})
.join(",");
console.log(str1); //333,444
const newArr = [];
for (const item in arr) {
if (item.age > 19) {
newArr.push(item.id);
}
}
console.log(newArr.join(",")); // 333,444
