15 个 JavaScript 简写技巧，效率提升 70%-51CTO.COM

自从ES6问世以来，JavaScript的语法变得更加简洁和易读。下面就由前端君来给大家好好讲讲，如何用一些简写技巧来让JavaScript代码更加优雅。

1. 箭头函数

这个可是简化函数表达式的神器，而且它没有自己的this，用起来特别方便。

// 以前写法
var greet = function(name) {
  console.log("Hello, " + name);
};

// 现在简化后
const greet = name => console.log(`Hello, ${name}`);1.
2.
3.
4.
5.
6.
7.

2. 默认参数

给函数参数设置默认值，这样调用函数时就不用担心忘记传参数了。

function createUser(name = "Guest", age = 30) {
  // ...
}1.
2.
3.

3. 模板字符串

用反引号来定义字符串，不仅支持多行文本，还能直接嵌入变量，简直是太方便了。

const message = `Hello,
My name is ${name}`;1.
2.

4. 解构赋值

从数组或对象中直接提取数据赋值给变量，省去了中间的步骤。

对象解构：

const { prop1, prop2 } = obj;1.

数组解构：

const [first, second] = arr;1.

5. 展开运算符

这个运算符可以用来复制数组、合并数组或对象，用法超级灵活。

const newArray = [...oldArray];
const newObj = { ...obj1, ...obj2 };1.
2.

6. 计算属性名

允许我们用表达式作为对象的键名，这样就能动态地设置键名了。

const keyName = "dynamicKey";
const obj = {
  [keyName]: "value"
};1.
2.
3.
4.

7. 简化的对象方法定义

定义对象的方法时，可以省略function关键字，让代码更加简洁。

const obj = {
  method() {
    // 方法体
  }
};1.
2.
3.
4.
5.

8. 类的简写

在类中定义方法时，也可以省略function关键字，还能用static关键字定义静态方法，真是省心省力。

class MyClass {
  constructor() {}
  method() {}
  static staticMethod() {}
}1.
2.
3.
4.
5.

9. 简单的getter/setter

简化了对象属性的读取和设置，用起来特别直观。

class Person {
  constructor(age) {
    this._age = age;
  }

  get age() {
    return this._age;
  }

  set age(value) {
    this._age = value;
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

10. for...of循环

遍历可迭代对象（比如数组、字符串、Map、Set等）的元素，用起来特别方便。

for (let value of iterable) {
  console.log(value);
}1.
2.
3.

11. Promise 和 async/await

这个组合真是异步操作的救星，让咱们可以用同步的方式写出异步代码，特别是async/await避免了烦人的回调地狱。

async function fetchData() {
  try {
    let response = await fetch(url);
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.

12. 省略分号

虽然这不是推荐的做法，但JavaScript会自动插入分号，在某些情况下可以省略它们，不过还是建议大家为了代码的可读性，尽量不要省略分号。

13. 运算符简写

三元运算符：代替简单的if...else语句，让代码更加简洁。

const result = condition ? trueValue : falseValue;1.

逻辑运算符赋值：&&=, ||=, ??=分别代表逻辑与赋值、逻辑或赋值、空值合并赋值。

let x;
x ||= "default"; // 如果x是falsey，则赋值"default"1.
2.

空值合并运算符：??用于处理null或undefined。

const userSetting = userPref ?? 'default';1.

14. import/export模块化

简化了模块的导入导出，让代码的组织更加清晰。

// 导入所有成员
import * as lib from './lib';

// 导出多个成员
export { member1, member2 };

// 默认导出
export default class MyClass {};1.
2.
3.
4.
5.
6.
7.
8.

15. Rest 参数

这个参数可以收集剩余的参数到一个数组中，特别适合处理可变数量的参数。

function sum(...args) {
  return args.reduce((a, b) => a + b, 0);
}1.
2.
3.

以上这些技术都能帮助我们写出更加简洁、高效的JavaScript代码。不过，咱们在追求代码简洁的同时，也一定要注意保持代码的可读性和维护性，大家在实际开发中，还是要根据具体情况来选择合适的简写方式哦！