五分鐘掌握 for...in 和 for...of 區(qū)別

BearyChat 發(fā)布于2019-08-23 12:27 / 1625人閱讀

摘要：地址，歡迎，查看更多整理的前端知識語句以任意順序遍歷一個對象的可枚舉屬性。在每次迭代時，將不同的屬性名分配給變量。對于的循環(huán)，可以由或終止使用報錯。與區(qū)別語句以原始插入順序迭代對象的可枚舉屬性。

GitHub 地址，歡迎star，查看更多整理的前端知識

for...in

for...in 語句以任意順序遍歷一個對象的可枚舉屬性。
for...in 遍歷對象本身的所有可枚舉屬性，以及對象從其構(gòu)造函數(shù)原型中繼承的屬性。

for (variable in object) {...}

variable 在每次迭代時，將不同的屬性名分配給變量。

object 被迭代枚舉其屬性的對象。

只遍歷自身的可枚舉屬性，可以使用 hasOwnProperty

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}

for...of

for...of 語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上創(chuàng)建一個迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個不同屬性的值執(zhí)行語句。
對于for...of的循環(huán)，可以由break, throw 或return終止(使用return報錯？)。

for (variable of iterable) {
    //statements
}

variable 在每次迭代中，將不同屬性的值分配給變量。

iterable 被迭代枚舉其屬性的對象。

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

for...of 與 for...in 區(qū)別

for...in 語句以原始插入順序迭代對象的可枚舉屬性。

for...of 語句遍歷可迭代對象定義要迭代的數(shù)據(jù)。

區(qū)別示例：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // 3, 5, 7
}