30 个 JavaScript 技巧

2025-05-25

30 个 JavaScript 技巧

欢迎来到我们精心挑选的 JavaScript 技巧集合，它将帮助您优化代码，使其更具可读性，并节省您的时间。

让我们深入研究超越传统的 JavaScript 功能和技巧，并发现这种强大的编程语言的全部潜力。

1. 使用 !! 转换为布尔值

使用双重否定快速将任何值转换为布尔值。


        let truthyValue = !!1; // true
        let falsyValue = !!0; // false
Enter fullscreen mode Exit fullscreen mode

2. 默认函数参数

为函数参数设置默认值以避免未定义的错误。


        function greet(name = "Guest") {
            return `Hello, ${name}!`;
        }
Enter fullscreen mode Exit fullscreen mode

3. 短 If-Else 的三元运算符

该语句的简写if-else。


        let price = 100;
        let message = price > 50 ? "Expensive" : "Cheap";
Enter fullscreen mode Exit fullscreen mode

4. 动态字符串的模板字面量

使用模板文字在字符串中嵌入表达式。


        let item = "coffee";
        let price = 15;
        console.log(`One ${item} costs $${price}.`);
Enter fullscreen mode Exit fullscreen mode

5. 解构赋值

轻松从对象或数组中提取属性。


        let [x, y] = [1, 2];
        let {name, age} = {name: "Alice", age: 30};
Enter fullscreen mode Exit fullscreen mode

6. 用于数组和对象克隆的扩展运算符

克隆数组或对象而不引用原始数组或对象。


        let originalArray = [1, 2, 3];
        let clonedArray = [...originalArray];
Enter fullscreen mode Exit fullscreen mode

7. 短路评估

使用逻辑运算符进行条件执行。


        let isValid = true;
        isValid && console.log("Valid!");
Enter fullscreen mode Exit fullscreen mode

8.可选链式调用（？。）

如果引用是，则可以安全地访问嵌套对象属性而不会出现错误nullish。


        let user = {name: "John", address: {city: "New York"}};
        console.log(user?.address?.city); // "New York"
Enter fullscreen mode Exit fullscreen mode

9. 空值合并运算符（??）

用于为或??提供默认值。nullundefined


        let username = null;
        console.log(username ?? "Guest"); // "Guest"
Enter fullscreen mode Exit fullscreen mode

monday.com 的交互式横幅展示了在数字界面上组织工作流程任务的手，并带有一个行动号召按钮“告诉我如何做”。

10. 使用map、filter、 和reduce进行数组操作

不使用传统循环来处理数组的优雅方法。


        // Map
        let numbers = [1, 2, 3, 4];
        let doubled = numbers.map(x => x * 2);

        // Filter
        const evens = numbers.filter(x => x % 2 === 0);

        // Reduce
        const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
Enter fullscreen mode Exit fullscreen mode

11. 带标签的模板字面量

使用模板文字的函数调用进行自定义字符串处理。


        function highlight(strings, ...values) {
            return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ''}`, '');
        }
        let price = 10;
        console.log(highlight`The price is ${price} dollars.`);
Enter fullscreen mode Exit fullscreen mode

12. 使用 Object.entries() 和 Object.fromEntries()

将对象转换为数组并转回，以便于操作。


        let person = {name: "Alice", age: 25};
        let entries = Object.entries(person);
        let newPerson = Object.fromEntries(entries);
Enter fullscreen mode Exit fullscreen mode

13. 唯一元素的集合对象

使用 Set 存储任何类型的唯一值。


        let numbers = [1, 1, 2, 3, 4, 4];
        let uniqueNumbers = [...new Set(numbers)];
Enter fullscreen mode Exit fullscreen mode

14. 对象中的动态属性名称

在对象文字表示法中使用方括号来创建动态属性名称。


        let dynamicKey = 'name';
        let person = {[dynamicKey]: "Alice"};
Enter fullscreen mode Exit fullscreen mode

15. 使用 bind() 函数进行柯里化

创建一个新函数，当调用该函数时，其 this 关键字设置为提供的值。


        function multiply(a, b) {
            return a * b;
        }
        let double = multiply.bind(null, 2);
        console.log(double(5)); // 10
Enter fullscreen mode Exit fullscreen mode

16. 使用 Array.from() 从类数组对象创建数组

将类似数组或可迭代的对象转换为真正的数组。


        let nodeList = document.querySelectorAll('div');
        let nodeArray = Array.from(nodeList);
Enter fullscreen mode Exit fullscreen mode

17. 可迭代对象的 for…of 循环

直接迭代可迭代对象（包括数组、映射、集合等）。


        for (let value of ['a', 'b', 'c']) {
            console.log(value);
        }
Enter fullscreen mode Exit fullscreen mode

18. 使用 Promise.all() 实现并发 Promise

同时运行多个承诺并等待所有承诺完成。


        let promises = [fetch(url1), fetch(url2)];
        Promise.all(promises)
        .then(responses => console.log('All done'));
Enter fullscreen mode Exit fullscreen mode

19. 函数参数的剩余参数

将任意数量的参数捕获到数组中。


        function sum(...nums) {
            return nums.reduce((acc, current) => acc + current, 0);
        }
Enter fullscreen mode Exit fullscreen mode

Coursera Plus 订阅产品包括 AWS Fundamentals、Google IT Support Professional Certificate 和 Cyber​​ Security for Business Specialization。

20. 记忆化性能优化

存储函数结果以避免重复处理。


        const memoize = (fn) => {
            const cache = {};
            return (...args) => {
                let n = args[0];  // assuming single argument for simplicity
                if (n in cache) {
                    console.log('Fetching from cache');
                    return cache[n];
                }
                else {
                    console.log('Calculating result');
                    let result = fn(n);
                    cache[n] = result;
                    return result;
                }
            };
        };
Enter fullscreen mode Exit fullscreen mode

21. 使用 ^ 交换值

使用 XOR 按位运算符交换两个变量（不带临时变量）的值。


        let a = 1, b = 2;
        a ^= b; b ^= a; a ^= b; // a = 2, b = 1
Enter fullscreen mode Exit fullscreen mode

22. 使用 flat() 展平数组

使用该方法可以轻松地展平嵌套数组flat()，并将展平深度作为可选参数。


        let nestedArray = [1, [2, [3, [4]]]];
        let flatArray = nestedArray.flat(Infinity);
Enter fullscreen mode Exit fullscreen mode

23. 使用一元加法转换为数字

使用一元加运算符快速将字符串或其他值转换为数字。


        let str = "123";
        let num = +str; // 123 as a number
Enter fullscreen mode Exit fullscreen mode

24. HTML 片段的模板字符串

使用模板字符串创建 HTML 片段，使动态 HTML 生成更清晰。


        let items = ['apple', 'orange', 'banana'];
        let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;
Enter fullscreen mode Exit fullscreen mode

25. 使用 Object.assign() 合并对象

将多个源对象合并为一个目标对象，有效地结合它们的属性。


        let obj1 = { a: 1 }, obj2 = { b: 2 };
        let merged = Object.assign({}, obj1, obj2);
Enter fullscreen mode Exit fullscreen mode

符合人体工程学的垂直鼠标设计可减轻手腕压力

使用符合人体工程学的鼠标优化您的编程设置，专为舒适和长时间编码而设计。

26. 短路默认值

处理可能未定义或为空的变量时，利用逻辑运算符分配默认值。


        let options = userOptions || defaultOptions;
Enter fullscreen mode Exit fullscreen mode

27. 使用括号表示法动态访问对象属性

使用括号表示法动态访问对象的属性，当属性名称存储在变量中时很有用。


        let property = "name";
        let value = person[property]; // Equivalent to person.name
Enter fullscreen mode Exit fullscreen mode

28. 使用 Array.includes() 进行存在性检查

使用 includes() 检查数组是否包含某个值，这是 indexOf 的更清晰的替代方法。


        if (myArray.includes("value")) {
            // Do something
        }
Enter fullscreen mode Exit fullscreen mode

29. Function.prototype.bind() 的强大功能

将函数绑定到上下文（此值）并部分应用参数，从而创建更可重用和模块化的代码。


        const greet = function(greeting, punctuation) {
            return `${greeting}, ${this.name}${punctuation}`;
        };
        const greetJohn = greet.bind({name: 'John'}, 'Hello');
        console.log(greetJohn('!')); // "Hello, John!"
Enter fullscreen mode Exit fullscreen mode

30. 防止对象修改

使用 防止对象被修改Object.freeze()，使其不可变。为了实现更深层次的不变性，可以考虑使用更彻底地强制执行不变性的库。


        let obj = { name: "Immutable" };
        Object.freeze(obj);
        obj.name = "Mutable"; // Fails silently in non-strict mode
Enter fullscreen mode Exit fullscreen mode

我希望这些 JavaScript 技巧能为您提供有关如何进行JavaScript 编程的新视角。

map从利用模板文字的简洁功能到掌握、filter和的效率reduce，这些 JavaScript 技巧将丰富您的开发工作流程并激发您的下一个项目。

这些 JavaScript 技巧不仅可以完善您当前的项目，还可以激发您编码之旅未来创新的灵感。

支持我们的技术洞察

给我买杯咖啡

通过 PayPal 按钮捐款

注意：本页面部分链接可能是联盟链接。如果您通过这些链接购买商品，我可能会赚取少量佣金，但不会额外收取您的费用。感谢您的支持！

文章来源：https://dev.to/mainulspace/30-javascript-tricky-hacks-gfc
Devto 翻译
PREV
如何在 Android 设备上本地运行 DeepSeek R1
NEXT
丰富的资源和材料可提升您的编程技能框架、库