巧記 In/hasOwnProperty/for…in/for…of/forEach區別

寫在前面

上面提到的這些東西，反覆的記憶，反覆的忘記。現分享一種巧記方法，有須要，請參考，但願你也過目不忘。

僅提供巧記思路。僅提供巧記思路。僅提供巧記思路。

1. in

用於判斷屬性是否在對象上(包括繼承而來的原型)。(小孩才作選擇，我全要^_^)
經過in的英文意思，這個不可能記混淆。

2. hasOwnProperty

用於判斷屬性是否爲自身屬性(僅僅自身，不包括繼承而來的)。
經過own的英文意思，這個也不可能混淆

3. for...in

根據1中提到的in記憶。這個是用來遍歷對象的，且連原型上的屬性也包括。
若是做用在數組上，則把其當作對象來對待。

4. for...of

已經有了個兄弟（for...in）用來遍歷對象，爲了公平起見，ES2016「憋出」個用來遍歷數組的東西。

5. forEach

這傢伙與map、reduce、filter之類的都是ES2015新增內容。聯想起來，它做用於數組，且回調函數的參數爲(value, key)這種順序。初略來看，一個數組中value的意義高於key的意義，因此有了這樣的順序。

6. 這樣一來，這些東西就不會搞混淆了。

機智如我。😜

7. 接下來寫個demo加深印象，之後碰到絕對不會忘記、混淆了。

// node 環境跑一下試試

function divider(title) {
  console.log("--------------------");
  console.log(`${title}`);
}

function forIn(data) {
  for (value in data) {
    console.log(`for value in [${data.toString()}] : value = `, value);
  }
}

function forOf(data) {
  for (value of data) {
    console.log(`for value of [${data.toString()}] : value = `, value);
  }
}

function useIn(data, target) {
  console.log(`${data} in [${target.toString()}] : `, data in target);
}

class Obj {
  constructor() {
    this.bar = 345; // 實例屬性
    this.__proto__.foo = 123; // 原型屬性
  }
}

const obj = new Obj();
const arr = ["a", "b"];

divider("for in 遍歷對象");
forIn(obj); // bar foo

divider("for in 遍歷數組");
forIn(arr); // 0 1

divider("in 做用於對象");
useIn("foo", obj); // true
useIn("bar", obj); // true

divider("in 做用於數組");
useIn("a", arr); // false
useIn("b", arr); // false
useIn(1, arr); // true

divider("for of 遍歷數組");
forOf(arr); // a, b
divider("for of 遍歷對象");
forOf(obj); // 報錯，無可遍歷接口

輸出結果：