JavaScript 已经变得更加智能，你也应该如此。无论你是在发布下一个 SaaS MVP，还是在凌晨 3 点苦苦挣扎于 bug，这 49 个代码快捷方式都能帮助你更快、更简洁地编写代码，并减轻你的压力。

你可能已经看过其中一些了……但我保证，到第49个的时候，你一定会发现一些新的东西，可以运用在你的开发项目中。

我们现在就出发。

01、三元运算符

const status = loggedIn ? "Welcome!" : "Please login.";

02、默认参数

function greet(name = "Stranger") {  return `Hello, ${name}`; }

03、箭头函数

const multiply = (a, b) => a * b;

04、解构对象

const { title, year } = movie;

05、解构数组

const [first, second] = topResults;

06、模板字符串

const greeting = `Hey, ${user.name}!`;

07、扩展运算符

const newTeam = [...oldTeam, "Alice"];

08、剩余参数

function logAll(...args) {  console.log(args);}

09、可选链式调用

const city = user?.address?.city;

10、空值合并

const nickname = inputName ?? "Anonymous";

11、逻辑或赋值

settings.volume ||= 50;

12、逻辑与赋值

user.isAdmin &&= false;

13、对象属性简写

const age = 24;const person = { name, age };

14、计算属性名称

const field = "score";const stats = { [field]: 100 };

15、For-of Loop

for (const char of name) {  console.log(char);}

16、forEach

tags.forEach(tag => console.log(`#${tag}`));

17、map()

const lengths = names.map(n => n.length);

18、 filter()

const passed = grades.filter(g => g >= 60);

19、reduce()

const sum = numbers.reduce((a, b) => a + b, 0);

20、 includes()

if (items.includes("🚀")) launch();

21、带集合的唯一数组

const unique = [...new Set(tags)];

22、Object.entries()

Object.entries(data).forEach(([k, v]) => console.log(k, v));

23、Object.values()

const values = Object.values(config);

24、Object.keys()

const keys = Object.keys(settings);

25、Array Method Chaining

data.filter(a => a.active).map(a => a.name);

26、Flatten Arrays

const flat = nested.flat(2);

27、String.trim()

const padded = id.padStart(5, "0");

28、padStart()

const padded = id.padStart(5, "0");

29、 Format Numbers

const price = new Intl.NumberFormat().format(1234567);

30、动态导入

const module = await import("./utils.js");

31、Promise.all()

await Promise.all([loadUser(), loadPosts()]);

32、Async/Await

const getData = async () => {  const res = await fetch(url);  return await res.json();};

33、Optional Function Params

function log(message, level = "info") {  console[level](message);}

34、Number Conversion with +

const num = +"42";

35、Boolean Conversion with 

const isValid = !!userInput;

36、Swap Values

[a, b] = [b, a];

37、String to Array

const chars = [..."dev"];

38、Clone Object

const copy = { ...original };

39、Debounce

const debounce = (fn, delay) => {  let timeout;  return (...args) => {   clearTimeout(timeout);    timeout = setTimeout(() => fn(...args), delay);  };};

40、正则表达式中的命名捕获组

const url = "https://dev.to";const match = url.match(/(?<protocol>https?):\/\/(?<host>.+)/);console.log(match.groups);

41、 ??= Operator

data.username ??= "guest";

42、Numeric Separators

const big = 1_000_000_000;

43、Top-Level await (in modules)

const user = await fetchUser();

44、Array.from with Map

const numbers = Array.from(new Set([1, 2, 2, 3]));

45、 Group Array by Property

const grouped = data.reduce((acc, obj) => {  acc[obj.type] = acc[obj.type] || [];   acc[obj.type].push(obj);    return acc;   },    {});

46、isFinite()

if (isFinite(num)) { /* safe to use */ }

47、Abort Fetch Request

const controller = new AbortController();fetch(url, { signal: controller.signal });controller.abort();

48、toLocaleString()

(1234567.89).toLocaleString("en-US", {  style: "currency",  currency: "USD"});

49、StructuredClone

const clone = structuredClone(myObj);