10 个实用的 JavaScript 小技巧

438 阅读2分钟

1. 解构赋值简化变量声明

直接从对象或数组中提取值并赋值给变量,减少冗余代码。

javascript

	const user = { name: 'Alice', age: 30 };

	const { name, age } = user; // 等价于 name = user.name, age = user.age

	 

	const arr = [1, 2, 3];

	const [a, b] = arr; // a=1, b=2

2. 模板字面量(Template Literals)

用反引号 ` 包裹字符串,支持多行文本和变量嵌入。

javascript

	const name = 'Bob';

	console.log(`Hello, ${name}!

	Today is ${new Date().toDateString()}.`);

3. 箭头函数缩短代码

简化函数语法,自动绑定上下文(this)。

javascript

	// 传统函数

	const sum = function(a, b) { return a + b; };

	 

	// 箭头函数

	const sum = (a, b) => a + b;

4. 可选链操作符(Optional Chaining ?.

安全访问深层嵌套的对象属性,避免因 undefined 报错。

javascript

	const user = { address: { city: 'New York' } };

	const city = user?.address?.city; // 若 address 不存在,返回 undefined

5. 空值合并运算符(Nullish Coalescing ??

为变量提供默认值,仅在值为 nullundefined 时生效。

javascript

	const price = 0;

	const displayPrice = price ?? 'N/A'; // 0(因为 0 不是 null/undefined)

6. 展开运算符(Spread Operator ...

快速合并数组或对象。

javascript

	const arr1 = [1, 2];

	const arr2 = [...arr1, 3]; // [1, 2, 3]

	 

	const obj1 = { a: 1 };

	const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

7. 数组方法:mapfilterreduce

用函数式编程替代 for 循环。

javascript

	const numbers = [1, 2, 3];

	const doubled = numbers.map(n => n * 2); // [2, 4, 6]

	const evens = numbers.filter(n => n % 2 === 0); // [2]

	const sum = numbers.reduce((acc, n) => acc + n, 0); // 6

8. 短路求值(Short-Circuit Evaluation)

利用逻辑运算符简化条件判断。

javascript

	// 仅当 isLogged 为 true 时执行函数

	isLogged && showDashboard();

	 

	// 设置默认值

	const username = user.name || 'Guest';

9. 使用 Set 快速去重数组

将数组转换为 Set 自动去重。

javascript

	const numbers = [1, 2, 2, 3];

	const unique = [...new Set(numbers)]; // [1, 2, 3]

10. 对象属性简写

当属性名与变量名相同时,可省略键值。

javascript

	const name = 'Alice';

	const age = 30;

	 

	// 传统写法

	const user = { name: name, age: age };

	 

	// 简写

	const user = { name, age };

总结

这些小技巧能显著提升代码的可读性和简洁性,但需注意浏览器兼容性(如可选链 ?. 和空值合并 ?? 需现代环境支持)。合理使用它们,让你的 JavaScript 更优雅! 🚀