经常使用JavaScript小技能及道理详解

2024年4月9日 189次阅读 来源: 胡不归

擅长应用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. 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实例。详解看这里

    原文作者：胡不归
    原文地址: https://segmentfault.com/a/1190000009649740
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞