对象、数组的遍历方法总结
遍历对象
| 方法 | 标准 | 描述 | 返回值 | 特点 |
|---|---|---|---|---|
| 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=https://www.it610.com/article/[];
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推荐阅读
- web前端学习圈|推荐 9 个 GitHub 上练手项目（在线考试、仿美团、仿抖音、仿B站、仿头条...）
- 数据库|MySQL表锁、行锁、排它锁和共享锁
- 数据库|MySQL数据类型、运算符以及数据库范式
- 保姆教程系列三、Nacos|保姆教程系列三、Nacos Config--服务配置
- java线程创建和使用_Java 多线程 之 线程的创建和使用
- 笔记|嵌入式网络的基础知识
- python二维数组切片规则_python中数组切片含义解析
- python|python 三维数组 txt_python（其他语言也可以）如何保存和拼接三维数组（）
- java面向对象学习|初学java（斐波那契数列的java实现）
- C++面向对象程序设计