对象、数组的遍历方法总结

遍历对象

方法	标准	描述	返回值	特点
for...in	ES5	遍历对象的所有可枚举属性	可枚举 原型链上可枚举	包含原型链上的可枚举属性 可break
Object.keys()	ES5	返回对象所有可枚举属性	可枚举	返回的数组中的值都是字符串（不是也转string）
Object.getOwnPropertyNames()	ES6	对象自身的所有属性名	可枚举 不可枚举	包含不可枚举的属性
Object.getOwnPropertySymbols()	ES6	返回对象自身的Symbol属性组成的数字，不包含字符串复兴	symbol属性的值(可枚举和不可枚举)
Reflect.ownKeys()	ES6	返回一个数组，包含对象自身的所有属性	可枚举 不可枚举 symbol类型
Object.values()	ES8	返回对象所有可枚举属性值的数组	可枚举
Object.entries()	ES8	返回对象自身可枚举属性的键值对数组	可枚举

js分为函数对象和普通对象，每个对象都有__proto__属性，只有函数对象才有prototype属性
Object.defineProperties()方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。该方法默认enumerable为false

可枚举属性：内部“可枚举(enumerable)”标志设置为true的属性
不可枚举属性：与可枚举属性相反

var obj=function(){
    this.name = "张三";
    this.age = 10
}; //构造函数
var newobj = new obj(); //创建实例，实例对象会继承构造函数的原型属性
obj.prototype.friend = "李四"; //在原型上添加属性

//在对象newobj上定义新的属性
Object.defineProperties(newobj,{
    "city":{
        value: "杭州",
        enumerable: true,//是否为枚举属性
    },
    "height":{
        value: '2m',
        enumerable: false,//是否为枚举属性
    },
    [Symbol('sex')]:{
        value: 'symbol_sex',
        enumerable: true
    },
})

for(var i in newobj){console.log(i)} //name age city friend
Object.keys(newobj) //["name", "age", "city"]
Object.getOwnPropertyNames(newobj) //["name", "age", "city", "height"]
Object.ownKeys(newobj) //["name", "age", "city", "height", Symbol(sex)]
Object.values(newobj) // ["张三", 10, "杭州"]
Object.entries(newobj) //[["name", "张三"],["age", 10],["city", "杭州"]]
Object.getOwnPropertySymbols(newobj) //[Symbol(sex)]

遍历数组

方法	标准	特点	break
forEach()	ES5	不改变原数组 无返回值	否
map()	ES5	不改变原始数据 返回一个新数组	否
for of	ES6		是
for await of	ES9	异步遍历	是
filter()	ES6	不改变原数组 返回符合条件的元素	否
some() every()	ES6	不改变原数组 返回true或false	否
reduce()	ES6	累加器 不改变原数组	否
find()	ES6	返回第一个符合条件的元素 不改变原数组	否
findIndex()	ES6	返回第一个符合条件的索引值 不改变原数组	否
keys()	ES6	返回数组的索引值	否
values()	ES6	返回数组的元素	否
entries()	ES6	返回数组的键值对	否

//for await of
function Gen (time) {
    return new Promise((resolve,reject) => {
        setTimeout(function () {
            resolve(time)
        },time)
    })
}
async function test () {
    let arr = [Gen(2000),Gen(100),Gen(3000)]
    for await (let item of arr) {
        console.log(Date.now(),item)
        if(item===100){
            break;
        }
    }
}
// 1648631137863 2000
// 1648631137863 100
test()

//keys()、values()、entries()
var arr = ["周一","周二","周三"];
var iterator1 = arr.keys();
var iterator2 = arr.values() 
var iterator3 = arr.entries() 

for (let item of iterator1) {
  console.log(item); // 0 1 2
}
for (let item of iterator2) {
  console.log(item); // 周一 周二 周三
}
for (let item of iterator3) {
  console.log(item); //[0,"周一"] [1,"周二"] [2,"周三"]
}

其它循环

方法	表列 B	特点	break
for	循环代码块一定的次数		是
while	当指定的条件为 true 时循环指定的代码块	先判断再执行	否
do...while	直重复直到指定的条件为false	先执行再判断	否

性能比较

var data=[];
for(var i=0;i<1000000;i++){
    data.push(i)
}

//forEach
console.time('forEach')
var result1=[];
data.forEach(item=>{
    result1.push(item);
})
console.timeEnd('forEach') //39ms

//map
console.time('map')
var result2=[];
data.map(item=>{
    result2.push(item);
})
console.timeEnd('map') //33.ms

//for of
console.time('for...of')
var result3=[];
for(var item of data){
    result3.push(item)
}
console.timeEnd('for...of') //25.ms

//for in
console.time('for...in')
var result4=[];
for(var item in data){
    result4.push(data[item])
}
console.timeEnd('for...in') //169ms

//for
console.time('for循环')
var result5=[];
for(var i=0;i<data.length;i++){
    result5.push(data[item])
}
console.timeEnd('for循环') //17ms