学会这些ES6优化技巧，下次别被leader吐槽得满头大汗啦

重生之我要写框架
1,790 阅读6分钟

学会这些ES6优化技巧，别再被leader吐槽得满头大汗啦！

 最近在一次代码评审会上，一位Leader就忍不住吐槽了："你会用ES6，那倒是用啊！"可不是嘛，ES5的写法虽说也不是不行，但有时候代码写得又长又复杂，看着就让人头大。  ES6已经来了好多年啦，可还是有不少小伙伴在写代码的时候，习惯性地用起了老掉牙的ES5写法。今天，我就来给大家分享一些值得用ES6机制优化的技巧，让你的代码瞬间“瘦身”又“提速”！

一、解构赋值：让变量声明变得“优雅”

在开发过程中，从对象或数组里取值，那可是家常便饭。以前用ES5的时候，代码写得又长又繁琐，现在有了ES6的解构赋值，那可就大不一样了。

场景1：从对象中提取多个属性

以前的写法，代码就像“拉面”一样，长长的，看着就累：

const userInfo = {
    username: "Alice",
    age: 25,
    email: "alice@example.com",
    phone: "123-456-7890"
};

const username = userInfo.username;
const age = userInfo.age;
const email = userInfo.email;
const phone = userInfo.phone;

现在用ES6的解构赋值，一行代码就能搞定，简直不要太“优雅”：

const userInfo = {
    username: "Alice",
    age: 25,
    email: "alice@example.com",
    phone: "123-456-7890"
};

const { username, age, email, phone } = userInfo;

要是你担心对象为空或者属性不存在，那就给它加个“安全垫”（默认值）：

const { username, age, email, phone } = userInfo || {};

场景2：从数组中提取多个元素

以前从数组里取值，也是一堆代码，现在用解构赋值，简单又直接：

const numbers = [10, 20, 30, 40, 50];
const [first, second, third] = numbers;

二、模板字符串：让字符串拼接变得“轻松”

字符串拼接，现在有了ES6的模板字符串，可就轻松多了。

场景：拼接字符串并插入变量

以前的写法，要用+拼接：

const name = "Bob";
const age = 30;
let message = "";
if (age >= 18) {
    message = name + " is an adult.";
} else {
    message = name + " is a minor.";
}

现在用模板字符串，一行代码就能搞定，还能在${}里直接写表达式：

const name = "Bob";
const age = 30;
const message = `${name} is ${age >= 18 ? "an adult" : "a minor"}.`;

三、扩展运算符：让数组和对象操作变得“简单”

扩展运算符（...）可是ES6里的“大杀器”，不管是数组还是对象，都能轻松搞定。

场景1：合并数组并去重

以前合并数组，还得用concat，然后再去重：

const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const combined = arr1.concat(arr2);
const unique = combined.filter((item, index) => combined.indexOf(item) === index);

现在用扩展运算符和Set，轻松搞定，再也不用担心重复的元素了：

const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const combined = [...new Set([...arr1, ...arr2])]; // [1, 2, 3, 4, 5]

场景2：合并对象

以前合并对象，还得用Object.assign，现在用扩展运算符，一行代码就能搞定：

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

四、find和filter：让数组操作变得“高效”

在处理数组的时候，find和filter可是两个“好帮手”，它们能让代码变得更简洁、更高效。

场景1：查找数组中的第一个符合条件的元素

以前查找数组中的元素，还得用for循环，代码一层套一层：

const numbers = [10, 20, 30, 40, 50];
let firstEven;
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        firstEven = numbers[i];
        break;
    }
}

现在用find方法，直接找到第一个符合条件的元素，再也不用写繁琐的循环了：

const numbers = [10, 20, 30, 40, 50];
const firstEven = numbers.find(num => num % 2 === 0); // 10

场景2：过滤数组中的元素

以前过滤数组中的元素，也是一堆代码，现在用filter方法，简单又直接：

const numbers = [10, 20, 30, 40, 50];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [10, 20, 30, 40, 50]

五、Promise和async/await：让异步操作变得“简单”

异步操作，以前用Promise的时候，代码就像“迷宫”一样。现在有了async/await，异步代码也能写得像同步代码一样简单。

场景：处理多个异步操作

以前的写法：

const fetchData = () => {
    return new Promise(resolve => {
        setTimeout(() => resolve("Data fetched"), 1000);
    });
};

const processFetchedData = () => {
    return new Promise(resolve => {
        setTimeout(() => resolve("Data processed"), 1000);
    });
};

const performTasks = () => {
    fetchData().then(data => {
        console.log(data); // "Data fetched"
        processFetchedData().then(processedData => {
            console.log(processedData); // "Data processed"
        });
    });
};

现在用async/await，代码就像“剥洋葱”一样，一层一层地解开：

const fetchData = () => {
    return new Promise(resolve => {
        setTimeout(() => resolve("Data fetched"), 1000);
    });
};

const processFetchedData = () => {
    return new Promise(resolve => {
        setTimeout(() => resolve("Data processed"), 1000);
    });
};

const performTasks = async () => {
    const data = await fetchData();
    console.log(data); // "Data fetched"
    const processedData = await processFetchedData();
    console.log(processedData); // "Data processed"
};

六、Object.values和Object.keys：让对象操作变得“轻松”

在处理对象的时候，Object.values和Object.keys可是两个“好帮手”，它们能让代码变得更简洁、更高效。

场景1：获取对象的所有键值

以前获取对象的所有键值，还得用for...in循环：

const user = {
    name: "Charlie",
    age: 22,
    email: "charlie@example.com"
};

const keys = [];
for (let key in user) {
    if (user.hasOwnProperty(key)) {
        keys.push(key);
    }
}

现在用Object.keys，直接获取对象的所有键值，再也不用写繁琐的循环了：

const user = {
    name: "Charlie",
    age: 22,
    email: "charlie@example.com"
};

const keys = Object.keys(user); // ["name", "age", "email"]

场景2：获取对象的所有值

以前获取对象的所有值，也是一堆代码，现在用Object.values，简单又直接：

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj); // [1, 2, 3]

七、可选链操作符：让对象访问变得“安全”

在访问嵌套对象的属性时，以前还得一层一层地检查，代码就像“走钢丝”一样，一不小心就会报错。现在有了可选链操作符（?.），再也不用担心这个问题了。

场景：安全访问嵌套属性

以前的写法：

const user = {
    profile: {
        name: "David",
        age: 28
    }
};

const name = user && user.profile && user.profile.name;

现在用可选链操作符，直接访问嵌套属性，再也不用担心报错了：

const user = {
    profile: {
        name: "David",
        age: 28
    }
};

const name = user?.profile?.name; // "David"

八、空值合并运算符：让变量赋值变得“安全”

在给变量赋值的时候，以前还得检查变量是否为空，代码就像“走钢丝”一样，一不小心就会报错。现在有了空值合并运算符（??），再也不用担心这个问题了。

场景：给变量赋值

以前的写法：

const value = null;
const result = value !== null && value !== undefined ? value : "默认值";

现在用空值合并运算符，直接给变量赋值，再也不用担心报错了：

const value = null;
const result = value ?? "默认值"; // "默认值"

九、总结：ES6让你的代码“瘦身”又“提速”

 ES6的这些优化技巧，能让你的代码变得更简洁、更高效。

 下次代码评审会上，你就不会面对Leader的吐槽满头大汗啦！

avatar
文章
阅读
粉丝