lodash相關技巧

notebin 發布于2019-08-21 16:51 / 2839人閱讀

摘要：變量和方法類型的變量中只用類型和類型平時使用的字符串應該是類型，應該是出現這樣的情況，因為時候，轉換成了類型在明確指出變量類型的轉換所以類型的是的，而是的，對與類型的變量，為其賦值，本質上就是讓變量指向新的內存。

變量和方法 類型

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地址: https://github.com/smile-soul

個人Blog: http://www.smilesoul.cn/

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88815.html

大多數項目中會用到的webpack小技巧

摘要：只在中有效你的文件在開發者工具中顯示為。參考鏈接清除日志如果你在使用時看過下面的調試日志你可以使用來關閉它參考鏈接總結以上就是總結的條關于的建議，這幾乎是所有項目都用得到的配置技巧吧原文地址本文是作者對自己所學的webpack技巧的總結，在沒有指定特殊情況下適用于webpack 3.0版本。進度匯報使用webpack --progress --colors這樣可以讓編譯的輸出...

Nekron 2019-08-02 15:58 評論0 收藏0
大多數項目中會用到的webpack小技巧

摘要：只在中有效你的文件在開發者工具中顯示為。參考鏈接清除日志如果你在使用時看過下面的調試日志你可以使用來關閉它參考鏈接總結以上就是總結的條關于的建議，這幾乎是所有項目都用得到的配置技巧吧原文地址本文是作者對自己所學的webpack技巧的總結，在沒有指定特殊情況下適用于webpack 3.0版本。進度匯報使用webpack --progress --colors這樣可以讓編譯的輸出...

番茄西紅柿 2019-08-29 13:55 評論0 收藏0
大多數項目中會用到的webpack小技巧

摘要：只在中有效你的文件在開發者工具中顯示為。參考鏈接清除日志如果你在使用時看過下面的調試日志你可以使用來關閉它參考鏈接總結以上就是總結的條關于的建議，這幾乎是所有項目都用得到的配置技巧吧原文地址本文是作者對自己所學的webpack技巧的總結，在沒有指定特殊情況下適用于webpack 3.0版本。進度匯報使用webpack --progress --colors這樣可以讓編譯的輸出...

alin 2019-08-21 17:52 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0