如何建设和优化一个网站,工作室 网站经营性备案,站长之家是干什么的,wordpress 移动端跳转for in
如果让你遍历对象中的key和value#xff0c;你第一个想到的一定是使用for in
const o{name:chengqige,age:23
}
for (let key in o){console.log(key,o[key]);
}看起来是没有问题的#xff0c;但是如果我在下面加一行代码#xff0c;输出的结果就可能让…for in
如果让你遍历对象中的key和value你第一个想到的一定是使用for in
const o{name:chengqige,age:23
}
for (let key in o){console.log(key,o[key]);
}看起来是没有问题的但是如果我在下面加一行代码输出的结果就可能让你觉得奇怪了
const o {name: chengqige,age: 23
}
Object.prototype.getName function () {}
Object.prototype.test 12
for (let key in o) {console.log(key, o[key]);
}你会发现for in多打印出了两行东西它们分别是Object原型上的方法和属性getName和test 那么这个是为什么呢 因为for in会打印原型上的所有可以被枚举的方法 什么是可枚举
在JS中我们给一个对象添加属性一共有三种办法
1.通过点语法直接添加属性
const o{}
o.a1
for(let key in o){console.log(key)
}输出结果a 2.通过动态索引添加 什么是动态索引我们普遍认为一个对象的key是写死的value是变量key不可编程value可以被赋值
// 变量
const value12
const o{写死的:value
}但是实际上我们的 key也是可以用变量控制的请看下面的例子
const value12
const key 动态索引
const o{[key]:value
}我们使用[]来扩起来变量表示这个属性是动态的是有外部变量控制的 3.通过API添加 es6新增一个API可以直接为对象添加属性
const o {b: 12
}
Object.defineProperty(o, a, {get() {return 1}
})
for (let key in o) {console.log(key);
}
console.log(i am here, o.a)但是它的输出结果是
问题出现了为什么for in没有出这个属性a但是我们使用o.a可以打印出来它 因为for in只能遍历可以被枚举的属性我们改造一下代码让我们新添加的a是可以被枚举的就好了
Object.defineProperty(o, a, {get() {return 1},// 新增enumerable: true
})这一次我们发现for in打印的结果就有a了
什么是原型
原型是与生俱来固有的对象原型里有很多开箱即用的方法因此在创建某些对象的同时这个方法就可以被使用了。 比如数组中的push、pop、shift、unshift 任何数组都可以用它们难道不是嘛
var arr []
arr.push(1,2,3,4)
// [1,2,3,4]那么这些原型上的方法是官方的所以它们是不可以被枚举的那么用for…in遍历它是没有的
// 这个点语法创造的天生可以被枚举动态索引也是
Array.prototype.mine function(){}
for (let key in Array.prototype){console.log(key,只有可以枚举的才会出现哦)
}如果你在浏览器环境下运行这个代码
scriptArray.prototype.mine function () { }console.log(Array.prototype);for (let key in Array.prototype){console.log(key,只有可以枚举的才会出现哦)}
/script深色的表示这些属性是可以被枚举的浅色的表示这些属性是不可被枚举的谷歌浏览器用颜色深浅来划分 那么我们可以不可以让这些不可枚举的方法设置成可枚举的呢当然可以
Array.prototype.mine function () { }
Object.defineProperty(Array.prototype, push, {get(){return 1},enumerable: true})console.log(Array.prototype);for (let key in Array.prototype) {console.log(key, 只有可以枚举的才会出现哦)}let arr[]arr.push(1,3)console.log(arr);总结
for … in不是一个很好的方法它会把原型链上所有可枚举的方法打印
Object.prototype.mine function () { }
Array.prototype.okkk function () { }
let arr [1, 2, 3]
for (let key in arr) {console.log(key)
}const o {name: chengqige,age: 23
}
Object.prototype.getName function () {}
Object.prototype.test 12
for (let key in o) {console.log(key, o[key]);
}替代方案
Object.keys(o).forEach()
const o {name: chengqige,age: 23
}
Object.prototype.getName function () {}
Object.prototype.test 12
Object.keys(o).forEach(key{console.log(key, o[key]);
})for inhasOwnProperty
const o {name: chengqige,age: 23
}
Object.prototype.getName function () {}
Object.prototype.test 12
for (let key in o) {if(o.hasOwnProperty(key)){console.log(key, o[key]);}
}上面两种的输出结果都是
