ES6语法之对象的扩展

SillyMonkey 发布于2019-08-21 18:32 / 2481人阅读

摘要：方法的第一个参数是目标对象，后面的参数都是源对象。这个对象的任何变化，都会反映到目标对象上面。方法将和合并成一个新对象，如果两者有同名属性，则的属性值会覆盖的属性值。否则，对象的该属性很可能不起作用。

对象字面量简写法

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

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

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

console.log(gemstone);

看到重复的地方了吗？type: type、color: color 和 carat: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

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

为属性指定默认值

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

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

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

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

GPU云服务器云服务器 es6字符串扩展对象的扩展面向对象语法分析对象扩展

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90568.html

ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
ES6语法之函数的扩展

摘要：函数的扩展函数参数的默认值之前，不能直接为函数的参数指定默认值，只能采用变通的方法。箭头函数引入了一种新的函数，叫做箭头函数。箭头函数和普通函数的行为非常相似，但是在语法构成上非常不同。意味着函数内的的值是全局对象，不是对象。函数的扩展函数参数的默认值 ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。 function log(x, y) { y = y ||...

Clect 2019-08-21 18:39 评论0 收藏0
ES6语法之字符串的扩展

摘要：模板字符串连接符在之前，将字符串连接到一起的旧方法是使用字符串连接运算符。这样更容易构建字符串。返回布尔值，表示参数字符串是否在原字符串的头部。它针对前个字符，而其他两个方法针对从第个位置直到字符串结束。模板字符串 + 连接符在 ES6 之前，将字符串连接到一起的旧方法是使用字符串连接运算符 (+)。 const student = { name: Richard Kaleho...

孙淑建 2019-08-21 18:32 评论0 收藏0
ES6语法之可迭代协议和迭代器协议

摘要：有两个协议可迭代协议和迭代器协议。为了变成可迭代对象，一个对象必须实现或者它原型链的某个对象必须有一个名字是的属性迭代器协议该迭代器协议定义了一种标准的方式来产生一个有限或无限序列的值。 ECMAScript 2015的几个补充，并不是新的内置或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。有两个协议：可迭代协议和迭代器协议。可迭代协议可迭代协议允许 JavaScri...

sarva 2019-08-22 11:23 评论0 收藏0
ES6 ...操作符

摘要：在语法中，操作符有两种意义剩余语法，参数和展开语法，展开数组对象，作为函数数组对象的扩展运算符。使用和参数进行操作其余参数传给原始函数展开语法运算则可以看作是参数的逆运算。在ES6语法中，...操作符有两种意义：rest(剩余语法，rest参数) 和 spread(展开语法，展开数组/对象)，作为函数、数组、对象的扩展运算符。从某种意义上说，剩余语法与展开语法是相反的：剩余语法将多...

MorePainMoreGain 2019-08-23 12:12 评论0 收藏0