js 数组&对象遍历

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/fukaiit/article/details/100807200

遍历对象

1. for…in循环

var site = {
    name: 'baidu',
    url: 'https://www.baidu.com',
    slogen: '百度一下，你就知道'
};
for (var key in site) {
    console.log(key + ': ' + site[key]);
}

---

遍历数组

1. for…of循环

var arr = ['tom', 'jerry', 'fukaiit'];
for (let item of arr) {
    console.log(item);
}
for (let index of arr.keys()) {
    console.log(index + ': ' + arr[index]);
}
for (let [index, item] of arr.entries()) { //如果只写arr，输出的只是首字母
    console.log(index + ': ' + item);
}

2. 普通for循环

最常用的方式

var arr = ['tom', 'jerry', 'fukaiit'];
for (var i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

3. forEach循环

var arr = ['tom', 'jerry', 'fukaiit'];
arr.forEach(function(item, index, arr) {
    console.log(item); //数组元素，必选
    console.log(index); //索引值，可选
    console.log(arr); //数组本身，可选
});

可以使用更简单的箭头函数：

var arr = ['tom', 'jerry', 'fukaiit'];
arr.forEach((item, index, arr) => {
    console.log(item); //数组元素，必选
    console.log(index); //索引值，可选
    console.log(arr); //数组本身，可选
});

实际性能不如for循环；不能使用break语句中断循环，也不能使用return语句返回到外层

4. map循环

回调函数与forEach的相同

var arr = ['tom', 'jerry', 'fukaiit'];
var arr2 = arr.map((item, index, arr) => {
    console.log(item); //数组元素，必选
    console.log(index); //索引值，可选
    console.log(arr); //数组本身，可选
    return item+'2';
});
console.log(arr);
console.log(arr2);

可以使用return语句，返回一个新数组，不会改变原数组