12个JavaScript实用技巧：类型转换、数组操作与性能优化

JavaScript实用技巧概览

本文整理了12个在JavaScript开发中非常实用的技巧。这些技巧在实际项目工作中，可能帮助你更高效地解决各类编程问题。

利用!!操作符进行布尔值转换

在开发中，我们经常需要检查变量是否存在或是否包含有效值，若存在则返回true。使用!!操作符可以实现这一需求，既方便又简洁。对变量执行!!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的值大于0，account.hasMoney的返回值即为true。

使用+运算符将字符串转换为数字

这是一个非常实用且简单的技巧，可将字符串数据转换为数字类型。需要注意的是，该技巧仅适用于字符串数据，否则将返回NaN。示例如下：


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

该技巧同样适用于Date对象，在本例中，它将返回对应的时间戳数字：


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

使用短路逻辑符

如果你拥有如下代码结构：


if (conected) {
  login();
}

你可以将变量简写，并使用&&运算符与函数连接。例如，上述示例可以简化为：


conected &amp;&amp; login();

若需检测对象中是否存在某些属性或函数，也可采用此方法，代码如下：


user &amp;&amp; user.login();

使用||运算符处理默认值

ES6引入了默认参数特性。为了在旧版浏览器中模拟这一功能，可以使用||运算符，并将默认值作为第二个参数传入。如果第一个参数返回false，则第二个值将被视为默认值。示例如下：


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

在循环中缓存array.length

此技巧虽然简单，但在处理大型数组循环时，对性能的影响显著。通常大家会编写如下同步迭代数组的代码：


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

对于小型数组，上述写法没有问题。但如果处理大型数组，每次迭代都会重新计算数组长度，从而导致性能延迟。为避免这种情况，建议缓存array.length：


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

你也可以采用以下写法：


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

检测对象中是否存在属性

当需要检测某些属性是否存在，以避免调用未定义的函数或属性时，此技巧显得尤为有用。如果你正在编写跨浏览器兼容的代码，也可能用到它。例如，你想使用document.querySelector()选择ID，并希望兼容IE6浏览器，但该函数在IE6中不存在。此时，使用此操作符检测函数是否存在非常有效，示例如下：


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

在上述示例中，如果document不存在querySelector函数，则调用document.getElementById("id")。

获取数组中的最后一个元素

Array.prototype.slice(begin,end)用于获取begin和end之间的数组元素。若不设置end参数，默认将数组长度作为end值。部分开发者可能不知道该函数还可接受负数作为参数。若设置负数作为begin值，即可获取数组的最后一个元素。例如：


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]

截断数组

此技巧主要用于限制数组大小，在删除数组中部分元素时非常有用。例如，若你的数组有10个元素，但只想保留前5个，可通过设置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]

全局替换字符串

String.replace()函数允许使用字符串或正则表达式替换目标字符串。该函数默认仅替换第一次出现的内容，但你可以使用正则表达式中的/g标志来模拟replaceAll()的功能：


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

合并数组

若需合并两个数组，通常使用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];

将NodeList转换为数组

当执行document.querySelectorAll("p")函数时，它可能返回DOM元素的数组，即NodeList对象。但该对象不具备sort()、reduce()、map()、filter()等数组函数功能。为了让这些原生数组功能可用，需将节点列表转换为数组。可使用[].slice.call(elements)实现：


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

数组元素洗牌

对于数组元素的随机洗牌，无需使用Lodash等外部库，只需这样做：


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

总结

现在你已掌握了一些实用的JavaScript技巧。希望这些技巧能在工作帮助你解决麻烦，或对你有所帮助。如果你有其他优秀的JavaScript技巧，欢迎在评论区与我们分享。

以上这篇12个非常实用的JavaScript小技巧【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。

12个JavaScript实用技巧：从类型转换到数组操作