善于利用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实例。详解看这里

常用 JavaScript 小技巧及原理详解的更多相关文章

  1. 高性能JavaScript模板引擎实现原理详解

    这篇文章主要介绍了JavaScript模板引擎实现原理详解,本文着重讲解artTemplate模板的实现原理,它采用预编译方式让性能有了质的飞跃,是其它知名模板引擎的25.32 倍,需要的朋友可以参考 ...

  2. 常用的一些javascript小技巧

    (转载)常用的一些javascript小技巧: http://bbs.blueidea.com/thread-2201069-1-1.html

  3. iOS开发--常用技巧 (MJRefresh详解)

         iOS开发--常用技巧 (MJRefresh详解) https://github.com/CoderMJLee/MJRefresh 下拉刷新01-默认 self.tableView.head ...

  4. jQuery中getJSON跨域原理详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...

  5. Influxdb原理详解

    本文属于<InfluxDB系列教程>文章系列,该系列共包括以下 15 部分: InfluxDB学习之InfluxDB的安装和简介 InfluxDB学习之InfluxDB的基本概念 Infl ...

  6. Batchnorm原理详解

    Batchnorm原理详解 前言:Batchnorm是深度网络中经常用到的加速神经网络训练,加速收敛速度及稳定性的算法,可以说是目前深度网络必不可少的一部分. 本文旨在用通俗易懂的语言,对深度学习的常 ...

  7. AES 加密算法的原理详解

    AES 加密算法的原理详解 本教程摘选自 https://blog.csdn.net/qq_28205153/article/details/55798628 的原理部分. AES简介 高级加密标准( ...

  8. 最强常用开发库总结 - JSON库详解

    最强常用开发库总结 - JSON库详解 JSON应用非常广泛,对于Java常用的JSON库要完全掌握.@pdai JSON简介 JSON是什么 JSON 指的是 JavaScript 对象表示法(Ja ...

  9. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

随机推荐

  1. c# HighCharts使用

    最近接到个图形报表的需求,网络上找了几个插件,最后决定用highcharts 需要的文件 1.bll文件,添加到项目引用   http://files.cnblogs.com/files/loveju ...

  2. 如何实现一个IOS网络监控组件

    此文由作者朱志强授权网易云社区发布. Mobile Application Monitor IOS组件设计技术分享 背景 应用程序性能管理Application Performance Managem ...

  3. 【总结】 BZOJ1000~1099板刷计划

    Tham又布置了一大堆题目,但是因为我TCL完全不会做,所以只能切切BZOJ的题目,划划水,要不是xz的面子大,我就已经被赶出了CJ信息组了QwQ(聂已己是神仙!) 1000 A+B这种入门题就不用写 ...

  4. iOS View 外层奇怪的黑线

    最近碰到一个问题,当时是为了建了一个能自动适应内容的 Label.根据内容,我计算出需要的尺寸,然后把新尺寸设置给 Label. 但是显示的时候,一个奇怪的现象出现了,Label 的顶端总是有一条浅浅 ...

  5. 【OCP-12c】CUUG 071题库考试原题及答案解析(14)

    14.(6-13) choose the best answer:View the Exhibit and examine the structure of the ORDERS table.Whic ...

  6. java使用Redis5--分布式存储

    Redis实现分布式存储的方法主要是采用一致性哈稀分片(Shard),将不同的key分配到不同的redis server上,达到横向扩展的目的. package redis; import java. ...

  7. SpringBoot 异步线程简单三种样式

    引用:在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在Spring 3.x ...

  8. Linux(Ubuntu)新建用户只有一个$问题

    参考自: http://www.cnblogs.com/ylan2009/articles/2321177.html 1.用root登录操作 2.查看/etc/passwd文件中新建用户的权限 有没有 ...

  9. sort函数详解(史上最完整QAQ)

    1.sort 使用:#include <algorithm>   using namespace std; 作用:排序 时间复杂度:n*lg(n) 实现原理:sort并不是简单的快速排序, ...

  10. L03-Linux RHEL6.5系统中配置本地yum源

    1.将iso镜像文件上传到linux系统.注意要将文件放在合适的目录下,因为后面机器重启时还要自动挂载,所以此次挂载成功之后该文件也不要删除. 2.将iso光盘挂载到/mnt/iso目录下. (1)先 ...