别客气，11种在教程中难以找到的JavaScript技巧，请收下
全文共3721字，预计学习时长11分钟正则表达式
来源：Pexels数组
今天，小芯给你们整理11条很是好用的JavaScript技巧。浏览器
买不了吃亏，买不了上当，快来看看吧~缓存
1.获取数组的最后一项微信
设置起始参数和终止参数时，Array.prototype.slice(begin,end)具备剪切数组的功能。可是，若是未设置终止参数，该功能将自动设置为数组的最大值。app
该功能可接受负值，我想不少人对此并不了解，并且若是将起始参数设定为负数，那么会获得数组的最后几个元素：dom
- vararray = [1,2,3,4,5,6];
- console.log(array.slice(-1)); // [6]
- console.log(array.slice(-2)); // [5,6]
- console.log(array.slice(-3)); // [4,5,6]
2.用||运算符默认某值函数
目前的ES6有默认参数功能。为了在旧版浏览器中模拟该功能，你能够用||（OR运算符）默认某值，将其做为第二个可用的参数。工具
若是第一个参数返回到了false，那么第二个参数就会被视为默认值。请看这个例子：性能
- function User(name, age) {
- this.name = name || "OliverQueen";
- this.age = age || 27;
- }var user1 = new User();
- console.log(user1.name); // Oliver Queen
- console.log(user1.age); // 27var user2 = new User("Barry Allen", 25);
- console.log(user2.name); // Barry Allen
- console.log(user2.age); // 25
3.重组数组元素
想不用Lodash这样的外部工具库就能重组数组元素？试试下面这个神奇的函数：
- var list= [1,2,3];
- console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
4.短路条件
若是你看到一个代码相似于：
- if (connected) { login();
- }
能够经过结合使用变量（会被验证）和函数之间的&&（AND运算符）来缩短上述代码。好比，上述代码能够缩短为一行：
- connected && login();
你能够执行相同操做来检查对象中是否存在属性或函数。与如下代码相似：
- user && user.login();
5.截取数组
这项技巧能够锁定数组的大小，可以根据你要设置的元素数目从数组中删除某些元素，十分有用。
好比，若是有一个含有10个元素的数组，可是你只想要
前五个，那就能够截取数组，经过设置array.length=5让它变小。请看下面的例子：
- var array = [1,2,3,4,5,6];
- console.log(array.length); // 6
- array.length = 3;
- console.log(array.length); // 3
- console.log(array); // [1,2,3]
来源：Pexels
6.用+运算符转换为数字
这种技巧真是太棒了！它操做起来很是简单，不过只适用于str函数，不然它会返回到NaN（非数字）。请看下面的例子：
- functiontoNumber(strNumber) {
- return +strNumber;
- }console.log(toNumber("1234")); // 1234
- console.log(toNumber("ACB")); // NaN
这种技巧一样适用于日期，在这种状况下，它会返回到时间戳：
- console.log(+new Date()) //1461288164385
7.合并数组
若是须要将两个数组合并，那么能够用Array.contat()函数：
- var array1 = [1,2,3];
- var array2 = [4,5,6];
- console.log(array1.concat(array2)); // [1,2,3,4,5,6];
可是，该函数并非合并大型数组的最好工具，由于它建立新数组时会占用大量内存。
在这种状况下，能够用Array.push.apply(arr1, arr2)，而不用建立新数组。这种函数会将第二个数组并入第一个数组，不会占用太多内存：
- vararray1 = [1,2,3];
- var array2 = [4,5,6];
- console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
8.在循环中缓存array.length
这个技巧很简单，但在循环中处理大型数组时，它会对性能产生很大影响。为了迭代数组，几乎每一个人都会同时写出这样的代码：
- for(vari = 0; i < array.length; i++) {
- console.log(array[i]);
- }
若是处理的是小型数组，那没问题，但是若是处理的是大型数组，那么代码会在循环的每一次迭代中从新计算数组的大小，从而形成延迟。
为了不此种状况，能够将要用的array.length缓存在某个变量中，而不用在循环的每一次迭代中都调用它：
- var length = array.length;
- for(var i = 0; i < length; i++) {
- console.log(array[i]);
- }
想让它变短一些？这样写就能够：
- for(var i = 0, length = array.length;i < length; i++) {
- console.log(array[i]);
- }
9.所有替换
String.replace()函数容许使用字符串和正则表达式替换字符串；在本机中该函数只能替换第一次。可是能够在正则表达式的末尾使用/g，从而模拟replaceAll()函数：
- varstring = "john john";
- console.log(string.replace(/hn/, "ana")); // "joana john"
- console.log(string.replace(/hn/g, "ana")); // "joana joana"
10.用!!运算符转换为布尔值
有时候，为将变量看做真值，咱们须要检查一个变量是否存在或是否具备有效值。在此验证过程当中，你能够用!!（双重否认运算符）。
一个简单的!!variable会自动将数据转换为布尔值，并且该变量只有在含有0、null、""、undefined或NaN这样的值时才会返回到false，不然会返回到true。
为了在实践中理解这一过程，咱们来看一看下面这个简单的例子：
- function Account(cash) {
- this.cash = cash;
- this.hasMoney = !!cash;
- }
- var account = new Account(100.50);
- console.log(account.cash); // 100.50
- console.log(account.hasMoney); // true
- var emptyAccount = new Account(0);
- console.log(emptyAccount.cash); // 0
- console.log(emptyAccount.hasMoney); // false
该例中，若是account.cash的值大于零，那么account.hasMoney就是true。
11.将NodeList转换为Arrays
若是运行document.querySelectorAll("p")函数，那么它有可能会返回到DOM元素数组，即NodeList对象。可是该对象并不具备数组的所有函数，好比sort()、reduce()、map()和filter()。
为了运行以上函数以及其余自带的数组函数，须要将NodeList转化为Arrays。想试试这个技巧？用下面这个函数就能够：[].slice.call(elements):
- var elements = document.querySelectorAll("p");// NodeList
- var arrayElements = [].slice.call(elements); // Now the NodeList is an array//This is another way of converting NodeList to Arrayvar arrayElements =Array.from(elements);
来源：Pexels
以上就是所有内容，你们学到了吗？若是还有什么建议和疑问，欢迎在评论区“骚扰”小芯哟~
留言 点赞 关注
咱们一块儿分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”
（添加小编微信：dxsxbb，加入读者圈，一块儿讨论最新鲜的人工智能科技哦～）