• 常用 JavaScript 小技巧及原理详解


    善于利用JS中的小知识的利用,可以很简洁的编写代码

    1. 使用!!模拟Boolean()函数

    原理:逻辑非操作一个数据对象时,会先将数据对象转换为布尔值,然后取反,两个!!重复取反,就实现了转换为布尔值的效果。

    2. 使用一元加(+)模拟Number()函数

    原理:对非数值类型的数据使用一元加(+),会起到与Number()函数相同的效果。

    • null转换为0

    • undefined转换为NaN

    • false转换为0,true转换为1

    • 对于字符串:

      • 空字串转换为0

      • 含有数字或者浮点数或者十六进制格式的数据(11, 0.3, 0xfe等),转换为相应的数值

      • 含有其他格式字符,无法转换为数值的字符串,转换为NaN

    • 对于对象,先调用valueOf()方法,在转换,若结果为NaN,那么再调用toString()方法,之后再转换

    3. 使用逻辑与(&&)进行短路操作

    if(connected){
        login();
    }

    以上代码可以简化为

    connected &login()

    也可以用这种方法来检查对象中是否存在某个属性

    user && user.login

    原理:逻辑与(&&)会首先对第一个操作数进行求值,只有求值结果为true时才会对第二个操作数求值。connected && login()中,若判断connected不为true,则不再进行下一步操作。
    所谓的短路操作即第一个操作数可以决定结果,则不再对第二个操作数进行求值。

    4. 使用逻辑或(||)设置默认值

    逻辑或(||)也属于短路操作,即当第一个操作数可以决定结果时,不再对第二个操作数进行求值。利用这个特点,我们可以给赋值语句设置默认值。只有当第一个操作数为null或者undefined时,才会把第二个操作数赋值给目标。

    function User(name, age){
        this.name = name || "Liming";
    }

    上述代码中,如果函数中没有传入name参数,name的值为undefined,那么就会给this.name赋值为"Liming"。
    ES6中可以为函数设置默认值,所以这个无需在函数中使用,但是其他地方还是很有用的。

    5. 获取数组最后n个元素

    可以使用以下代码获取数组中最后n个元素

    var array = [1, 2, 3, 4, 5, 6];
    console.log(array.slice(-1));  //[6]
    console.log(array.slice(-2));  //[5, 6]

    原理:Array.prototype.slice(begin,end)可以用来裁剪数组,第二个参数的默认值是数组的长度值。若值传入一个参数,则会返回从指定索引开始到数组结尾的所有值。
    而slice()方法还可以接收负值,当传入负值时,会自动加上数组的长度值使其转换为正值,于是便得到了最后的n个值。

    6. 合并大数组

    常用的合并数组的方式是使用Array.concat()函数。该函数会创建一个新数组,将两个数组连接起来存储到新数组中,这会大量消耗内存。可以使用Array.push.apply(arr1, arr2),它不会创建新数组,而是将第二个数组合并到第一个数组中,以减少内存的消耗。

    var a = [1,2];
    var b = [3,4];
    console.log(a.push.apply(a, b));      // [1,2,3,4]
    //或者
    console.log(Array.prototype.push.apply(a, b));      // [1,2,3,4]

    原理: Array.push()是在数组的末尾增加元素,但是如果使用a.push(b)会把整个数组b当作一个元素添加到数组a中。
    而apply()方法,则允许将某个方法的参数以数组的形式传入,所以起到了将数组b中的元素追加到数组a中的效果。

    7. NodeList转换为数组

    使用document.querySelectorAll('div')返回的是NodeList对象,虽然它很像数组,但是并不能使用诸如sort(),filter()等方法。你可以将其转换为真正的数组。

    var eles = document.querySelectorAll('p');  //NodeList
    var arrayElements = [].slice.call(eles);       //转化为数组
    // 或者
    var arrayElements = Array.prototype.slice.call(eles);
    // 或者
    var arrayElements = Array.from(eles);

    原理:

      • [].slice.call(eles):
        首先创建了一个空数组[],然后调用他的slice()方法,但是在slice()方法的执行中,把this对象指向了eles,所以会对eles进行裁减,由于对slice()方法没有传入参数,所以相当于slice(0,eles.length),会按照元长度返回一个数组。

      • Array.prototype.slice.call(eles): 原理与上面相似,只不过这次没有创建空数组,而是直接使用了原型中的方法

      • Array.from()
        Array.from()接受一个类数组对象或者可迭代对象,基于该对象创建一个新的Array实例。详解看这里

  • 相关阅读:
    解决MyBatis的Mapper XML错误,系统起不来,也不报错问题
    tomcat启动卡在“INFO com.alibaba.druid.pool.DruidDataSource
    加速github访问速度
    LAN、WAN和WLAN的区别
    面试记录一
    C++纯虚函数(接口类)的使用
    CentOS 安装 Docker CE
    通过 plsql 连接远程 Oracle
    Yum 软件仓库配置
    qW3xT.2,解决挖矿病毒
  • 原文地址:https://www.cnblogs.com/sybboy/p/6963632.html
Copyright © 2020-2023  润新知