ES2015入门系列8-新对象特性

继续以代码进行展开, 在ES5中,如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function makeDuckToy() {
var name = '鸭子';
var color = '黄色';
return {
name: name,
color: color,
quacks: function() {
console.log('嘎嘎嘎~~~');
}
}
}

var duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

ES2015为对象带来的新特性:

  • 属性简写

如果属性名称和变量名称一致,那么可以直接用省略变量名,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function makeDuckToy() {
let name = '鸭子';
let color = '黄色';
return {
name,
color,
quacks: function() {
console.log('嘎嘎嘎~~~');
}
}
}

let duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~
  • 方法简写

方法可以省略冒号以及function关键字, 如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function makeDuckToy() {
let name = '鸭子';
let color = '黄色';
return {
name,
color,
quacks() {
console.log('嘎嘎嘎~~~');
}
}
}

let duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~
  • 解构赋值

解构赋值,我们之前已经讲过,这里再继续举个例子:

ES5中,假设从ajax中获取数据,并取出想要的值:

1
2
3
4
5
6
7
8
9
10
11
function ajax() {
return {
status: true,
data: ['鸭子', '老虎'],
total: 12
}
}

var result = ajax();
var data = result.data;
var total = result.total;

有了 解构赋值,代码就可以简化成:

1
2
3
4
5
6
7
8
9
function ajax() {
return {
status: true,
data: ['鸭子', '老虎'],
total: 12
}
}

let {data, total} = ajax();

就是如此方便,不是吗?

本文使用「CC BY 4.0」创作共享协议,只要在使用时署名,您可以对本文进行转载、节选、混编、二次创作,并允许商业性使用。
本文为作者原创,如果您认为本文对您有帮助,欢迎打赏作者