prototype與for in
阿新 • • 發佈:2018-03-31
完全 得到 con for word RR Language dex iter
循環,允許遍歷獲得鍵值。
《一》prototype
prototype其實是函數的一個屬性,並且只有函數有這個屬性,這個屬性就是給函數增加函數或者屬性的,比如寫一個
function one(){},那麽one.prototype的類型就是一個對象,使用JSON.stringify(one.prototype)得到的就是一個字符串類型的{}了,顯然是一個空的對象。
我添加一個name屬性試試,one.prototype.name="這是文本",再JSON.stringify(one.prototype)得到:{‘name’:‘這是文本‘}。
《二》for in
這個遍歷數組或者對象,首先得到的是索引或者是key值,比如
var arr=[3,4,1];
for(var index in arr){
console.log(index)//1,2,3
console.log(arr[index])//3,4,1
}
var obj={name:‘wang‘,age:11};
for(var index in obj){
console.log(index);//name,age
console.log(obj(index);//wang,11
}
而of是直接獲取值了。
再補充其他幾種循環遍歷的方法:
數組原生具備iterator
接口(即默認部署了Symbol.iterator
屬性),for...of
循環本質上就是調用這個接口產生的遍歷器,可以用下面的代碼證明。
const arr = [‘red‘, ‘green‘, ‘blue‘];
for(let v of arr) {
console.log(v); // red green blue
}
const obj = {};
obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);
for(let v of obj) {
console.log(v); // red green blue
}
上面代碼中,空對象obj
部署了數組arr
的Symbol.iterator
屬性,結果obj
的for...of
循環,產生了與arr
完全一樣的結果。
for...of
循環可以代替數組實例的forEach
方法。
const arr = [‘red‘, ‘green‘, ‘blue‘];
arr.forEach(function (element, index) {
console.log(element); // red green blue
console.log(index); // 0 1 2
});
JavaScript 原有的for...in
循環,只能獲得對象的鍵名,不能直接獲取鍵值。ES6 提供for...of
var arr = [‘a‘, ‘b‘, ‘c‘, ‘d‘];
for (let a in arr) {
console.log(a); // 0 1 2 3
}
for (let a of arr) {
console.log(a); // a b c d
}
上面代碼表明,for...in
循環讀取鍵名,for...of
循環讀取鍵值。如果要通過for...of
循環,獲取數組的索引,可以借助數組實例的entries
方法和keys
方法(參見《數組的擴展》一章)。
for...of
循環調用遍歷器接口,數組的遍歷器接口只返回具有數字索引的屬性。這一點跟for...in
循環也不一樣。
let arr = [3, 5, 7];
arr.foo = ‘hello‘;
for (let i in arr) {
console.log(i); // "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // "3", "5", "7"
}
上面代碼中,for...of
循環不會返回數組arr
的foo
屬性。
prototype與for in