摘要：使用一元加模拟函数原理对非数值类型的数据使用一元加，会起到与函数相同的效果。中，若判断不为则不再进行下一步操作。使用逻辑或设置默认值逻辑或也属于短路操作，即当第一个操作数可以决定结果时，不再对第二个操作数进行求值。
善于利用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,则不再进行下一步操作。
所谓的短路操作即第一个操作数可以决定结果，则不再对第二个操作数进行求值。
逻辑或(||)也属于短路操作，即当第一个操作数可以决定结果时，不再对第二个操作数进行求值。
利用这个特点，我们可以给赋值语句设置默认值。只有当第一个操作数为null或者undefined时，才会把第二个操作数赋值给目标。
function User(name, age){
this.name = name || "Liming";
}
上述代码中，如果函数中没有传入name参数，name的值为undefined，那么就会给this.name赋值为"Liming"。
ES6中可以为函数设置默认值，所以这个无需在函数中使用，但是其他地方还是很有用的。
可以使用以下代码获取数组中最后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个值。
使用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://www.ucloud.cn/yun/83307.html
摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...
摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永 我的书签 我的书签（谨慎导入，小心覆盖） 工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...
摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永 我的书签 我的书签（谨慎导入，小心覆盖） 工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...
阅读 3443·2021-09-13 10:28
阅读 1814·2021-08-10 09:43
阅读 870·2019-08-30 15:44
阅读 3025·2019-08-30 13:14
阅读 1637·2019-08-29 16:56
阅读 2801·2019-08-29 16:35
阅读 2720·2019-08-29 12:58
阅读 762·2019-08-26 13:46
