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); // keyconsole.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: 1prev: 5 curr: 5 key: 2prev: 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: 0prev: 1 curr: 4 key: 1prev: 5 curr: 5 key: 2prev: 10 curr: 10 key: 3*/return prev + curr;
}, 0)
console.log(sum) // sum => 20
// 结论：initialValue不存在时，计算时从索引值0开始，否则从initialValue开始

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

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

javascript遍历方法相关推荐

javascript同级遍历_有用的DOM遍历方法，你需要了解一下
英文 | https://levelup.gitconnected.com/useful-dom-traversal-methods-d2b55cf8e25c翻译 | web前端开发(ID:web_q ...
你可能不知道的JavaScript 遍历DOM的几种方法
最近看到一篇关于前端优化方面的文章,里面提到了几点对DOM遍历操作的优化,文章只是一笔带过,并没有深入的讲解. 其中提到了几个优化的手段,乍一看似乎没见过,然后再仔细想想,其实无论是犀牛书还是红宝书都 ...
JavaScript 数组遍历方法的对比
前言 JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句代码: var ...
JavaScript 数组方法遍历
JavaScript 数组方法创建一个数组 Concat()连接两个或更多的数组并返回结果 join()用指定分隔符分隔数组并转换为字符串 Push()可向数组的末尾添加一个或多个元素,并返回 ...
JavaScript算法总结数组字符串遍历方法总结
JavaScript基础算法一.数组常用方法 1.push() 在尾部追加,类似于压栈,原数组会变. const arr = [1, 2, 3] arr.push(8) console.log(ar ...
最全 JavaScript Array 方法详解
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
JS数组与对象的遍历方法大全
本文简单解析各种数组和对象属性的遍历方法: 原生for循环.for-in及forEach ES6 for-of方法遍历类数组集合 Object.key()返回键名的集合 jQuery的$.each() ...
chararray遍历_数组常用的遍历方法 ——总结
看图了解数组常用的方法前言本文主要介绍数组常见遍历方法:forEach.map.filter.find.every.some.reduce,它们有个共同点:不会改变原始数组. 一.forEach: ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...

javascript遍历方法

javascript遍历方法相关推荐

最新文章

热门文章