10 个 必备的JavaScript 实用技巧和最佳实践！

嘿，各位开发者！准备好了让你的 JavaScript 代码更上一层楼吗？😄

今天就来聊聊一些必备的 JavaScript 技巧和最佳实践，无论你是初学者还是经验丰富的开发者，这些技巧都能帮你写出更优雅、更强大的代码！

准备好你的咖啡，我们一起开始学习吧！  ☕️

1. 用 Promise.all() 取代 await

还记得我们以前总是让代码一个一个地执行吗？现在有了 Promise.all() ，可以让多个任务同时进行，大幅减少执行时间！效率提升不止一点点！

const getUsers = async () => {
    const customers = await findAllCustomers();
    const admins = await findAllAdmins();
    const totalUsers = await countTotalUsers();

    return { customers, admins, totalUsers };
}

改成：

const getUsers = async () => {
    const customers = findAllCustomers();
    const admins = findAllAdmins();
    const totalUsers = countTotalUsers();

    return Promise.all([customers, admins, totalUsers]);
}

使用 Promise.all()，每个任务都能同时进行，提升应用的性能和响应速度，简直不要太爽！

2. 合并数组，不占服务器内存

合并数组时，对于小数组，Array.concat() 很方便。但遇到大型数组，就要小心了！Array.concat() 会创建一个新的数组，消耗大量服务器内存。

这时候，试试 Array.push.apply 吧：

let array1 = [1, 2, 3]; 
let array2 = [4, 5, 6]; 
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

是不是很简单？用 Array.push.apply 可以优化内存使用，提升代码性能，节约服务器资源。

3. 用对象映射简化代码，提升性能

假设你需要根据客户的忠诚度等级计算折扣，传统的 if-else 方法和 switch 语句都比较繁琐，不如试试对象映射：

function calculateDiscount(loyaltyLevel) {
    console.time('object time');
    const discountMap = {
        'GOLD': applyGoldDiscount,
        'SILVER': applySilverDiscount,
        'BRONZE': applyBronzeDiscount
    };
    discountMap[loyaltyLevel] && discountMap[loyaltyLevel]();
    console.timeEnd('object time');
}

是不是一目了然？对象映射方法不仅更简洁，而且执行速度更快，让你的代码更优雅、更高效！

4. 用 Set() 去除数组中的重复元素

处理唯一值的时候，Set() 对象可是个好帮手！

假设你有一个包含数字的数组，你需要去除重复元素：

function removeDuplicates(arr) {
    console.time('set time');
    const uniqueSet = new Set(arr);
    const uniqueArray = [...uniqueSet];
    console.timeEnd('set time');
    return uniqueArray;
}

是不是很神奇？Set() 自动去除重复元素，不仅代码更简洁，还能提高唯一值提取的速度！

5. 将回调函数转换为 Promise

以前处理异步操作时，回调函数可是让我们头疼，现在有了 util.promisify，可以将回调函数转换为 Promise，让你的代码更简洁，更易于理解！

假设你有一个等待指定时间的回调函数：

const util = require('util');

// 传统回调函数
function waitForSomeTime(callback) {
    setTimeout(() => {
        console.log('时间到了！');
        callback(null, '完成！');
    }, 2000);
}

使用 util.promisify 转换为 Promise：

// 使用 util.promisify 转换后的 Promise 版本
const waitForSomeTimeAsync = util.promisify(waitForSomeTime);

然后，就可以使用 async/await 编写更简洁的异步代码：

// 使用 async/await 和 promisify 函数
async function asyncOperation() {
    try {
        console.log('等待一段时间...');
        const result = await waitForSomeTimeAsync();
        console.log(result);
    } catch (error) {
        console.error('错误:', error);
    }
}

asyncOperation();

是不是一下子就清晰多了？使用 Promise 和 async/await ，异步操作变得更简单，代码更优雅！

6. 用 Array.includes() 快速判断元素是否存在

在 JavaScript 中，判断一个元素是否在数组中， Array.includes() 简直是神器！

function checkMembership(value) {
    const array = [1, 2, 3, 4, 5];

    if (array.includes(value)) {
        console.log('值存在于数组中！');
    } else {
        console.log('值不存在于数组中！');
    }
}

Array.includes() 不仅更简洁，而且可读性更强，写代码的时候更顺手！

7. 缓存数据，提升效率

为了提升代码性能，我们可以使用缓存机制，避免重复获取数据。

假设你有一个数据库函数，可以添加缓存机制：

function dataFunction() {
    const data = {
        101: { id: 101, product: '笔记本电脑' },
        202: { id: 202, product: '智能手机' },
        // ... 更多示例数据 ...
    };

    const cache = {};

    return {
        get: function (id) {
            if (id in cache) {
                return cache[id];
            } else {
                const result = data[id];
                cache[id] = result;

                // 限制缓存大小以防止内存泄漏
                const cacheKeys = Object.keys(cache);
                if (cacheKeys.length > 5) {
                    const oldestKey = cacheKeys.shift();
                    delete cache[oldestKey];
                }

                return result;
            }
        },
    };
}

const myData = dataFunction();

console.log(myData.get(1)); // 获取并缓存 id 为 1 的数据
console.log(myData.get(2)); // 获取并缓存 id 为 2 的数据
console.log(myData.get(1)); // 从缓存中获取 id 为 1 的数据
console.log(myData.get(3)); // 获取并缓存 id 为 3 的数据，并移除缓存中最旧的条目

使用缓存机制可以减少重复的数据获取，提升性能，还能有效地管理内存。

8. 用解构赋值简化对象赋值

JavaScript 中的解构赋值功能，真的太方便了！可以让你轻松地从对象或数组中提取值。

const user = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    country: 'USA',
};

const { firstName, lastName, age, country } = user;

console.log(firstName, lastName, age, country); // 输出: John Doe 30 USA

一行代码搞定，是不是很简洁？

9. 用 Array.flat() 扁平化多维数组

Array.flat() 可以轻松地将嵌套数组扁平化，让代码更简洁。

const nestedArray = [1, [2, [3, [4, 5]]], 6];
const flattenedArray = nestedArray.flat(Infinity);
console.log(flattenedArray); // 输出: [1, 2, 3, 4, 5, 6]

Infinity 参数可以扁平化任何深度的嵌套数组。

10. 使用柯里化简化数据过滤

柯里化是一种函数式编程技巧，可以将一个多参数函数转换为一系列单参数函数，让代码更灵活、更易于重用。

// 使用柯里化
const dataFilterWithCurry = (data) => (criteria) => {
    return data.filter(item => item > criteria);
};

const curryFilter = dataFilterWithCurry(dataSet);
console.log(curryFilter(5));  // 柯里化函数调用
console.log(curryFilter(10)); // 柯里化函数调用

使用柯里化，可以让你的代码更简洁、更易于复用。

总结：

掌握这些 JavaScript 技巧，可以让你写出更简洁、更高效、更优雅的代码，让你成为更优秀的 JavaScript 开发者！

最后，别忘了还有更多精彩内容等你探索！

往期推荐

38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集

12 种 Vue 设计模式

CSS 秘密武器：25 个小技巧，助你写出更优雅的代码！

JavaScript 的新技能：5 大技巧，打造更强大的 Web 应用

Vue 3 表单大揭秘：用 ref、组合式 API 和 v-for 打造你的专属表单！

程序员必备：9 个超赞的速查表网站，2024 年开发效率翻倍！

Vue 如何处理异步组件加载错误

Vue 3 将推出新特性，可以抛弃虚拟DOM了！

我是前端宝哥，每日分享前端开发技术，关注下面二维码，围观我的朋友圈。

备注【文章群】可以进文章分享群，

备注【技术群】可以进技术交流群，

备注【副业群】可以进程序员副业群。

关注下方公众号加星标，送我的电子书资料

• 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF

• 回复「Vue脑图」获取 Vue 相关脑图

• 回复「思维图」获取 JavaScript 相关思维图

• 回复「简历」获取简历制作建议

• 回复「简历模板」获取精选的简历模板

• 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。

• 回复「知识点」下载高清JavaScript知识点图谱

• 回复「读书」下载成长的相关电子书

PS：感谢您读到这里。原创更文不易，请关注我，加个星标。文章末尾点赞+在看，您的认同，将是我前行的最大动力！