JS数组和对象的遍历方法总结

JavaScript中，数组和对象的遍历方法总结

循环遍历是写程序很频繁的操作，JavaScript 提供了很多方法来实现。

 

这篇文章将分别总结数组和对象的遍历方法，新手可以通过本文串联起学过的知识。

 

数组遍历

 

方法一：for 循环

 

for 循环是使用最多，也是性能优化最好的一种遍历方式。

 

var arr = ["a", "b", "c"];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
// a b c

 

同样常规的循环类型还有 while 循环和 do/while 循环。

 

它们之间的区别在于，for 循环预先知道循环次数，while 循环不知道循环次数，do/while 至少会循环次数。

 

方法二：for-of 遍历

 

for-of 是 ES6 新增的语法。它直接遍历值，而不是数组下标（或对象属性）。

 

var arr = ["a", "b", "c"];
for (let item of arr) {
  console.log(item);
}
// a b c

 

实际上，for-of 语句不仅可以循环遍历数组对象。

 

还可以迭代 Array、Map、Set、String 等对象。

 

// 遍历String
let str = "Hello";
for (let value of str) {
  console.log(value)
}
// H e l l o

// 遍历Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

 

for-of 的工作原理是，向循环对象请求一个迭代器对象，然后通过迭代器对象的next()方法来获得返回值。

 

数组内置了 @@iterator，@@iterator不是迭代器，而是返回一个迭代器对象的函数。

 

var arr = ["a", "b","c"];
var it = arr[Symbol.iterator]();
console.log(it.next());  // { value: 'a', done: false }
console.log(it.next());  // { value: 'b', done: false }
console.log(it.next());  // { value: 'c', done: false }
console.log(it.next());  // { value: undefined, done: true }

 

上面代码中，value 表示当前遍历值，done 是布尔值，表示是否还有可以遍历的值。

 

需要注意的是，普通对象没有内置@@iterator，所以无法使用 for-of 遍历。

 

这么做的原因很复杂，简单来说，就是为了避免影响未来的对象类型。

 

不过，我们可以通过Object.defineProperty(...)给对象定义@@iterator。

 

详细可以通过[这里了解](https://github.com/getify/You-Dont-Know-JS/blob/1ed-zh-CN/this %26 object prototypes/ch3.md)。

 

方法三：数组方法

 

为了适应不同方式的遍历，JavaScript 内置了许多的数组方法。

 

例如比较常用的forEach()方法，写起来，可以让代码更简洁。

 

var arr = ["a", "b", "c"];
arr.forEach((index, item) => {
  console.log(index, item)
})
// a 0
// b 1
// c 2

 

map()方法

 

var arr = [1, 2, 3];
var newArr = arr.map(item => {
  return item * 2;
});
console.log(newArr);  // [2, 4, 6]

 

filter()方法

 

var arr = [1, 2, 3];
var newArr = arr.filter(item => {
  return item > 1;
});
console.log(newArr); // [2, 3]

 

reduce()方法是 ES5 新增，专为下面这种累加操作的设计的。

 

实际能做的事情远比这要丰富，本文只是简单介绍基本用法，详细可以查看本文。

 

var arr = [1, 2, 3];
var sum = arr.reduce((pre, cur) => {
  return pre + cur;
});
console.log(sum); // 6

 

every()方法用于检测数组元素是否全部符合指定条件。

 

它通常和下面的some()方法放在一起理解。

 

var arr = [1, 2, 3];
var bool = arr.every(item => {
  return item < 5;
});
console.log(bool); // true

 

some()方法用于检测数组是否存在一个符合指定条件的元素。

 

下面的例子是检测数组元素是否存在 Number 类型。

 

var arr = ["a", 1, "b"];
var bool = arr.some(item => {
  return typeof item === "number";
});
console.log(bool);  // true

 

对象的遍历方法

 

对象的遍历相对麻烦一些。

 

有两种方式可以实现对象的遍历，一种是直接使用 for-in 循环；另一方式，是将对象转换成数组，再进行遍历。

 

方法一：for-in 循环

 

for-in 专门用于遍历对象的可枚举属性，包括 prototype 原型链上的属性，因此性能会比较差。

 

什么是可枚举属性？

 

从名字上可以看出，就是该属性会出现在对象的迭代（枚举）中，比如 for-in 循环中。

 

var obj = { a: 2, b: 4, c: 6 };
for (let key in obj) {
  console.log(key);
}
// a b c

 

方法二：Object.keys() 和 Object.getOwnPropertyNames()

 

Object.key()会返回一个数组，包含所有可枚举属性；Object.getOwnPropertyNames()也会返回一个数组，包含所有元素，不管是否可枚举。

 

需要说明的是，两者都只查找对象的自定义属性。

 

var obj = { a: 2, b: 4, c: 6 };
// Object.keys()
Object.keys(obj).forEach(key => {
  console.log(key);
})
// a b c

// Object.getOwnPrepertyNames()
Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(key);
})
// a b c

 

此外，还可以通过Reflect.ownKeys(obj)方法来遍历。

 

它返回一个数组，包含对象自定义的属性，不管属性名是 Symbol 还是字符串，也不管是否可枚举。

 

由于使用不多，这里了解一下即可。

 

最后，整理了不同对象遍历方法的特点。

 

方式	查找原型链属性	查找自定义属性	查找不可枚举属性
for-in	✅	✅	✅
Object.keys(..)	❌	✅	❌
Object.getOwnpropertyNames(..)	❌	✅	✅

 

吾儿滨滨