js数组对象的几种遍历方式

1.数组的遍历

首先我们先简单介绍了跳出循环的几种方式

// 跳出循环的方式有如下几种

// return 函数执行被终止

// break 循环被终止

// continue 循环被跳过

1.普通版for:最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间

for 循环中的变量 i，由于 ES5并没有块级作用域的存在，它在循环结束以后仍然存在于内存中，所以建议使用函数自执行的方式来避免；

let arr1 = [1, 2, 3, 4, 5, 3, 2, 3, 4, 6]
        for (let i = 0; i < arr1.length; i++) {
            console.log(arr1[i])
        }

2.优化版for:使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

这种方法基本上是所有循环遍历方法中性能最高的一种

let arr2 = [1, 2, 3, 4, 5, 3, 2, 3, 4, 6], len, i;
        for (i = 0, len = arr2.length; i < len; i++) {
            console.log(arr2[i]);
        }

3.foreach循环:数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱

注意：最重要的一点，可以添加第二参数，为一个数组，而且回调函数中的this会指向这个数组。而如果没有第二参数，则this会指向window。

let arr3 = ['da', 'fadf', '34ea', 'dfqa', 'dfaefea'];
        arr3.forEach((value, index) => {
            console.log(index + ':' + value);
        })

4.foreach变种:由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。实际性能要比普通foreach弱

let arr4 = [1, 2, 3, 4, 5, 3, 2, 3, 4, 6]
        Array.prototype.forEach.call(arr4, (value, index) => {
            console.log(index + ':' + value)
        });

5.for...in:这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中它的效率是最低的；for...in循环会遍历一个object所有的可枚举属性。for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

let arr5 = ['da', 'fadf', '34ea', 'dfqa', 'dfaefea'];
        for (i in arr5) {
            console.log(i + ':' + arr5[i])
        }

6.map遍历：这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

let arr6 = [1, 2, 3, 4, 5, 3, 2, 3, 4, 6];
        arr6.map((value, index) => {
            console.log(index + ':' + value)
        })

7.for...of:这种方式是es6里面用到的，性能要好于for in，但仍然比不上普通for循环；for...of会遍历具有iterator接口的数据结构

let arr7 = ['da', 'fadf', '34ea', 'dfqa', 'dfaefea'];
        for (let value of arr7) {
            console.log(value);
        }

let arr8 = [1, 1, 2, 3, 5, 43, 3, 4, 3, 5, 3, 5]

for (let [index, value] of arr8.entries()) {

console.log(index + ':' + value)

}

对象的遍历

1. for in:or in 主要用于遍历对象的可枚举属性，包括自有属性、继承自原型的属性，示例中的属性age为不可可枚举，所以没有输出

let obj1 = { "name": "tom", "sex": "male" };
        Object.defineProperty(obj1, "age", { value: "18", enumerable: false });//增加不可枚举的属性age
        Object.prototype.protoPer1 = function () { console.log("name is tom"); };//通过原型链增加属性，为一个函数
        Object.prototype.protoPer2 = 2;////通过原型链增加属性，为一个整型值2
         for (let key in obj1) {
            if (obj1.hasOwnProperty())  //hasOwnProperty() 方法来确定属性是否时对象自身属性
            {
                console.log(key + ':' + obj1[key])
            }
        }

2. Object.keys:Object.keys主要用于遍历对象自有的可枚举属性，不包括继承自原型的属性和不可枚举的属性。

 let obj2 = { "name": "tom", "sex": "male" };
        Object.defineProperty(obj2, "age", { value: "18", enumerable: false });//增加不可枚举的属性age
        Object.prototype.protoPer1 = function () { console.log("name is tom"); };//通过原型链增加属性，为一个函数
        Object.prototype.protoPer2 = 2;////通过原型链增加属性，为一个整型值2
        console.log("Object.keys:")
        console.log(Object.keys(obj2));

3.Object.getOwnProperty此方法用于返回对象的自有属性，包括可枚举和不可枚举的属性

 let obj3 = { "name": "tom", "sex": "male" };
        Object.defineProperty(obj3, "age", { value: "18", enumerable: false });//增加不可枚举的属性age
        Object.prototype.protoPer1 = function () { console.log("name is tom"); };//通过原型链增加属性，为一个函数
        Object.prototype.protoPer2 = 2;////通过原型链增加属性，为一个整型值2
        console.log("Object.getOwnPropertyNames:");
        console.log(Object.getOwnPropertyNames(obj3));

最后来简单的讨论下：for of 与 forEach 与 for in

for of 用于循环可迭代对象，包括有 Array, Set, Map, 字符串

而 Array, Set, Map 都有 forEach 方法

另外，NodeList 不是 Array, Set, Map，但是一个可迭代对象，可以用 for of 遍历

此外，用 for of 循环对象时可以通过 break 提前终止，而 forEach 无法提前跳出循环

for in 遍历对象的可枚举属性，包括其原型链上的属性，且不保证顺序

若要遍历对象自身的可枚举属性，使用 hasOwnProperty() 方法来确定属性是否时对象自身属性

Object.getOwnPropertyNames(obj) ，返回对象自身可枚举或不可枚举属性

反正已经扯远了，那就再扯远一点， Object.assign() 方法将所有可枚举属性的值从一个或多个源对象复制到目标对象

js数组对象的几种遍历方式

猜你喜欢