ES6系列--4. 对象的扩展

159 阅读3分钟

对象字面量简写法

你可能写过这样的代码:使用和所分配的变量名称相同的名称初始化对象。

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
  type: type,
  color: color,
  carat: carat
};

console.log(gemstone);

看到重复的地方了吗?type: type、color: colorcarat:carat不显得很冗长吗?

好消息是,如果属性名称和所分配的变量名称一样,那么就可以从对象属性中删掉这些重复的变量名称。

我们来看看!

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
  type,
  color,
  carat
};

还有一种向对象中添加方法的简写方式。

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

let gemstone = {
  type,
  color,
  carat,
  calculateWorth() { ... }
};

在 ES6 中甚至连function 关键字也不需要.

对象Key值构建

有时候我们会在后台取出key值,而不是我们前台定义好的,这时候我们如何构建我们的key值呢。比如我们在后台取了一个key值,然后可以用[ ]的形式,进行对象的构建。

let key='skill';
let obj={
    [key]:'web'
}
console.log(obj.skill);

Object.is( ) 对象比较

ES5 比较两个值是否相等,只有两个运算符:相等运算符==和严格相等运算符===。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0;

ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符===的行为基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.assign()

基本使用

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

Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。

const target = { a: 1 };

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

Object.assign(target, source1, source2);
console.log(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);
console.log(target)  // {a:1, b:2, c:3}

浅拷贝

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

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

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

上面代码中,源对象obj1a属性的值是一个对象,Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。

为属性指定默认值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

面代码中,DEFAULTS对象是默认值,options对象是用户提供的参数。Object.assign方法将DEFAULTSoptions合并成一个新对象,如果两者有同名属性,则option的属性值会覆盖DEFAULTS的属性值。

注意,由于存在浅拷贝的问题,DEFAULTS对象和options对象的所有属性的值,最好都是简单类型,不要指向另一个对象。否则,DEFAULTS对象的该属性很可能不起作用。