前端H5开发前端开发

ES6 对象的扩展

2019-03-11  本文已影响9人  海之深处爱之港湾

1.属性的简洁表示法

ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

const foo = 'bar';

const baz = {foo};

baz // {foo: "baz"}

等同于

const baz = {foo:foo};

上面代码表明,ES6允许在对象之中,直接写变量。这时,属性名为变量名,属性值为变量的值。下面是另一个例子。

funciton f(x,y) {

return {x,y};

}

//等同于

function f(x,y) {

return {x:x,y:y};

}

f(1,2) //Object {x:1,y:2}

除了属性简写,方法也可以简写。

const o = {

method() {

return "Hello!";

}

};

//等同于

const o = {

mthod:function() {

return "Hello!";

}

};

下面是一个实际的例子。

let birth = '2000/01/01';

const Person = {

name:'张三‘;

birth, //等同于birth:birth

hello(){console.log('我的名字是,this.name);} //等同于hello:function().....

}

这种写法用于函数的返回值,将会非常方便。

funciton getPonit() {

const x = 1;

const y = 10;

return {x,y};

}

getPoint()

// {x:1,y:10}

commonJS模块输出一组变量,就非常合适使用简洁写法。

let ms = {};

function getItem (key) {

return key in ms ?ms[key] :null;

}

function setItem (key,value) {

ms[key] = value;

}

function clear () {

ms = {};

}

module.exports = {getItem,setItem,clear};

//等同于

modu;e.exports = {

getItem:getItem,

setItem:setItem,

clear:clear

};

属性的赋值器(setter)和(getter),事实上也是采用这种方法。

const cart = {

_wheels:4,

get wheels () {

return this._wheels;

},

set wheels (value) {

if(value < this._wheels) {

throw new Error('数值太小了');

}

this._wheels = value;

}

}

注意,简洁写法的属性名总是字符串,这会导致一些看上去比较奇怪的结果。

const obj = {

  class () {}

};

// 等同于

var obj = {

  'class': function() {}

};

上面代码中,class是字符串,所以不会因为它属于关键字,而导致语法解析报错。

如果某个方法的值是一个 Generator 函数,前面需要加上星号。

const obj = {

  * m() {

    yield 'hello world';

  }

};


2.属性名表达式

javaScript定义对象的属性,有两种方法。

//方法一

obj.foo = true;

// 方法二

obj['a' + 'bc'] = 123;

上面代码的方法一是直接用标识符座位属性名,方法二是用表倒是作为属性名,这时要将表达式放在方括号之内。

但是,如果使用字面量方式定义对象(使用大括号),在ES5中只能使用方法一(标识符)定义属性。

var obj = {

foo:true,

abc:123

}

ES6允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在括号之内。

let propKey = 'foo';

let obj = {

[proKey]:true,

['a' + 'bc']:123

};

下面是另一个例子。

let lastWord = 'last word';

const a = {

  'first word': 'hello',

  [lastWord]: 'world'

};

a['first word'] // "hello"

a[lastWord] // "world"

a['last word'] // "world"

表达式还可以用于定义方法名。

let obj = {

  ['h' + 'ello']() {

    return 'hi';

  }

};

obj.hello() // hi

注意,属性名表达式与简洁表示法,不能同时使用,会报错。

// 报错

const foo = 'bar';

const bar = 'abc';

const baz = { [foo] };

// 正确

const foo = 'bar';

const baz = { [foo]: 'abc'};

注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object object],这一点要特别小心。

const keyA = {a: 1};

const keyB = {b: 2};

const myObject = {

  [keyA]: 'valueA',

  [keyB]: 'valueB'

};

myObject // Object {[object Object]: "valueB"}

上面代码中,[keyA]和[keyB]得到的都是[object Object],所以[keyB]会把[keyA]覆盖掉,而myObject最后只有一个[object Object]属性。


3.方法的name属性

函数name属性,返回函数名。对象方法也是函数,因此也有name属性。

const person = {

  sayName() {

    console.log('hello!');

  },

};

person.sayName.name  // "sayName"

上面代码中,方法的name属性返回函数名(即方法名)。

如果对象的方法使用了取值函数(getter)和存值函数(setter),则name属性不是在该方法上面,而是该方法的属性的描述对象的get和set属性上面,返回值是方法名前加上get和set。

const obj = {

  get foo() {},

  set foo(x) {}

};

obj.foo.name

// TypeError: Cannot read property 'name' of undefined

const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');

descriptor.get.name // "get foo"

descriptor.set.name // "set foo"

有两种特殊情况:bind方法创造的函数,name属性返回bound加上原函数的名字;Function构造函数创造的函数,name属性返回anonymous。

(new Function()).name // "anonymous"

var doSomething = function() {

  // ...

};

doSomething.bind().name // "bound doSomething"

如果对象的方法是一个 Symbol 值,那么name属性返回的是这个 Symbol 值的描述。

const key1 = Symbol('description');

const key2 = Symbol();

let obj = {

  [key1]() {},

  [key2]() {},

};

obj[key1].name // "[description]"

obj[key2].name // ""

上面代码中,key1对应的 Symbol 值有描述,key2没有。


4.属性的遍历

ES6 一共有 5 种方法可以遍历对象的属性。

(1)for...in

for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

(2)Object.keys(obj)

Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

(3)Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。

以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。

首先遍历所有数值键,按照数值升序排列。

其次遍历所有字符串键,按照加入时间升序排列。

最后遍历所有 Symbol 键,按照加入时间升序排列。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })

// ['2', '10', 'b', 'a', Symbol()]

上面代码中,Reflect.ownKeys方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性2和10,其次是字符串属性b和a,最后是 Symbol 属性。


5. super 关键字

我们知道,this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。

const proto = {

  foo: 'hello'

};

const obj = {

  foo: 'world',

  find() {

    return super.foo;

  }

};

Object.setPrototypeOf(obj, proto);

obj.find() // "hello"

上面代码中,对象obj.find()方法之中,通过super.foo引用了原型对象proto的foo属性。

注意,super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。

// 报错

const obj = {

  foo: super.foo

}

// 报错

const obj = {

  foo: () => super.foo

}

// 报错

const obj = {

  foo: function () {

    return super.foo

  }

}

上面三种super的用法都会报错,因为对于 JavaScript 引擎来说,这里的super都没有用在对象的方法之中。第一种写法是super用在属性里面,第二种和第三种写法是super用在一个函数里面,然后赋值给foo属性。目前,只有对象方法的简写法可以让 JavaScript 引擎确认,定义的是对象的方法。

JavaScript 引擎内部,super.foo等同于Object.getPrototypeOf(this).foo(属性)或Object.getPrototypeOf(this).foo.call(this)(方法)。

const proto = {

  x: 'hello',

  foo() {

    console.log(this.x);

  },

};

const obj = {

  x: 'world',

  foo() {

    super.foo();

  }

}

Object.setPrototypeOf(obj, proto);

obj.foo() // "world"

上面代码中,super.foo指向原型对象proto的foo方法,但是绑定的this却还是当前对象obj,因此输出的就是world。


6. 对象的扩展运算符

《数组的扩展》一章中,已经介绍过扩展运算符(...)。

const [a, ...b] = [1, 2, 3];

a // 1

b // [2, 3]

ES2018 将这个运算符引入了对象。

解构赋值

对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可比案例的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和他们的值 ,都会拷贝到新的对象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

x // 1

y // 2

z // { a: 3, b: 4 }

上面代码中,变量z是解构赋值所在的对象。它获取等号右边的所有未读取的键(a和b),将它们联通值一起拷贝过来。

由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就汇报报错,因为无法转为对象。

let { x, y, ...z } = null; // 运行时错误

let { x, y, ...z } = undefined; // 运行时错误

解构赋值必须是最后一个参数,否则会报错。

let { ...x, y, z } = obj; // 句法错误

let { x, ...y, ...z } = obj; // 句法错误

上面代码中,解构赋值不是最后一个参数,所以会报错。

注意,解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是诸葛智的副本。

let obj = {a:{b:1}};

let {..x} = obj;

obj.a.b = 2;

x.a.b //2

上面代码中,x是解构赋值所在的对象,拷贝了对象obj的a属性。a属性引用了一个对象,修改这个对象的值,会影响到解构赋值对它的引用。

另外,扩展运算符的解构赋值,不能复制继承自原型对象的属性。

let o1 = { a: 1 };

let o2 = { b: 2 };

o2.__proto__ = o1;

let { ...o3 } = o2;

o3 // { b: 2 }

o3.a // undefined

上面代码中,对象o3复制了o2,但是只复制了o2自身的属性,没有复制它的原型对象o1的属性。

上一篇下一篇

猜你喜欢

热点阅读