simple's Studio.

对象字面量简写法

2017/11/02

ES6 中经常出现的一个现象是删掉不必要的重复代码。通过删掉不必要的重复代码,代码更容易读懂,并且更简练。推出的新简写法(用来初始化对象并向对象中添加方法)就是这一体现。

我们看看具体情况。

对象字面量简写法
你可能写过这样的代码:使用和所分配的变量名称相同的名称初始化对象。

如果没写过的话,看看下面的示例。

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
  type: type,
  color: color,
  carat: carat
};

console.log(gemstone);
Prints: Object {type: "quartz", color: "rose", carat: 21.29}

看到重复的地方了吗?type: type、color: color 和 carat:carat 不显得很冗长吗?

好消息是,如果属性名称和所分配的变量名称一样,那么就可以从对象属性中删掉这些重复的变量名称。

我们来看看!

如果对象属性的名称和所分配的变量的名称相同,则可以删掉重复的变量名称。
说到简写法,还有一种向对象中添加方法的简写方式。

要看看具体写法,我们先向 gemstone 对象添加 calculateWorth() 方法。calculateWorth() 方法将根据宝石的 type、color 和 carat 告诉我们宝石成本多少。

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
  type,
  color,
  carat,
  calculateWorth: function() {
    // will calculate worth of gemstone based on type, color, and carat
  }
};

在此示例中,匿名函数被分配给属性 calculateWorth,但是真的需要 function 关键字吗?在 ES6 中不需要!

简写方法名称
因为只需引用 gemstone 的 calculateWorth 属性以便调用该函数,因此关键字 function 是多余的,可以删掉。

1
2
3
4
5
6
let gemstone = {
type,
color,
carat,
calculateWorth() { ... }
};

CATALOG