ES6对象的扩展

1 属性的简洁表示法

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

const foo = 'bar';
const baz = {foo};
bar       // {foo: 'bar'}

// 等同于
const baz = {foo: foo}
function 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 = {
  method: function() {
    return "Hello!";
  }
};

实际中的例子

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}

getPoint()
// {x:1, y:10}

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

const cart = {
    _wheels: 4,

    get wheels () {
    return this._wheels;
    },

    set wheels (value) {
    if (value < this._wheels) {
        throw new Error('数值太小了!');
    }
    this._wheels = value;
    }
}

2 属性名表达式
Javascript定义对象的属性,有两种方法。

// 方法一
obj.foo = true;

// 方法二
obj['a' + 'bc'] = 123;

console.log(obj);  // Object {foo: true, abc: 123}

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

var obj = {
    foo: true,
    abc: 123
}

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

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

console.log(obj); // Object {foo: true, abc: 123}

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

const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // "sayName"

4 Object.assign()
Object.assign方法用于对象的合并,将源对象的所有可枚举属性,复制到目标对象(target)

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

注意,如果目标对象与源对象有同名属性,或对各源对象有同名属性,后面的属性会覆盖前面的属性。

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target          // {a:1, b:2, c:3}

如果只有一个参数,Object.assign 会直接返回该参数

cons obj = {a: 1};
Object.assign(obj) === obj;   // true

注意点
(1)浅拷贝
Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b                // 2

上面代码中,源对象obj1的a属性的值是一个对象,Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。
(2)同名属性的替换
对于这种嵌套的对象,一旦遇到同名属性,Object.assign的处理方法是替换,而不是添加。

const target = { a: { b: 'c', d: 'e' } }
const source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }

上面代码中,target对象的a属性被source对象的a属性整个替换掉了,而不会得到

{ a: { b: 'hello', d: 'e' } }

这样的结果,所以需要注意!
(3) 取值函数的处理
Object.assign只能进行值得复制,如果要复制的值是一个取值函数,那么将求值后再复制。

const source = {
  get foo() { return 1 }
};
const target = {};

Object.assign(target, source);
// { foo: 1 }

上面代码中,source对象的foo属性是一个取值函数,Object.assign不会复制这个取值函数,只会等拿到值以后,将这个值复制过去。
常见用途
(1)为对象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

上面代码使用了对象属性的简介表示法,直接将两个函数放在大括号中,再使用assign方法添加到SomeClass.prototype之中。
(2)克隆对象

function clone(origin) {
  return Object.assign({}, origin);
}

上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。
不过采用这种方法克隆,只能克隆到原始对象自身的值,不能克隆它继承的值。

本博客内容摘抄自
阮一峰老师写的ECMAScript6入门一书

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值