14 个提升 JavaScript 开发效率的实用技巧

另外，判断布尔值时不需要显式比较 === true，直接写 if (likeJs) 即可。

4. 变量声明合并

连续声明多个变量时，可以合并为一行，既节省空间又保持整洁。

// 推荐
let x, y, z = 3;

// 不推荐
let x;
let y;
let z = 3;

5. 正则表达式

在处理文本分析、验证或数据提取时，正则表达式是不可或缺的工具。它能用极短的代码实现复杂的匹配逻辑，建议在实际项目中多查阅文档以掌握其用法。

6. 字符串索引访问

获取字符串指定位置的字符，除了使用 charAt()，直接使用下标访问也是标准做法，且性能相当。

"string"[0]; // 返回 's'

将字符串视为字符数组是一种很好的思维类比。

7. 科学计数法表示数字

对于包含大量零的数字，使用科学计数法（Base-10）不仅书写简短，阅读起来也更直观。

for (let i = 0; i < 1e4; i++) {
    // 循环一万次
}

1e4 等同于 10000，这在处理大数值范围时非常有用。

8. 模板字符串

ES6 引入的模板字符串解决了字符串拼接繁琐的问题，支持嵌入变量和换行。

// 传统拼接
const question = "My number is " + number + ", ok?";

// 模板字符串
const question = `My number is ${number}, ok?`;

可读性大幅提升，尤其是在涉及多行文本时。

9. 箭头函数

箭头函数提供了更简洁的函数声明语法，同时自动绑定 this，非常适合回调函数。

// 传统函数
function sum(n1, n2) {
    return n1 + n2;
}

// 箭头函数
const sum = (n1, n2) => n1 + n2;

当函数体只有一行返回值时，可以省略 return 关键字和大括号。

10. 参数解构

当函数接收配置对象作为参数时，解构赋值能显著减少冗余的属性访问代码。

// 传统方式
function init(config) {
    const s = config.s;
    const t = config.t;
    return s + t;
}

// 解构方式
function init({ s, t }) {
    return s + t;
}

此外，还可以直接在解构时设置默认值：

function init({ s = 10, t = 20 }) {
    return s + t;
}
init({ s: 1 }); // s=1, t=20

11. 属性简写

当对象属性的键名与变量名一致时，可以省略冒号和值，直接传递变量。

const name = "Joseph";
const canCode = true;

// 简写
const person = { name, canCode };
// 等价于 { name: "Joseph", canCode: true }

这让对象初始化代码更加紧凑。

12. Map 方法

遍历数组并转换元素结构时，map 方法比传统的 for 循环更语义化。

const animals = [
    { name: "cat", size: "small", weight: 5 },
    { name: "dog", size: "small", weight: 10 },
    { name: "lion", size: "medium", weight: 150 },
    { name: "elephant", size: "large", weight: 5000 }
];

// 提取所有动物名字
const animalNames = animals.map(animal => animal.name);

map 传入的回调函数接收当前元素、索引和整个数组三个参数。

13. Filter 方法

筛选数组中的特定元素，filter 比手动构建新数组更清晰。

// 筛选体型为 small 的动物
const smallAnimals = animals.filter(animal => animal.size === "small");

回调函数返回布尔值，决定元素是否保留在结果数组中。

14. Reduce 方法

reduce 用于将数组聚合为一个单一值，如求和、统计等。

// 计算总重量
const totalWeight = animals.reduce((total, animal) => {
    return total + animal.weight;
}, 0);

第一个参数是累加器，第二个是当前元素，第三个是索引，第四个是原数组。初始值设为 0 确保第一次迭代正确执行。

掌握这些技巧，能让你的代码更简洁，开发过程更顺畅。当然，工具只是辅助，理解背后的原理才是关键。希望这些内容对你的日常开发有所帮助。