别客气,11种在教程中难以找到的JavaScript技巧,请收下

开发 前端
今天,小芯给大家整理11条非常好用的JavaScript技巧。买不了吃亏,买不了上当,快来看看吧~

 今天,小芯给大家整理11条非常好用的JavaScript技巧。

买不了吃亏,买不了上当,快来看看吧~

[[311838]]

1.获取数组的最后一项

设置起始参数和终止参数时,Array.prototype.slice(begin,end)具有剪切数组的功能。但是,如果未设置终止参数,该功能将自动设置为数组的最大值。

该功能可接受负值,我想很多人对此并不了解,而且如果将起始参数设定为负数,那么会得到数组的最后几个元素:

 

  1. vararray = [1,2,3,4,5,6]; 
  2.  
  3. console.log(array.slice(-1)); // [6] 
  4.  
  5. console.log(array.slice(-2)); // [5,6] 
  6.  
  7. console.log(array.slice(-3)); // [4,5,6] 

 

2.用||运算符默认某值

目前的ES6有默认参数功能。为了在旧版浏览器中模拟该功能,你可以用||(OR运算符)默认某值,将其作为第二个可用的参数。

如果第一个参数返回到了false,那么第二个参数就会被视为默认值。请看这个例子:

 

  1. function User(name, age) { 
  2. this.name = name || "OliverQueen"
  3. this.age = age || 27; 
  4. }var user1 = new User(); 
  5. console.log(user1.name); // Oliver Queen 
  6. console.log(user1.age); // 27var user2 = new User("Barry Allen", 25); 
  7. console.log(user2.name); // Barry Allen 
  8. console.log(user2.age); // 25 

3.重组数组元素

想不用Lodash这样的外部工具库就能重组数组元素?试试下面这个神奇的函数:

 

  1. var list= [1,2,3]; 
  2. console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3] 

 

4.短路条件

如果你看到一个代码类似于:

 

  1. if (connected) { login(); 

 

可以通过结合使用变量(会被验证)和函数之间的&&(AND运算符)来缩短上述代码。比如,上述代码可以缩短为一行:

 

  1. connected && login(); 

你可以执行相同操作来检查对象中是否存在属性或函数。与以下代码类似:

 

  1. user && user.login(); 

5.截取数组

这项技巧可以锁定数组的大小,能够根据你要设置的元素数目从数组中删除某些元素,十分有用。

比如,如果有一个含有10个元素的数组,但是你只想要

前五个,那就可以截取数组,通过设置array.length=5让它变小。请看下面的例子:

 

  1. var array = [1,2,3,4,5,6]; 
  2. console.log(array.length); // 6 
  3. array.length = 3; 
  4. console.log(array.length); // 3 
  5. console.log(array); // [1,2,3] 

6.用+运算符转换为数字

这种技巧真是太棒了!它操作起来非常简单,不过只适用于str函数,否则它会返回到NaN(非数字)。请看下面的例子:

 

  1. functiontoNumber(strNumber) { 
  2.  
  3. return +strNumber; 
  4.  
  5. }console.log(toNumber("1234")); // 1234 
  6.  
  7. console.log(toNumber("ACB")); // NaN 

 

这种技巧同样适用于日期,在这种情况下,它会返回到时间戳:

 

  1. console.log(+new Date()) //1461288164385 

7.合并数组

如果需要将两个数组合并,那么可以用Array.contat()函数:

 

  1. var array1 = [1,2,3]; 
  2.  
  3. var array2 = [4,5,6]; 
  4.  
  5. console.log(array1.concat(array2)); // [1,2,3,4,5,6]; 

 

但是,该函数并不是合并大型数组比较好的工具,因为它创建新数组时会占用大量内存。

在这种情况下,可以用Array.push.apply(arr1, arr2),而不用创建新数组。这种函数会将第二个数组并入第一个数组,不会占用太多内存:

 

  1. vararray1 = [1,2,3]; 
  2.  
  3. var array2 = [4,5,6]; 
  4.  
  5. console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6]; 

 

8.在循环中缓存array.length

这个技巧很简单,但在循环中处理大型数组时,它会对性能产生很大影响。为了迭代数组,几乎每个人都会同时写出这样的代码:

 

  1. for(vari = 0; i < array.length; i++) { 
  2.  
  3. console.log(array[i]); 
  4.  

 

如果处理的是小型数组,那没问题,可是如果处理的是大型数组,那么代码会在循环的每一次迭代中重新计算数组的大小,从而造成延迟。

为了避免此种情况,可以将要用的array.length缓存在某个变量中,而不用在循环的每一次迭代中都调用它:

 

  1. var length = array.length; 
  2.  
  3. for(var i = 0; i < length; i++) { 
  4.  
  5. console.log(array[i]); 
  6.  

 

想让它变短一些?这样写就可以:

 

  1. for(var i = 0, length = array.length;i < length; i++) { 
  2.  
  3. console.log(array[i]); 
  4.  

 

9.全部替换

String.replace()函数允许使用字符串和正则表达式替换字符串;在本机中该函数只能替换第一次。但是可以在正则表达式的末尾使用/g,从而模拟replaceAll()函数:

 

  1. varstring = "john john"
  2.  
  3. console.log(string.replace(/hn/, "ana")); // "joana john" 
  4.  
  5. console.log(string.replace(/hn/g, "ana")); // "joana joana" 

 

10.用!!运算符转换为布尔值

有时候,为将变量看作真值,我们需要检查一个变量是否存在或是否具有有效值。在此验证过程中,你可以用!!(双重否定运算符)。

一个简单的!!variable会自动将数据转换为布尔值,而且该变量只有在含有0、null、""、undefined或NaN这样的值时才会返回到false,否则会返回到true。

为了在实践中理解这一过程,我们来看一看下面这个简单的例子:

 

  1. function Account(cash) { 
  2.  
  3. this.cash = cash; 
  4.  
  5. this.hasMoney = !!cash; 
  6.  
  7.  
  8. var account = new Account(100.50); 
  9.  
  10. console.log(account.cash); // 100.50 
  11.  
  12. console.log(account.hasMoney); // true 
  13.  
  14. var emptyAccount = new Account(0); 
  15.  
  16. console.log(emptyAccount.cash); // 0 
  17.  
  18. 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):

 

  1. var elements = document.querySelectorAll("p");// NodeList 
  2.  
  3. var arrayElements = [].slice.call(elements); // Now the NodeList is an array//This is another way of converting NodeList to Arrayvar arrayElements =Array.from(elements); 

 

责任编辑:华轩 来源: 今日头条
相关推荐

2024-08-20 15:23:27

JavaScript开发

2019-12-02 18:45:38

JavaScript开发数组

2023-05-28 23:23:44

2019-04-18 09:42:31

JavaScript前端开发

2023-01-29 08:17:40

2018-08-20 08:24:41

Docker容器命令

2013-03-07 10:01:02

编程程序员

2022-11-04 08:16:22

2023-05-22 15:35:10

JavaScriptWeb开发

2022-02-23 07:50:36

LinuLinux操作系统

2021-05-18 09:12:40

TCP网络分层网络协议

2015-04-27 14:18:08

2023-04-26 15:27:11

JavaScript技巧元素

2022-11-28 23:44:26

JavaScript技巧程序员

2020-05-17 16:19:59

JavaScript代码开发

2022-02-08 09:34:17

网络安全人才网络安全

2009-12-08 10:38:51

Windows 7操作

2020-04-13 23:19:40

物联网IOT物联网应用

2010-10-08 10:03:52

JavaScript图像

2023-03-01 15:39:50

JavaScrip对象属性ES6
点赞
收藏

51CTO技术栈公众号