每个开发者都必须知道的20个JavaScript小技巧 🚀

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. 带函数调用的可选链:

可以使用可选链式调用来调用函数，确保在调用之前函数存在。

const user = {
  getName: () => 'Alice',
};
// 这段代码定义了一个用户对象，其中包含一个获取名字的方法。
console.log(user.getName?.());   // 输出结果为 "Alice"，因为 getName 方法返回了 "Alice"
console.log(user.getAge?.());    // 输出结果为 "undefined"，因为 getAge 方法未定义

全屏查看 退出全屏

此处略去

3. 使用||=运算符来进行默认设置。

||= 仅在变量为 null、undefined 或其他类似假值（如 0）时才进行赋值。

    let count; // 定义一个变量count
    count ||= 10; // 如果count未定义，则将其设为10
    console.log(count); // 输出count的值，结果为10

全屏模式 退出全屏

---

（注：原文和初始翻译完全相同，这表明没有提供实际的翻译内容。因此，无法对准确度、流畅度、风格或术语进行评论或改进。）

4.: 使用展开运算符转换节点列表为数组

展开运算符提供了一种快速将 NodeList 展开为数组的方式。

获取所有的 div 元素：
```javascript
const divs = document.querySelectorAll('div');

将 NodeList 转换为数组：

const divArray = [...divs];

检查 divArray 是否为数组：

console.log(Array.isArray(divArray)); // 结果为 true

全屏 退出全屏

…… （表示省略的文本）

5. 带默认值的数组解构赋值和对象解构赋值:

解构时给缺失的键提供默认值，从而避免因缺少键而出现 undefined。

const user = { name: '爱丽丝' };
const { name, age = 25 } = user;
console.log(age); // 25

进入全屏。退出全屏。

……

6. 从数组中移除假值

使用 filter() 方法可以筛选出数组中不需要的 falsy 元素（例如 0、null、undefined、false）。

const arr = [0, 'hello', null, 42, false, 'world'];
// 过滤数组，移除所有非真值元素
const filtered = arr.filter(Boolean);
// 输出过滤后的数组，结果为 ["hello", 42, "world"]
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 加载模块 = async () => { // 加载模块的异步函数定义
      const 模块 = await import('./myModule.js'); // 导入模块
      模块.default(); // 调用默认导出的函数
    };
    加载模块(); // 调用加载模块函数

全屏 退出全屏

---

9. 带有对象解构的默认参数设置:

当你使用默认参数时，也可以拆解属性并设置它们的默认值。

创建一个名为createUser的函数，该函数接受一个对象作为参数，对象包含默认值name为'Guest'和age为18。函数内部打印name和age的值。调用createUser函数时，如果没有提供参数，将使用默认值。如果提供了一个只包含name的参数对象，那么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 (不变)

点击进入全屏，点击退出全屏

---

关注我github上的动态……

GitHub个人主页:

Jagroop2001 (Jagroop) 的 GitHub 个人主页

👨‍💻 全栈开发者 | 🤖 机器学习开发者 | 🤝 技术社区经理 – 💼 可接项目 - Jagroop2001

github.com

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 (第二次调用时从缓存中返回)

全屏 切换全屏

---

12. 使用reduce来对数组元素进行分组:

reduce() 可以按属性分组数组项，在处理数据时经常会用到这种方法。

    const people = [
      { 姓名: 'Alice', 角色: '管理员' },
      { 姓名: 'Bob', 角色: '用户' },
      { 姓名: 'Charlie', 角色: '管理员' },
    ];
    const grouped = people.reduce((acc, person) => {
      (acc[person.角色] = acc[person.角色] || []).push(person);
      return acc;
    }, {});
    console.log(grouped);
    // 输出结果为：管理员：[{ 姓名：'Alice' }, { 姓名：'Charlie' }]，用户：[{ 姓名：'Bob' }]

全屏模式，退出全屏

---

13. 使用 Array.flat(Infinity) 来扁平化嵌套的数组

将多层次嵌套的数组展平变得超级简单，可以试试 Array.flat(Infinity)。

const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]
// 以下代码是一个将嵌套数组展平的例子

全屏，退出全屏

---

14. 用!翻转布尔值

将布尔值切换就像使用 NOT 操作符两次一样简单。

    let isVisible = false;
    isVisible = !isVisible; // 将 isVisible 取反，变为 true
    console.log(isVisible); // true

全屏模式：进入，退出

---

15. 使用concat()方法合并多个JavaScript数组的内容

concat()在用单个语句合并多个数组时很有用。

    const 数组1 = [1, 2];
    const 数组2 = [3, 4];
    const 数组3 = [5, 6];
    const 合并的数组 = 数组1.concat(数组2, 数组3);
    console.log(合并的数组); // [1, 2, 3, 4, 5, 6]

全屏模式 退出全屏

---

16. 使用for...of和await进行异步遍历数组

当你用 for...of 和 await 迭代一个异步任务数组时，确保每个异步任务完成后再处理下一个。

    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)); // 输出数组的最后一个元素

全屏模式，退出全屏

---

18: 使用Intl进行日期格式处理

Intl.DateTimeFormat 提供了一种在不同地区格式化日期的强大方法。

    const date = new Date();
    const formatted = new Intl.DateTimeFormat('zh-CN', {
      dateStyle: 'full',
    }).format(date);
    console.log(formatted); // 例如：星期一，2021年10月25日

全屏模式 退出全屏

---

19 使用Math.round()和模板字符串处理数值

模板字符串可以直接将数字四舍五入并格式化。

    const num = 3.14159;
    console.log(`${Math.round(num * 100) / 100}`); // 输出结果为 3.14

进入全屏 退出全屏

---

20. 使用 Array.from() 将数组类似对象转换为数组。

可以使用 Array.from() 将类似数组的对象（如参数对象）转换为真正的数组。

    function example() {
      const 参数数组 = Array.from(arguments);
      console.log(参数数组);
    }
    example(1, 2, 3); // 输出: [1, 2, 3]

全屏，退出全屏

---

这些技巧都能简化JavaScript中的常见编码模式。将它们融入你的日常工作中，写出既高效又清晰的代码。

编码愉快！🚀