JavaScript 高效编程：类型转换、数组操作与性能优化技巧

本文分享一系列 JavaScript 开发中的实用技巧，旨在帮助开发者在实际项目中更高效地解决常见问题。

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

在验证变量是否存在或是否包含有效值时，若需返回布尔结果，使用 !! 操作符是一种简洁高效的方法。对变量执行 !!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 && login();

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


user && 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 < 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]);
}

检测对象中属性是否存在

当需检测属性是否存在，以避免调用未定义的函数或属性时，此技巧尤为有用。在编写跨浏览器兼容代码时，例如使用 document.querySelector() 选择 id，但需兼容 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 个元素，但只需保留前五个，可通过设置 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 技巧，欢迎在评论区分享。

本文内容仅供参考，感谢您的阅读与支持。

JavaScript 实用开发技巧与性能优化指南