Sharing the 12 most practical skills in JavaScript

In this article, I will share 12 very useful JavaScript tips. These tips can help you reduce and optimize your code. Friends in need can refer to this article

In this article, I will share 12 very useful JavaScript tips. These tips can help you reduce and optimize your code.

1) Use !! to convert variable into Boolean type

Sometimes, we need to check whether some variables exist , or if it has a valid value, thus treating their value as true. For doing such a check you can use || (double negation operator) which automatically converts any type of data to boolean, only these variables will return false: 0, null, "", undefined or NaN, others return true. Let's take a look at this simple example:

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

In this example, if the value of account.cash is greater than zero, the value of account.hasMoney is true.

2) Use + to convert variables into numbers

This conversion is super simple, but it only works with numbers strings , otherwise it will Returns NaN (not a number). Take a look at this example:

function toNumber(strNumber) { 
 return +strNumber; 
} 
console.log(toNumber("1234")); // 1234 
console.log(toNumber("ACB")); // NaN

This conversion operation can also be applied to Date, in which case it will return Timestamp:

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

3) Short-circuit condition

If you have seen this kind of code:

if (conected) { 
 login(); 
}

Then you can use && (AND between these two variables operator) to shorten the code. For example, the previous code can be reduced to one line:

conected && login();

You can also use this method to check whether certain properties or functions exist in the object . Similar to the following code:

user && user.login();

4) Use || to set the default value

There is a default parameter function in ES6. To emulate this functionality in older browsers, you can use || (OR operator) and pass the default value as its second argument. If the first parameter returns false, the second parameter will be returned as the default value. Look at this example:

function User(name, age) { 
 this.name = name || "Oliver Queen"; 
 this.age = age || 27; 
} 
var user1 = new User(); 
console.log(user1.name); // Oliver Queen 
console.log(user1.age); // 27 
var user2 = new User("Barry Allen", 25); 
console.log(user2.name); // Barry Allen 
console.log(user2.age); // 25

5) cachingarray.length## in loop

#This trick is very simple and avoids a huge impact on performance when looping through large

arrays. Basically this is how almost everyone uses for to loop through an array:

for (var i = 0; i < array.length; i++) { 
 console.log(array[i]); 
}

If you're working with smaller arrays, that's fine, but if you're dealing with large arrays, this is The code will repeatedly calculate the size of the array in each loop, which will cause a certain delay. To avoid this, you can cache array.length in a variable so that the cache is used instead of array.length each time in the loop:

var length = array.length; 
for (var i = 0; i < length; i++) { 
 console.log(array[i]); 
}

For more conciseness, you can write:

for (var i = 0, length = array.length; i < length; i++) { 
 console.log(array[i]); 
}

6) Detect properties in objects

This technique is very useful when you need to check whether certain properties exist and avoid running undefined functions or properties. You might also use this technique if you plan to write cross-browser code. For example, let's assume you need to write code that is compatible with older versions of Internet Explorer 6 and want to use

document.querySelector() to get certain elements by ID. However, in modern browsers, this function does not exist. So, to check if this function exists, you can use the in operator. Take a look at this example:

if ('querySelector' in document) { 
 document.querySelector("#id"); 
} else { 
 document.getElementById("id"); 
}

In this case, if there is no querySelector function in the document, it will use document.getElementById() instead.

7) Get the last element of the array

Array.prototype.slice(begin,

end) can be used to clip the array. But if the value of the end parameter end is not set, the function will automatically set end to the array length value. I think few people know that this function can accept negative values. If you set begin to a negative number, you can get the reciprocal element from the array:

var array = [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]

8) Array truncation

这个技术可以锁定数组的大小，这对于要删除数组中固定数量的元素是非常有用的。例如，如果你有一个包含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]

9) 全部替换

String.replace()函数允许使用String和Regex来替换字符串，这个函数本身只能替换第一个匹配的串。但是你可以在正则表达式末尾添加/g来模拟replaceAll()函数：

var string = "john john"; 
console.log(string.replace(/hn/, "ana")); // "joana john" 
console.log(string.replace(/hn/g, "ana")); // "joana joana"

10) 合并数组

如果你需要合并两个数组，你可以使用Array.concat()函数：

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），它不会创建一个新数组，而是将第二个数组合并到第一个数组中，以减少内存使用：

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

11) 把NodeList转换成数组

如果运行document.querySelectorAll("p")函数，它会返回一个DOM元素数组，即NodeList对象。但是这个对象并没有一些属于数组的函数，例如：sort()，reduce()，map()，filter()。为了启用这些函数，以及数组的其他的原生函数，你需要将NodeList转换为数组。要进行转换，只需使用这个函数：[] .slice.call（elements）：

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了 
var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法

12) 对数组元素进行洗牌

如果要像外部库Lodash那样对数据元素重新洗牌，只需使用这个技巧：

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

结论

现在，你已经学到了一些有用的JS技巧，它们主要用于缩减JavaScript代码量，其中一些技巧在许多流行的JS框架都使用到，如Lodash，Underscore.js，Strings.js等。如果你知道其他JS技巧，欢迎分享！

【相关推荐】

1. Javascript免费视频教程

2. JavaScript运动框架之多值运动的具体介绍（四）

3. JavaScript运动框架之多物体任意值运动的示例代码分享（三）

4. JavaScript运动框架之如何解决防抖动问题、悬浮对联（二）

5. JavaScript运动框架之如何解决速度正负取整问题（一）

The above is the detailed content of Sharing the 12 most practical skills in JavaScript. For more information, please follow other related articles on the PHP Chinese website!