常用 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实例。详解看这里
时间: 2024-12-13 20:38:06

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

iOS-本地推送和远程推送,常用的三方推送和常用的测试方法,推送实现和原理详解(转载自薛银亮 [email protected])

原文地址:http://www.cnblogs.com/66it/p/4784224.html iOS-本地推送和远程推送,常用的三方推送和常用的测试方法,推送实现和原理详解 什么是消息推送 举一个常见的例子,我们的手机上经常会有弹出一些信息,例如QQ信息.微信信息等等,这就是常见的消息推送. 例如: 消息推送的类型: 在屏幕顶部显示一块横幅(显示具体内容) 在屏幕中间弹出一个UIAlertView(显示具体内容) 在锁屏界面显示一块横幅(锁屏状态下,显示具体内容) 更新app图标的数字(说明新

常用的javascript小技巧

字符串转换为数值 常规方法: var var1 = parseInt("2"); var var2 = parseFloat("2"); var var3 = Number("2"); var var3 = new Number("2"); 简便方法: var var1 = +("2"); 将其他类型转换为boolean类型 在JavaScript中,所有值都能隐式的转化为Boolean类型: 数据类型 转

Influxdb原理详解

本文属于<InfluxDB系列教程>文章系列,该系列共包括以下 15 部分: InfluxDB学习之InfluxDB的安装和简介 InfluxDB学习之InfluxDB的基本概念 InfluxDB学习之InfluxDB的基本操作 InfluxDB学习之InfluxDB的HTTP API写入操作 InfluxDB学习之InfluxDB数据保留策略(Retention Policies) InfluxDB学习之InfluxDB连续查询(Continuous Queries) InfluxDB学习之

SVM -支持向量机原理详解与实践之三

SVM -支持向量机原理详解与实践之三 什么是核 什么是核,核其实就是一种特殊的函数,更确切的说是核技巧(Kernel trick),清楚的明白这一点很重要. 为什么说是核技巧呢?回顾到我们的对偶问题:     映射到特征空间后约束条件不变,则为:     在原始特征空间中主要是求,也就是和的内积(Inner Product),也称数量积(Scalar Product)或是点积(Dot Product),映射到特征空间后就变成了求,也就是和的映射到特征空间之后的内积,就如我前面所提到的在原始空间

图像处理中的数学原理详解18——内积与外积

欢迎关注我的博客专栏"图像处理中的数学原理详解" 全文目录请见 图像处理中的数学原理详解(总纲) http://blog.csdn.net/baimafujinji/article/details/48467225 图像处理中的数学原理详解(已发布的部分链接整理) http://blog.csdn.net/baimafujinji/article/details/48751037 1.3.2 内积与外积 因为cos(π/2)=0.当然,这也是众多教科书上介绍向量内积最开始时常常用到的一

快速傅立叶变换算法FFT——图像处理中的数学原理详解22

欢迎关注我的博客专栏"图像处理中的数学原理详解" 全文目录请见 图像处理中的数学原理详解(总纲) http://blog.csdn.net/baimafujinji/article/details/48467225 图像处理中的数学原理详解(已发布的部分链接整理) http://blog.csdn.net/baimafujinji/article/details/48751037 交流学习可加图像处理研究学习QQ群(529549320) 傅立叶变换以高等数学(微积分)中的傅立叶级数为基

AES 加密算法的原理详解

AES 加密算法的原理详解 本教程摘选自 https://blog.csdn.net/qq_28205153/article/details/55798628 的原理部分. AES简介 高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的).对称加密算法也就是加密和解密用相同的密钥,具体的加密流程如下图: 下面简单介绍下各个部分的作用与意义: 明文P 没有经过加密的数据. 密钥K 用来加密明文的密码,在对称

Redis实战和核心原理详解(5)使用Spring Session和Redis解决分布式Session跨域共享问题

Redis实战和核心原理详解(6)使用Spring Session和Redis解决分布式Session跨域共享问题 前言 对于分布式使用Nginx+Tomcat实现负载均衡,最常用的均衡算法有IP_Hash.轮训.根据权重.随机等.不管对于哪一种负载均衡算法,由于Nginx对不同的请求分发到某一个Tomcat,Tomcat在运行的时候分别是不同的容器里,因此会出现session不同步或者丢失的问题. 实际上实现Session共享的方案很多,其中一种常用的就是使用Tomcat.Jetty等服务器提

SVM-支持向量机原理详解与实践之一

目录(?)[+] 前言 SVM机器学习与深度学习 人工智能领域 机器学习与深度学习 SVM简介 SVM原理分析 快速理解SVM原理 线性可分和线性不可分 函数间隔和几何间隔 超平面分析与几何间隔详解 二次最优化 SVM-支持向量机原理详解与实践 前言 去年由于工作项目的需要实际运用到了SVM和ANN算法,也就是支持向量机和人工神经网络算法,主要是实现项目中的实时采集图片(工业高速摄像头采集)的图像识别的这一部分功能,虽然几经波折,但是还好最终还算顺利完成了项目的任务,忙碌一年,趁着放假有时间好好