JS-遍历(对象，数组)

let obj = {
    name: '哲浩',
    age: 18,
    [Symbol(1)]: 'Symbol-1'
}

原型添加一个属性

Object.prototype.city = '深圳'

对象上添加一个不可枚举属性

Object.defineProperty(obj, 'area', {
    value: '宝安',
    enumerable: false
})

一、 object遍历

1、for-in
for…in 可以在任意顺序遍历一个对象的除Symbol以外的可枚举属性
for…in 遍历时上升到原型链的层次，不仅会遍历自身的属性，还会遍历继承获得的属性

for (let key in obj) {
    // console.log(key, obj[key])
    // 使用hasOwnProperty()就不会遍历本身对象之外的属性
    if (obj.hasOwnProperty(key)) {
        // console.log(key, obj[key])
    }
}
// 打印结果
// name 哲浩
// age 18
// city 深圳

// 结论 不可枚举属性(不显示)，继承属性(显示)，Symbol(不显示)

2、Object.keys()
Object.keys()会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的一致

for (const key of Object.keys(obj)) {
    // console.log(key, obj[key])
}
// 打印结果
// name 哲浩
// age 18

// 结论 不可枚举属性(不显示)，继承属性(不显示)，Symbol(不显示)

3、Object.entries()
Object.entries(obj) 返回一个给定对象自身可枚举属性的键值对数组，其排列与for…in循环遍历该对象时返回的顺序一致（区别在于for…in循环会枚举原型链中的属性）

for (const [key, value] of Object.entries(obj)) {
    // console.log(`${key}:${value}`)
}
// 打印结果
// name 哲浩
// age 18

// 结论 不可枚举属性(不显示)，继承属性(不显示)，Symbol(不显示)

4、Object.values()
Object.values() 返回一个给定对象自身可枚举属性值的数组，值得顺序与for…in循环遍历该对象时返回的顺序一致（区别在于for…in循环会枚举原型链中的属性）

for (const value of Object.values(obj)) {
    // console.log(value)
}
// 打印结果
// 哲浩
// 18

// 结论 不可枚举属性(不显示)，继承属性(不显示)，Symbol(不显示)

5、Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames(obj) 返回一个由指定对象的所有“自身属性”的属性名(包括不可枚举属性单不包括Symbol值作为名称的属性)组成的数组

for (const key of Object.getOwnPropertyNames(obj)) {
    // console.log(key, obj[key])
}
// 打印结果
// name 哲浩
// age 18
// area 宝安

// 结论 不可枚举属性(显示)，继承属性(不显示)，Symbol(不显示)

6、Object.getOwnPropertySymbols()
Object.getOwnPropertySymbols() 返回⼀个给定对象⾃身的所有 Symbol属性的数组

沿⽤之前的obj,并添加⼀个不可枚举Symbol属性

Object.defineProperty(obj, Symbol(2), {
    value: 'Symbol-2',
    enumerable: false
})

原型添加⼀个Symbol属性

Object.prototype[Symbol(3)] = 'Symbol-3'

for (const key of Object.getOwnPropertySymbols(obj)) {
    // console.log(key)
}
// 打印结果
// Symbol(1)
// Symbol(2)

// 结论 不可枚举属性(显示)，继承属性(不显示)，Symbol(显示)

二、Array遍历

使⽤样本数组，循环执⾏10次

1、for循环

for (let i = 0; i < array.length; i++) {
    // 通过下标获取元素
    // let item = array[i]
}

平均性能为8.75ms

对代码进⾏优化，使⽤临时变量作为数组⻓度

for (let i = 0, len = array.length; i < len; i++) {
    // 通过下标获取元素
    // let item = array[i]
}

平均性能为7.47ms

2、Array.prototype.forEach()

array.forEach((item, index) => {
    // 回调函数可获取到元素item、下标index
 })

平均性能为106.42ms

3、for-of

for (let item of array) {
    // 获取到元素item
}

平均性能为142.20ms

4、for-in

for (let i in array) {
    // 循环获取到的是数组下标，再通过下标获取元素
    // let item = array[i]
}

平均性能为3420.81ms

总结

方法	性能	描述
for循环	平均性能8.75ms，优化后7.47ms	性能最优，根据下标获取元素
Array.prototype.forEach()	平均性能为106.42ms	性能好，回调函数中可同时获取下标、元素，不可break、return
for-of	平均性能为142.20ms	性能好，直接获取元素
for-in	平均性能为3420.81ms	性能差，不建议