lodash相關技巧

變量和方法

---

類型

• js的變量中只用primitive類型和object類型

• 平時使用的字符串應該是primitive類型，應該是not an object and has no methods

  const str = 'hello';
       console.log(str.charAt(0));
       // output: h
       Object.prototype.toString.call(str)
       // output: [object String]複製代碼

• 出現這樣的狀況，由於str.charAt時候，String(primitive)轉換成了String(object)類型在ECMAScript Language Specification&8.7.1 明確指出變量類型的轉換
• 因此primitive類型的value是immutable的，而variable是mutable的，對與primitive類型的變量，爲其賦值，本質上就是讓變量指向新的內存。

---

lodash相關技巧和實例

• N次循環技巧

  for(let i = 0; i < 5; i++) {
      // ...
  }
  Array.apply(null, Array(5)).forEach(() => {
      // ...
      });
  _.times(5, () => {
      // ...
      };複製代碼

• 深層次查找屬性

  const ownerArr = [{
      "owner": "Colin",
        "pets": [{"name":"dog1"}, {"name": "dog2"}]
      }, {
          "owner": "John",
          "pets": [{"name":"dog3"}, {"name": "dog4"}]
      }];
  
      ownerArr.map(owner => {
          return owner.pets[0].name;
          });
  
      _.map(ownerArr, 'pets[0].name');複製代碼

• 數組獨立

  Array.apply(null, Array(6)).map( (item, index) => {
      return "ball_" + index;
      });
  
      _.times(6, _.uniqueId.bind(null, 'ball_'));
  
      _.times(6, _.partial(_.uniqueId, 'ball_'));
      // output: [ball_0, ball_1, ball_2, ball_3, ball_4, ball_5]複製代碼

• 對象擴展(能夠直接用Object.assgin(), 底層同樣的實現）

  Object.prototype.extend = obj => {
      for (let i in obj) {
            if (obj.hasOwnProperty(i)) {
              this[i] = obj[i];
            }
      }
  };
      const objA = {"name": "colin", "car": "suzuki"};
      const objB = {"name": "james", "age": 17};
  
      objA.extend(objB);
      console.log(objA); 
      // {"name": "james", "age": 17, "car": "suzuki"};
  
      _.assign(objA, objB);
      // {"name": "james", "age": 17, "car": "suzuki"};
  
      // ES6
      Objetct.assign({}, objA, objB);
      // {"name": "james", "age": 17, "car": "suzuki"};
      //_.assign 是淺拷貝，因此會覆蓋name複製代碼

• 補充做用域：

  const test = '1';
  testOne() {
      return testTwo{
          cosole.log(test);
      };
      const test = '2';
  }
  testOne()();
  // output: undefined 
  const test = '1';
  testOne() {
      return testTwo{
          console.log(test);
      };
      test = '2';
  }
  // output: 1;複製代碼

  由於從新定義了const，他在搜索做用域時候，會自上到下搜索聲明的變量，若是沒有聲明，查找纔會進去下一層，此處輸出undefined，由於在testOne（）裏面const以前就使用了test，因此就輸出了undefined,而在第二個例子裏面沒有聲明test，因此他就跳轉出去，去下一層尋找test，即輸出爲1

  • 做用域提高

  const a = 1;
      b(){
          const a = b = 2;
      }
      console.log(a, b);
      // 拋出異常，由於ｂ沒有定義
  
      b();
      console.log(a, b);
      //output: 1,2;
      // const a = b = 2 等價於　在全局聲明const b = 2; 內部聲明const a = b;由於=運算符是重右像左運算的複製代碼

---

附錄

• MDN鏈接文檔
• lodash相關技巧
• 10個ES6能夠代替lodash的方法

---

• 但願各位大佬來補充和改錯，相互交流
• Github地址: github.com/smile-soul
• 我的Blog: www.smilesoul.cn/