这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战
说明:文章部分内容及图片出自网络，如有侵权请与我本人联系(主页有公众号:小攻城狮学前端)
作者：小只前端攻城狮、 主页：小只前端攻城狮的主页、 来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
前言
接上一篇文章，我们来详细解读js数组的内容，本篇幅讲述“数组的遍历(1)”，上一篇传送门
背景
在开发中，我们常常需要获取并操作数组中的每一个元素，然后得到想要的返回结果。这样就需要我们去对数组做一个遍历的操作。
遍历数组的方法包括：for、for...in、for...of、some()、every()、filter()、forEach()、map()、reduce()等。
数组/boolean/无 = 数组.every/filter/forEach/map/some(
function(item, index, arr){
...
})
for 循环
原始for循环
const arr = ['a', 'b', 'c'];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 这个都不用说了吧
}
for...in
循环遍历的值都是数据结构的键值
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d
console.log(obj[o]) //这个才是属性对应的值1，2，3，4
}
注意:for...in可以遍历数组，但不推荐。for...in起初就是为了遍历对象而生的。
for...of
它是ES6中新增加的语法，用来循环获取一对键值对中的值
遍历数组
let arr = ['China', 'America', 'Korea']
for (let o of arr) {
console.log(o) //China, America, Korea
}
注意：不可以遍历对象，一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口可以使用 for of循环。而对象没有Symbol.iterator属性。那么哪些数据结构部署了 Symbol.iteratoer属性了呢 ? 如下
- 数组 Array
- Map
- Set
- String
- arguments对象
- Nodelist对象, 就是获取的dom列表集合
示例
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
for (let item of iterable) {
console.log(item);
}
// [a, 1]
// [b, 2]
// [c, 3]
// 字符串
var str = "hello";
for (let s of str) {
console.log(s); // h e l l o
}
// DOM NodeList对象
let paras = document.querySelectorAll("p");
for (let p of paras) {
p.classList.add("test");
}
// arguments对象
function printArgs() {
for (let x of arguments) {
console.log(x);
}
}
printArgs('a', 'b');// 'a' 'b'
小结
for循环的遍历就先到这里，大家主要是要注意的for...in和for...of的使用区别。
for…in
- 数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
- for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
- 某些情况下，for…in循环会以任意顺序遍历键名。
- for…in循环主要是为遍历对象而设计的，不适用于遍历数组。
for…of
- 有着同for…in一样的简洁语法，但是没有for…in那些缺点。
- 不同于forEach方法，它可以与break、continue和return配合使用。
- 提供了遍历所有数据结构的统一操作接口
写作不易，「点赞」+「评论」 谢谢支持❤
感谢阅读，希望能对你有所帮助,文章若有错误或者侵权，可以在评论区留言或在我的主页添加公众号联系我。
