felix-cao / Blog

A little progress a day makes you a big success!
31 stars 4 forks source link

ES5 Object对象的几个不被熟知的特性 #39

Open felix-cao opened 6 years ago

felix-cao commented 6 years ago

一. getter和setter属性方法

  有点像php的魔术方法

var person = {
    get name() {
        return 'Felix Cao';
    },
    set name(value) {
        return value;
    },
};
console.log('Default: ', person.name);
person.name = 'up8.wang';
console.log('After set: ', person.name);

  在控制台console(F12)试一下:

> person.name;
'Felix Cao'
> person.name = 'up8.wang';
'up8.wang'

二. 以逗号结尾是合法的

  从ES5开始,它就是合法的了,你可以在最后一个属性之后加一个逗号。这将有助于你添加一个新的属性(一些人将逗号前置来避免书写错误):

var person = {
  name: 'Felix Cao',
  sex: 'male',
  age: 30, // 合法的逗号
};

三. 对象的属性通常不需要使用引号

  在ES5属性名的语法规范中规定,对象的属性可以是:

1). 字符串作为key

var person = {
  '#§$%': true,
  " \t\n": true,
}

2). 唯一标识符作为key

var person = {
  π: true,
  привет: true,
  café: true,
  $$$: true,
}

3). 数字作为key

var person = {
    1e2: true,
    1e-2: true,
    .234: true,
    0xFF: true,
};

  这些数字key会自动转换为字符串

> Object.keys(person)
< (4) ["100", "255", "0.01", "0.234"]

  与标识符不同。数字不能被点号引用

> person.0xFF
< SyntaxError: Unexpected token
> person[0xFF]
< ture

4). 可以使用保留字作为key

  在 ECMAScript 3中你需要将保留字用引号休修饰这些属性。在 ECMAScript 5没有必要了。

> var person = { class: '.active'};
> person.class;
'.active'