遍历对象
| 办法 | 规范 | 形容 | 返回值 | 特点 |
|---|---|---|---|---|
| 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 friendObject.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 offunction 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 100test()//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)}//forEachconsole.time('forEach')var result1=[];data.forEach(item=>{ result1.push(item);})console.timeEnd('forEach') //39ms//mapconsole.time('map')var result2=[];data.map(item=>{ result2.push(item);})console.timeEnd('map') //33.ms//for ofconsole.time('for...of')var result3=[];for(var item of data){ result3.push(item)}console.timeEnd('for...of') //25.ms//for inconsole.time('for...in')var result4=[];for(var item in data){ result4.push(data[item])}console.timeEnd('for...in') //169ms//forconsole.time('for循环')var result5=[];for(var i=0;i<data.length;i++){ result5.push(data[item])}console.timeEnd('for循环') //17ms