工作生活

对象的扩展(笔记)

2019-07-10  本文已影响0人  灰灰_82a6

属性的简写

1.属性值可以是一个变量或者函数,并且当属性值与属性名一样的时候,只写属性名即可。

var foo="bar";
var obj={foo}; 
//等同于
var var obj={foo:foo};  //{foo:"bar"}

2.方法的简写

var obj={
  method(){}
}
//等同于
var obj={
  method:function(){}
}

属性的表达式

字母式声明对象的时候 ,属性名可以放在[]里,即可以使用变量或者表达式

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

super

1.super指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

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

对象的扩展运算符

1.对象的解构赋值是浅拷贝
2.扩展运算符的解构赋值,不能复制继承自原型对象的属性

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2; //把o2的自身的属性赋值给了o3,原型上的没有赋给
o3 // { b: 2 }
o3.a // undefined

3.使用...可以取出对象的所有可遍历属性。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

上面的let n = { ...z }等同于如下:

let n= Object.assign({}, z);

4.如果扩展运算符后面是一个空对象,则没有任何效果。

{...{}, a: 1}
// { a: 1 }

5.如果扩展运算符后面不是对象,则会自动将其转为对象

// 等同于 {...Object(1)}
//扩展运算符后面是整数1,会自动转为数值的包装对象Number{1}。由于该对象没有自身属性,所以返回一个空对象。
{...1} // {}

如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
上一篇下一篇

猜你喜欢

热点阅读