本文为翻译，原文地址：dev.to/jagroop2001…
JavaScript 是一个强大且灵活的编程语言，了解一些很酷的技巧可以使您的代码更干净、更快、更高效。下面是20个实用的JavaScript技巧，您可以在实际应用程序中使用它们来增强您的开发体验
1、在使用解构赋值的同时重命名变量
可以在对象解构期间重命名变量，避免存在命名冲突
const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge); // 25
2、使用可选链操作符(Optional Chaining)
可选链操作符可以与函数一起使用，确保函数在被调用之前存在
const user = {
getName: () => 'Alice',
};
console.log(user.getName?.()); // Alice
console.log(user.getAge?.()); // undefined
3、使用 ||= 操作符赋值
逻辑或赋值 (||=) 只在变量为 null、undefined 或像 0 这样的假值时才赋值
let count;
count ||= 10;
console.log(count); // 10
也可以使用 (??=) 只在变量为 null、undefined 不包括 0 和其它 false 的值才赋值
let num = 0
num ??= 10
console.log(num); // 0
4、使用扩展运算符将 NodeList 转换为数组
扩展运算符提供了一种将 NodeList 转换为数组的快速方法
const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true
5、解构数组/对象时添加默认值
在解构过程中添加默认值，避免 undefined
const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 25
6、快速从数组中删除为 false 的值
使用 filter() 从数组中删除 false 值（如0，null, undefined, false）
const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"]
7、根据对象属性排序数组
按对象特定属性轻松对对象数组进行排序
const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }]
8、 懒加载：动态导入模块
动态导入允许在使用的时候再导入，这样可以减少程序的初次加载时间
const loadModule = async () => {
const module = await import('./myModule.js');
module.default(); // Calls the default export function
};
loadModule();
9、参数解构时添加默认值
当使用默认参数时，可以使用解构赋值并且可以为一些参数赋默认值
function createUser({ name = 'Guest', age = 18 } = {}) {
console.log(name, age);
}
createUser(); // Guest 18
createUser({ name: 'Alice' }); // Alice 18
10、使用 Object.assign() 做浅拷贝
Object.assign() 可以对对象做浅拷贝而不影响原对象
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1 (unchanged)
11、缓存函数结果提升性能
基于参数把函数进行二次封装对函数的结果进行缓存，这对于计算量大的函数非常有用
const memoize = (fn) => {
const cache = {};
return (...args) => {
const key = JSON.stringify(args);
if (!cache[key]) {
cache[key] = fn(...args);
}
return cache[key];
};
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16 (cached on second call)
12、使用 reduce 对对象数组进行分组
reduce() 可以实现对对象数组中根据某项属性进行分组，在数据处理中很常用
const people = [
{ name: 'Alice', role: 'admin' },
{ name: 'Bob', role: 'user' },
{ name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
(acc[person.role] = acc[person.role] || []).push(person);
return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] }
13、使用 Array.flat(Infinity) 展开嵌套数据
展开多层嵌套数组可以直接使用 Array.flat(Infinity)，这个方法挺好
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]
14、Boolean 值取反
let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true
15、使用 concat() 合并数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = arr1.concat(arr2, arr3);
console.log(merged); // [1, 2, 3, 4, 5, 6]
16、使用 for..of 和 await 遍历 Promise 数组
当遍历 Pormise 数组时，使用 for...of 和 await 保证每个 Promise resolve 后再执行下一个 Pormise
const fetchData = async () => {
const urls = ['url1', 'url2'];
for (const url of urls) {
const response = await fetch(url);
console.log(await response.json());
}
};
17、快速获得数组中的最后一项
不用使用数组的长度也可以获取数组中最后一项
const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4
18、使用 Intl 格式化时间
Intl.DateTimeFormat 提供了一种强大的本地格式化时间
const date = new Date();
const formatted = new Intl.DateTimeFormat('zh-Hans-CN', {
dateStyle: 'full',
}).format(date);
console.log(formatted); // "2024年10月31日星期四"
19、使用 Math.round() 和模板字符串进行四舍五入
const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.14
20、使用 Array.from() 转化类数组对象为数组
使用 Array.from() 将类数组对象（如参数）转换为实际数组
function example() {
const argsArray = Array.from(arguments);
console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]
Happy coding! 🚀
声明🤣🤣
- 本文英文原文地址：dev.to/jagroop2001… 由我随缘翻译
- 翻译使用自己十几年英语功底，保证不保证准确
- 大家天天开心
