js常用数组遍历

一、for循环类

1. 基础for循环

//for
let arr = [{id: 1, name: '男'}, {id: 2, name: '女'}];
for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i);       //  0 1
    console.log(arr[i].name);  //男 女
}

2. for in循环

/**
 * for in
 * @param key 索引(下标)
 */
for (var key in arr) {
  console.log(key);  //  0 1 返回数组索引
  console.log(arr[key].name) //  男 女
}

3. for in循环

/**
* for of
* @param item 对象
*/
for (let item of arr) {
 console.log(item.name); //  男  女
}
// 输出数组索引
for (let item of arr.keys()) {
 console.log(item);  // 0 1
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {
 console.log(item + ':' + val); //  0:男  1:女
}

二、返回值相关

1. forEach循环

/**
 * forEach
 * @param item 对象 必填参数
 * @param index 索引(下标)
 * @param arr 数组本身
 * @return undefined(即无返回值)
 */
arr.forEach((item, index, arr) => {
  console.log(item.name);  //男 女
  console.log(index);  // 0 1
  console.log(arr);    // [{id: 1, name: '男'}, {id: 2, name: '女'}];
})

2. find,map,filter语法

/**
* find,map,filter
* @param item 对象(必写)
* @param index 索引(下标)
* @param arr 数组本身
* @return
* find(存在返回第一个元素，无返回undefined)
* filter（返回符合条件的数组，无返回[]）
* map(不用于条件返回而用于单个属性返回成数组，不存在此属性返回[undefined,undefined]
*/

2.1 find 语法

var arr = [1,2,3,4,5,6,7];
 var ar = arr.find((item,index)=>{
     return item>5;
 });
console.log(ar);//6
console.log(arr);//[1,2,3,4,5,6,7]

2.2 filter 语法

var arr2 = [1,2,3,4,5,6,7];
 var ar2 = arr2.filter((item,index)=>{
     return item>5;
 });
console.log(ar2);//[6,7]
console.log(arr2);//[1,2,3,4,5,6,7]

2.3 map 语法

//处理数组
var arr = [1,2,3,4,5];
 var ar = arr.map(function(item){
    return item*2;
 });
console.log(ar);//[2,4,6,8,10]
console.log(arr);//[1,2,3,4,5]
//获取数组某个属性
var arr3 = [{id:1,name:'张三'},{id:2,name:'李四'}];
var ids = this.arr3.map(item => item.id).toString();
var names = this.arr3.map(item => item.id).toString();
console.log(ids);//1,2
console.log(names);//张三,李四

备注：forEach、map、filter、reduce、every、some 都会有 break 和 continue 不生效的问题，因为是在function中，但function解决了闭包陷阱的问题；要使用break、continue 可以使用 for、for...in、for...of、while。 用于遍历数组元素使用：for()，forEach()，map()，for...of 用于循环对象属性使用：for...in