javascript遍历方法

1：for
 

/* 
    for(初始值; 判断表达式; 自增/自减){ }
*/
for (let i = 0; i < len; i++) {
    do something....
}

2：for...in

用途：遍历对象、数组

不推荐遍历数组，效率低
 

/* 
    for(let 变量 in object/array){ }
*/
let obj = {
    name: '小王',
    age: 24
}
// 遍历对象
for (let i in obj) {
    console.log(i); // key
    console.log(obj[i]); // value
}
// 遍历数组
for (let j in arr) {
    console.log(j) // index下标
    console.log(arr[j]) // value
}

3：for...of

用途：遍历对象、字符串

let str = 'aabbcdgsf';
for (let i of arr) {
    console.log(i); // value
}
for (let j of str) {
    console.log(j); // 单个字符
}

4：forEach
 * 无法正常跳出循环，可使用抛异常结合异常捕获跳出循环
 * return、break、continue无效

/**
 * forEach
 * item => 当前项 index => key(索引) resArr => 原始数组
 */
arr.forEach((item, index, resArr) => {
    console.log(item);   // { id: 1, name: '小明'}, { id: 2, name: '小李'}....
    console.log(index);  // key索引/下标
    console.log(resArr); // 原始数组
})

5：map

 * 有返回值、使用return返回
 * 克隆原数组、并修改克隆数组数据、可使用变量接收

let arr2 = [1, 20, 10]
arr2.map((item, index, resArr) => {
    // do something...
    return item
})
let newArr = arr2.map(item => {
    return item * 2
})
console.log(newArr) // [2, 20, 40] map返回最终数组
console.log(arr2);  // [1, 10, 20] 原数组（无变化）

6：filter
 * 不改变原数组、 返回新数组

/**
 * filter
 * Array.filter((当前项, 索引, 原始数组) => {})
 */
let filterArr = [{ id: 1, age: 20 }, { id: 2, age: 18 }];
// let newArr = filterArr.filter(item => item.age >= 19);
let newArr = filterArr.filter((item, index, resArr) => {
    return item.age >= 19
})
console.log(newArr); // [{id: 1, age: 20}] 
console.log(filterArr); // [{ id: 1, age: 20 }, { id: 2, age: 18 }];

7：every

 * 不改变原数组， 返回值为boolean值
 * 对数组每一项运行给定函数，如果该函数对每一项返回true则返回true，否则返回false

let everyArr = [1, 2, 3, 4];
let flag = everyArr.every((item) => {
    return item > 2
});
let flag2 = everyArr.every((item) => {
    return item > 0
});
console.log(flag); // false
console.log(flag2); // true

8：some

对每一项运行指定函数， 该函数对某一项返回true，则返回true，否则返回false

let someArr = [1, 2, 3, 4];
let flag3 = someArr.every((item) => {
    return item > 2
});
let flag4 = someArr.every((item) => {
    return item > 0
});
let flag5 = someArr.every((item) => {
    return item > 6
});
console.log(flag3); // true
console.log(flag4); // true
console.log(flag5); // false

9：find

 * 不改变原数组， 返回值为当前项或undefined
 * 返回数组中符合条件的第一个元素，否则返回undefined

let findArr = [
    { id: 1, name: '小明', age: 20 },
    { id: 2, name: '小李', age: 22 },
    { id: 3, name: '小红', age: 22 }
];
// ES5
function getName(item) {
    return item.name == '小明'
}
let es5Res = findArr.find(getName);
console.log(es5Res); // {id: 1, name: '小明', age: 20}
// ES6
let res = findArr.find(item => item.name == '小明');
let res2 = findArr.find(item => item.name == '小小明');
console.log(res); // {id: 1, name: '小明', age: 20}
console.log(res2); // undefined

10：findIndex

 * 不会改变数组对象， 返回值为索引值或-1
 * 对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），
 * 只要有一个元素返回 true时停止执行，并返回当前项索引值。
 * 否则返回 -1

let indexArr = [1, 3, 4];
console.log(indexArr.findIndex(item => item == 3)); // 1
console.log(indexArr.findIndex(item => item == 5)); // -1

11：keys()、values()、entries()

/**
 * keys()     遍历键名
 * values()   遍历键值
 * entries()  遍历键值对
 * 可搭配for...of使用
 */

let keyArr = ['a', 'b']
for (let i of keyArr.keys()) {
    console.log(i); // 0、1
}
for (let i of keyArr.values()) {
    console.log(i); // 'a'、'b'
}
for (let i of keyArr.entries()) {
    console.log(i); // [0, 'a']、 [1, 'b']
}

12：reduce

/**
 * reduce
 * arr.reduce(callback, [initialValue])
 * callback参数：
 *      previousValue: 上次调用返回值 或 initialValue 
 *      currentValue ： 数组中当前被处理的元素
 *      index：         索引
 *      arrar：         调用resuce的数组
 */
let reduceArr = [1, 2, 5, 10];
let sum = reduceArr.reduce((a, b) => a + b);
console.log(sum);
// 示例：

// 1： 没有提供initialValue
let arr = [1, 4, 5, 10];
let sum = arr.reduce((prev, curr, index) => {
    console.log('prev:', prev, 'curr:', curr, 'key:', index);
    /*
       prev: 1 curr: 4 key: 1
       prev: 5 curr: 5 key: 2
       prev: 10 curr: 10 key: 3
    */
    return prev + curr;
})
console.log(sum) // sum => 20

// 2： initialValue 赋值
let arr = [1, 4, 5, 10];
let sum = arr.reduce((prev, curr, index) => {
    console.log('prev:', prev, 'curr:', curr, 'key:', index);
    /*
       prev: 0 curr: 1 key: 0
       prev: 1 curr: 4 key: 1
       prev: 5 curr: 5 key: 2
       prev: 10 curr: 10 key: 3
    */
    return prev + curr;
}, 0)
console.log(sum) // sum => 20
// 结论：initialValue不存在时，计算时从索引值0开始，否则从initialValue开始

学习时候刚好看到遍历，特意查询所有常见遍历方法进行整合，如有错误之处，请指出，谢谢

reduce部分暂未掌握，一些更深层的理解后续还有更新