ES8/ES2017 中使用 Trailing commas 处理数组和对象-JavaScript中文网-JavaScript教程资源分享门户

在 ES8/ES2017 中，JavaScript 引入了 Trailing commas 的语法，可以在数组和对象的最后一个元素后面添加逗号。这个小小的语法变化在编码中却有很大的作用，尤其是在协作开发、版本控制和代码维护方面。

1. 什么是 Trailing commas？

Trailing commas 指的是在数组和对象的最后一个元素后面添加逗号。在 ES6 之前，这样做是非法的，但在 ES8/ES2017 中，这种写法被正式支持了。

const arr = [1, 2, 3,];
const obj = {
  name: 'Tom',
  age: 20,
};

如上所示，数组和对象的最后一个元素后面都添加了逗号，这就是 Trailing commas 的写法。

虽然 Trailing commas 看起来只是一种小小的语法变化，但它在编码中有很多优势，下面我们来看一下这些优势。

在版本控制中，如果我们需要添加一个新的元素到数组或对象中，通常需要在最后一个元素后面添加一个新的元素，这样会导致最后一个元素和新添加的元素之间没有逗号，这就会引起版本控制的麻烦。

const arr = [1, 2, 3];
const obj = {
  name: 'Tom',
  age: 20
};

如上所示，如果我们需要在数组和对象中添加一个新的元素，就需要在最后一个元素后面添加一个新的元素，这样会导致最后一个元素和新添加的元素之间没有逗号，这就会引起版本控制的麻烦。

但是，在使用 Trailing commas 的写法中，我们可以在最后一个元素后面添加一个逗号，这样就不会引起版本控制的麻烦了。

const arr = [1, 2, 3,];
const obj = {
  name: 'Tom',
  age: 20,
};

如上所示，使用 Trailing commas 的写法可以避免版本控制的麻烦。

在 ES6 之前，如果我们不小心添加了一个多余的逗号，就会引起语法错误。

const arr = [1, 2, 3,];
const obj = {
  name: 'Tom',
  age: 20, // 多余的逗号，会引起语法错误
};

如上所示，如果我们不小心添加了一个多余的逗号，就会引起语法错误。

但是，在使用 Trailing commas 的写法中，即使我们不小心添加了一个多余的逗号，也不会引起语法错误。

const arr = [1, 2, 3,];
const obj = {
  name: 'Tom',
  age: 20, // 多余的逗号，也不会引起语法错误
};

如上所示，使用 Trailing commas 的写法可以避免语法错误。

在协作开发中，我们经常需要对代码进行修改或调整，如果我们使用 Trailing commas 的写法，就可以很方便地进行代码维护。

// javascriptcn.com 代码示例
const arr = [
  1,
  2,
  3,
];

const obj = {
  name: 'Tom',
  age: 20,
};

如上所示，使用 Trailing commas 的写法可以让代码更加清晰，便于代码维护。

虽然 Trailing commas 有很多优势，但在使用时也需要注意一些事项。

在函数调用中，不能使用 Trailing commas 的写法，否则会引起语法错误。

// 语法错误
function test(a, b, c,) {
  console.log(a, b, c);
}

如上所示，如果在函数调用中使用 Trailing commas 的写法，就会引起语法错误。

在模板字面量中，不能使用 Trailing commas 的写法，否则会引起语法错误。

// 语法错误
const str = `hello, ${name},`;

如上所示，如果在模板字面量中使用 Trailing commas 的写法，就会引起语法错误。

在类中，不能使用 Trailing commas 的写法，否则会引起语法错误。

// 语法错误
class Person {
  name = 'Tom';
  age = 20, // 不能使用 Trailing commas 的写法
}

如上所示，如果在类中使用 Trailing commas 的写法，就会引起语法错误。

Trailing commas 是 ES8/ES2017 中新增的语法，它可以在数组和对象的最后一个元素后面添加逗号。使用 Trailing commas 的写法可以避免版本控制的麻烦、避免语法错误、便于代码维护等。但在使用时也需要注意一些事项，如不能在函数调用、模板字面量和类中使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65631670d2f5e1655dcc7fd9