lodash相关技巧

notebin 发布于2019-08-21 16:51 / 2751人阅读

摘要：变量和方法类型的变量中只用类型和类型平时使用的字符串应该是类型，应该是出现这样的情况，因为时候，转换成了类型在明确指出变量类型的转换所以类型的是的，而是的，对与类型的变量，为其赋值，本质上就是让变量指向新的内存。

变量和方法 类型

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/

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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