JS遍历

JS遍历

数组的遍历

简单for循环

下面先来看看大家最常见的一种写法：

const arr = [1, 2, 3];
for(let i = 0; i　< arr.length; i++) {
    console.log(arr[i]);
}

for-in

通常情况下，我们可以用 for-in 来遍历一遍数组的内容，代码如下：

const arr = [1, 2, 3];
let index;
for(index in arr) {
    console.log("arr[" + index + "] = " + arr[index]);
}

for-in 循环遍历的是对象的属性，而不是数组的索引。因此， for-in 遍历的对象便不局限于数组，还可以遍历对象。

forEach

在 ES5 中，引入了新的循环，即 forEach 循环。

const arr = [1, 2, 3];
arr.forEach((data) => {
    console.log(data);
});

forEach 方法为数组中含有有效值的每一项执行一次 callback 函数，那些已删除（使用 delete 方法等情况）或者从未赋值的项将被跳过（不包括那些值为 undefined 或 null 的项）。 callback 函数会被依次传入三个参数：

1. 数组当前项的值；
2. 数组当前项的索引；
3. 数组对象本身；

for-of

const arr = ['a', 'b', 'c'];
for(let data of arr) {
    console.log(data);
}

为什么要引进 for-of？

要回答这个问题，我们先来看看ES6之前的 3 种 for 循环有什么缺陷：

1. forEach 不能 break 和 return；
2. for-in 缺点更加明显，它不仅遍历数组中的元素，还会遍历自定义的属性，甚至原型链上的属性都被访问到。而且，遍历数组元素的顺序可能是随机的。

那 for-of 到底可以干什么呢？

1. 跟 forEach 相比，可以正确响应 break, continue, return。
2. for-of 循环支持字符串遍历，它将字符串视为一系列 Unicode 字符来进行遍历。
3. for-of 也支持 Map 和 Set （两者均为 ES6 中新增的类型）对象遍历。

对象的遍历

for-in

在刚刚的数组遍历中我们也说过了for-in也可以用于对对象的遍历，就像下面这样：

var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
for (var index in obj) {
	console.log('key=', index, 'value=', obj[index])
}

Object.keys()

返回一个数组,包括对象自身的(不含继承的)所有可枚举属性。

var obj = {'0':'a','1':'b','2':'c'};
Object.keys(obj).forEach(function(key){
     console.log(key,obj[key]);
});

Object.getOwnPropertyNames(obj)

返回一个数组,包含对象自身的所有属性，包括不可枚举属性。

var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key,obj[key]);
});