JavaScript遍历对象及数组方法小结

1、for...in 语句

1.1 遍历对象属性名称

for...in 语句常用于遍历特定对象的属性，包括字段名称属性及函数名称属性。在JavaScript语言中，它们均称为属性 (property)。

let obj = {

name: 'obj',

showName() {

console.log(this.name);

}

};

for (const propName in obj) {

console.log(propName, typeof(obj[propName]));

}

显示：

name – "string"

showName – "function"

利用这一点，可方便地查看特定对象的所有属性或方法名称。下面语句打印出console对象所有的属性：

for (const propName in console) {

console.log(propName, typeof(console[propName]));

}

显示：

debug – "function"

error – "function"

log – "function"

info – "function"

warn – "function"

clear – "function"

...

可以看出，这些属性全部均是console的函数名称，因为console没有属性名称。

1.2 遍历数组索引值

for...in 用于数组中，则遍历数组索引值。

let array = ['a', 'b', 'c'];

for (const index in array) {

console.log(index, array[index]);

}

显示：

0 – "a"

1 – "b"

2 – "c"

1.3 遍历字符串索引值

由于字符串是由字符组成的数组，因此 for...in 也可用于遍历字符串的索引值。

let str = "abc";

for (const index in str) {

console.log(index, str[index]);

}

显示：

0 – "a"

1 – "b"

2 – "c"

2、for...of 语句

for...of 语句用于遍历可遍历对象 (iterable objects)的元素。这些可遍历对象包括字符串、数组、以及类似于数组的对象，这些对象都带有length属性。

2.1 不能用于遍历对象属性名称

for...of 语句不能用于遍历对象的属性名称。因此，下面的代码是错误的：

let obj = {

name: 'obj',

showName() {

console.log(this.name);

}

};

for (const propName of obj) {

console.log(propName);

}

显示：

TypeError: undefined is not a function (near '...propName of obj...')

意为，将 for...of 语句用于对象上面，无法提取具体的数值。

2.2 遍历数组元素

for...of 语句经常用于遍历数组中各元素的数值。

let arr = [2, 4, 6, 8, 10];

for (const value of arr) {

console.log(value);

}

显示：

2

4

6

8

10

2.3 遍历字符串中的字符

由于字符串是由字符组成的数组，因此 for...of 也可用于遍历字符串的字符。

let str = "abc";

for (const letter of str) {

console.log(letter);

}

显示：

a

b

c

2.4 解包

数组元素如果是带有特定属性名称的对象，可利用解包性质来快速遍历这些属性值。看下面例子。

function Point(x, y) {

return {x:x, y:y};

}

let points = [Point(1, 2), Point(2, 3), Point(4, 5)];

for (const point of points) {

console.log(point.x, point.y);

}

可将Point视为一个构造器 (constructor)，每次调用Point(x, y)都会创建并返回该类的一个对象，且含有x及y的属性名称。points则是一个含有多个Point对象的数组。上面的代码遍历出每个Point对象后，赋值于point变量，然后打印出它们的x值及y值。

如果我们不希望每次都通过引用对象属性的方式来访问x及y值，则可编写代码如下：

for (const point of points) {

let x = point.x;

let y = point.y;

console.log(x, y);

}

这一步可利用ES6的const解包特性予以简化：

for (const point of points) {

const {x, y} = point;

console.log(x, y);

}

更进一步，我们可以直接解包：

for (const {x, y} of points) {

console.log(x, y);

}

2.5 遍历Map

let scoreMap = new Map([

['Mike', 75],

['Tom', 80],

['Smith', 90]

]);

for (const [key, value] of scoreMap) {

console.log(key, value);

}

与上一节不同的是，Map需要使用 [key, value] 的方式来解包。

3、forEach 方法

3.1 forEach 常见调用方式

for...in，for...of 均是语句，与它们不同的是，forEach是数组的内嵌方法。这意味着我们可以直接在数组对象上面直接调用该方法。

let arr = [1, 3, 5, 7, 9];

arr.forEach((element) => {

console.log(element);

});

作为数组方法，forEach有一个参数，该参数的类型是函数，称为回调函数 (callback function)。所谓回调函数，是指一旦程序员提供了这样的函数，JavaScript引擎将负责调用此函数。

回调函数的价值在于回调函数可能存在多个参数，而这些参数将由JavaScript引擎自动提供。在回调函数中，我们可对JavaScript引擎所自动提供的参数进行进一步加工。

在上面的回调函数中，element是由JavaScript引擎自动提供的，代表每个数组元素。

上面的代码采用了lambda匿名表达式。它等同于：

let arr = [1, 3, 5, 7, 9];

function callback(element) {

console.log(element);

}

arr.forEach(callback);

可见，lambda表达式更加简练。

3.2 forEach 的参数

forEach共有3个参数 (上面例子只用了第1个)，它们的排列顺序如下：

arr.forEach((element, index, array) => {

console.log(element);

console.log(index);

console.log(array);

});

参数element是数组元素，参数index是数组元素所在数组中的索引值，参数array是整个数组。

一般情况下，我们仅需用到element及index参数就足够了。由于是每次迭代，因此，forEach方法中的array参数较少用到。

index每次遍历时都会加1，且每次都会与array的长度比较。一旦超出array的界限，就会终止遍历。如果遍历过程中，修改了array的长度，则需特别注意这一点。

3.2 forEach 遍历的终止

如何中止forEach的遍历？JavaScript并未提供这样的机制，但我们可以用一个双重嵌套的异常来终止遍历。

let arr = [1, 3, 5, 7, 9];

try {

arr.forEach((element, index, array) => {

try {

console.log(index);

if (index >= 3) {

throw new Error('forEach termination signal');

}

} catch (error) {

throw error;

}

});

} catch (e) {

if (e.message === 'forEach termination signal') {

console.log('forEach terminated.');

}

}

console.log('This line of code should be executed.');

显示：

0

1

2

3

forEach terminated.

This line of code should be executed.

我们设定，当index的值大于等于3时，需要终止遍历。这样，在第7行，当此条件满足时，即抛出"forEach termination signal"的异常。

此时，程序流程转入到第10行至第12行最内层的异常捕获处理代码：

} catch (error) {

throw error;

}

捕获异常后，如果我们不重新抛出异常，JavaScript引擎则会认为我们已正确地处理了异常，因此会恢复中断的遍历进程，继续处理下一个数组元素，这不是我们想要的。因此，我们在此重新抛出该异常，以切实终止遍历。

这时，forEach的遍历因异常而终止，从而达到了我们的最初的目标。但因为有异常，如果我们未作任何处理，则该异常会导致整个程序都终止运行。只有在我们处理了异常后，程序才能往下走。这就是第14行至18行最外层异常捕获代码的作用：

} catch (e) {

if (e.message === 'forEach termination signal') {

console.log('forEach terminated');

}

}

先判断它是不是"forEach termination signal"。如果是，则简单地打印一行消息。由于这里未再抛出新的异常，因此JavaScript引擎认为我们已经正确地处理了异常，则继续执行后面的代码。这样，最后一行第20行语句将被执行并打印出"This line of code should be executed."的文本。

一般来讲，如果我们需要在数组的遍历过程中终止遍历，不要使用 forEach 语句，使用最传统的方式即可：

let arr = [1, 3, 5, 7, 9];

for (let i = 0; i < arr.length; i++) {

console.log(i, arr[i]);

if (i >= 3) {

break;

}

}

这样即可在遍历中访问数组的索引值与数组元素，又可以极为方便地随时终止遍历。

JS遍历对象有几种方法

几天前一个小伙伴问我Object.getOwnPropertyNames()是干什么用的

平时还真没有使用到这个方法，一时不知如何回答

从方法名称来分析，应该是返回的是对象自身属性名组成的数组

那和Object.keys()方法不就一样了吗

感觉事情并不这么简单，于是我仔细看了一下这几种遍历对象的方法的区别

for in

for in 循环是最基础的遍历对象的方式，它还会得到对象原型链上的属性

可以看到对象原型上的属性也被循环出来了

在这种情况下可以使用对象的hasOwnProperty()方法过滤掉原型链上的属性

这时候原型上的 bar 属性就被过滤掉了

Object.keys

Object.keys()是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，它会自动过滤掉原型链上的属性，然后可以通过数组的forEach()方法来遍历

另外还有Object.values()方法和Object.entries()方法，这两方法的作用范围和Object.keys()方法类似，因此不再说明

for in 循环和Object.keys()方法都不会返回对象的不可枚举属性

如果需要遍历不可枚举的属性，就要用到前面提到的Object.getOwnPropertyNames()方法了

Object.getOwnPropertyNames

Object.getOwnPropertyNames()也是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，包括不可枚举的属性，也可以通过数组的forEach方法来遍历

ES2015 新增了 Symbol 数据类型，该类型可以作为对象的键，针对该类型 ES2015 同样新增了Object.getOwnPropertySymbols()方法

Object.getOwnPropertySymbols

Object.getOwnPropertySymbols()方法返回对象自身的 Symbol 属性组成的数组，不包括字符串属性

什么都没有，因为该对象还没有 Symbol 属性

Reflect.ownKeys

Reflect.ownKeys()方法是 ES2015 新增的静态方法，该方法返回对象自身所有属性名组成的数组，包括不可枚举的属性和 Symbol 属性

对比

结论

这其中只有 for in 循环会得到对象原型链上的属性，其它方法都只适用于对象自身的属性

ES 语言后续添加的新特性不会对以前的代码产生副作用，比如在 ES2015 之前就存在的 for in 循环，Object.keys() 和 Object.getOwnPropertyNames() 是肯定不会返回 Symbol 属性的。

以上就是JS遍历对象有几种方法的详细内容，更多请关注网站的其它相关文章！