共计 2885 个字符，预计需要花费 8 分钟才能阅读完成。
遍历对象
| 办法 | 规范 | 形容 | 返回值 | 特点 |
|---|---|---|---|---|
| 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
正文完
