18个JavaScript编写简洁高效代码的技巧分享
本文精选18个JavaScript实用技巧，涵盖箭头函数、Array.from、解构赋值、Map、Object.seal/freeze等核心语法。通过具体示例展示如何简化声明、处理数组与对象、优化性能及提升代码可读性，帮助开发者写出更简洁高效的JS代码。
本文内容基于《18 JavaScript Tips: You Should Know for Clean and Efficient Code》翻译整理，作者Shefali，部分细节已做删改。
箭头函数
利用箭头函数可以简化函数的定义过程。
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b;
Array.from()
利用Array.from()方法，能够将任意可迭代对象转换为数组。
const str = "Hello!";
const arr = Array.from(str);
console.log(arr); //Output: ['H', 'e', 'l', 'l', 'o', '!']
使用console.table显示数据
若需在控制台以表格形式组织并展示数据，可调用console.table()。
const person = {
name: 'John',
age: 25,
profession: 'Programmer'
}
console.table(person);
输出效果：
使用const和let
对于确定不会重新赋值的变量，推荐使用const。
const PI = 3.14;
let timer = 0;
使用解构提取对象属性
通过解构语法从对象中提取属性，有助于提升代码的可读性。
const person = {
name: 'John',
age: 25,
profession: 'Programmer'
}
//Instead of this 👇
console.log(person.name);
console.log(person.age);
//Use this👇
const {name, age} = person;
console.log(name);
console.log(age);
使用逻辑OR运算符设置默认值
借助||操作符可以便捷地设置默认值。
function greet(name) {
name = name || 'Person';
console.log(`Hello, ${name}!`);
}
greet(); //Output: Hello, Person!
greet("John"); //Output: Hello, John!
清空数组
通过设置length属性为0，可以简便地清空数组。
let numbers = [1, 2, 3, 4];
numbers.length = 0;
console.log(numbers); //Output: []
JSON.parse()
调用JSON.parse()可将JSON字符串解析为JavaScript对象，确保数据操作的流畅性。
const jsonStr = '{"name": "John", "age": 25}';
const person = JSON.parse(jsonStr);
console.log(person);
//Output: {name: 'John', age: 25}
Map()函数
利用map()函数可转换新数组中的元素，且不会修改原始数组。
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(numbers); //Output: [1, 2, 3, 4]
console.log(doubled); //Output: [2, 4, 6, 8]
Object.seal()
通过Object.seal()方法，可以防止向对象中添加或删除属性。
const person = {
name: 'John',
age: 25
};
Object.seal(person);
person.profession = "Programmer";
console.log(person); //Output: {name: 'John', age: 25}
Object.freeze()
利用Object.freeze()方法，可阻止对对象进行任何更改，包括添加、修改或删除属性。
const person = {
name: 'John',
age: 25
};
Object.freeze(person);
person.name = "Mark";
console.log(person); //Output: {name: 'John', age: 25}
删除数组重复项
借助Set可以从数组中移除重复元素。
const arrWithDuplicates = [1, 12, 2, 13, 4, 4, 13];
const arrWithoutDuplicates = [...new Set(arrWithDuplicates)];
console.log(arrWithoutDuplicates);
//Output: [1, 12, 2, 13, 4]
使用解构交换值
利用解构语法可以轻松地交换两个变量的值。
let x = 7, y = 13;
[x, y] = [y, x];
console.log(x); //13
扩展运算符
使用扩展运算符可以高效地复制或合并数组。
const arr1 = [1, 2, 3];
const arr2 = [9, 8, 7];
const arr3 = [...arr2];
const mergedArr = [...arr1, ...arr2];
console.log(arr3); //[9, 8, 7]
console.log(mergedArr); //[1, 2, 3, 9, 8, 7]
模板字符串
利用模板字符串进行插值操作，能增强代码的可读性。
const name = 'John';
const message = `Hello, ${name}!`;
三元运算符
使用三元运算符可以简化条件语句的书写。
const age = 20;
//Instead of this👇
if(age>=18){
console.log("You can drive");
}else{
console.log("You cannot drive");
}
//Use this👇
age >= 18 ? console.log("You can drive") : console.log("You cannot drive");
使用===代替==
通过严格相等（===）替代==，可避免类型强制转换带来的问题。
const num1 = 5;
const num2 = '5';
//Instead of using ==
if (num1 == num2) {
console.log('True');
} else {
console.log('False');
}
//Use ===
if (num1 === num2) {
console.log('True');
} else {
console.log('False');
}
使用语义化变量和函数名称
为变量和函数赋予有意义且描述性的名称，有助于提升代码的可读性和可维护性。
// Don't declare variable like this
const a = 18;
// use descriptive names
const numberOfTips = 18;以上即为18个JavaScript编写简洁高效代码的技巧分享，更多关于JavaScript技巧的资料请关注本站其它相关文章！
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18