ES6对象新增了哪些扩展

一、属性的简写

es6中,当对象键名与对应值名相等的时候,可以进行简写

const  baz = {foo:foo}
//等同于
const baz = {foo}

方法也能够进行简写

const o = {
  method() {
    return "Hello!";
  }
};
// 等同于
const o = {
  method: function() {
    return "Hello!";
  }
}

在函数内作为返回值,也会变得方便很多

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

注意:简写的对象方法不能用作构造函数,否则会报错

const obj = {
  f() {
    this.foo = 'bar';
  }
};
new obj.f() // 报错

二、属性名表达式

es6允许字面量定义对象时,将表达式放在括号内

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"}

三、super关键字
this关键字总是指向函数所在的当前对象,es6又新增了另一个类似的关键字super,指向当前对象的原形对象

const  proto ={
  foo:'hello'
}
const  obj={
  foo:'world',
  find(){
      return  super.foo
  }
}
Object.setPrototypeOf(obj,proto);  //为obj设置原形对象
obj.find()   //'hello'

四、扩展运算符的应用

在解构赋值中,未被读取的可便利的属性,分配到指定的对象上边

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

注意:解构赋值必须是最后一个参数,否则会报错
解构赋值是浅拷贝

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2; // 修改obj里面a属性中键值
x.a.b // 2,影响到了结构出来x的值

对象的扩展运算符等于使用Object.assign()方法

五、属性的便历

es6一共有五种方可以便历对象的属性法
for..in:循环便历对象自身的和继承的可枚举属性(不含Symbol属性)

对象新增的方法

关于对象新增的方法,分别有以下:
Object.is()
Object.assign()
Object.getOwnPropertyDescriptors()
Object.setPrototypeOf(),Object.getPrototypeOf()
Object.keys(),Object.values(),Object.entries()
Object.fromEntries()

Object.is()

严格判断两个值是否相等,与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0.二是NaN等于自身

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

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

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

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()方法是浅拷贝,遇到同名属性会进行替换
Object.getOwnPropertyDescriptors()
返回指定对象所有自身属性(非继承属性)的描述对象

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};

Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }
Object.setPrototypeOf()

Object.setPrototypeOf方法用来设置一个对象的原型对象

Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null);
Object.getPrototypeOf()

用于读取一个对象的原型对象

Object.getPrototypeOf(obj);
Object.keys()

返回自身的(不含继承的)所有可便历属性的键名的数组

var obj ={foo:'bar',baz:31}
Object.keys(obj)
//["foo","baz"]

Object.values()

返回自身的(不含继承的)所有可便历的属性的键对应值的数组

const obj = {foo:'bar',baz:31}
Object.values(obj)
//["bar",31]

Object.entries()
返回一个对象自身的(不含继承的)所有可便历属性的兼职对的数组

const  obj = {foo:'bar',baz:31}
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 31] ]

Object.fromEnteries()
用于将一个键值对数组转为对象

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、属性的简写 ES6中,当对象键名与对应值名相等的时候,可以进行简写 方法也能够进行简写 在函数内作为返回值,也...
    魂斗罗小黑阅读 2,532评论 0 0
  • 一、属性的简写 ES6中,当对象键名与对应值名相等的时候,可以进行简写 方法也能够进行简写 在函数内作为返回值,也...
    JerisonPaul阅读 1,586评论 0 0
  • 前言 在JavaScript中,几乎每一个值都是某种特定的类型对象,Es6也着重提升了对象的功能性,Es6通过多种...
    秦声阅读 2,286评论 0 0
  • 一、属性的简洁表示法 ES6允许在大括号里面直接写入变量和函数,作为对象的属性和方法。如下:变量foo直接写在大括...
    石菖蒲_xl阅读 3,247评论 0 1
  • 属性的简洁表示法 如果在对象中定义方法,还可以这样简写 属性名表达式 在定义字面量对象时,ES6允许把表达式放在方...
    你的昵称已被我占用阅读 1,261评论 0 0