《深切明白ES6》笔记——扩大对象的功能性(4)

变量功用被加强了、函数功用被加强了,那末作为JavaScript中最广泛的对象,不加强对得起观众吗?

对象种别

在ES6中,对象分为下面几种叫法。(不需要知道观点)

1、一般对象

2、特异对象

3、规范对象

4、内建对象

对象字面量语法拓展

随意翻开一个js文件,对象都无处不在,看一个简朴的对象。

{
  a: 2
}

ES6针对对象的语法扩大了一下功用

1、属性初始值简写

//ES5
function a(id) {
  return {
    id: id
  };
};

//ES6
const a = (id) => ({
  id
})

2、对象要领简写

// ES5
const obj = {
  id: 1,
  printId: function() {
    console.log(this.id)
  }
}

// ES6
const obj = {
  id: 1,
  printId() {
    console.log(this.id)
  }
}

3、属性名可计算

属性名能够传入变量或许常量,而不只是一个牢固的字符串。

const id = 5
const obj = {
  [`my-${id}`]: id
}
console.log(obj['my-5']) // 5

ES6对象新增要领

在Object原始对象上新增要领,原则上来讲不可取,然则为了处置惩罚全球各地提交的issue,在ES6中的全局Object对象上新增了一些要领。

1、Object.is()

用来处置惩罚JavaScript中特别范例 == 或许 === 非常的状况。

下面是一些非常状况

//现实涌现了非常(毛病输出)
console.log(NaN === NaN) // false
console.log(+0 === -0) // true
console.log(5 == "5") //true

//我们希冀的目的输出(准确输出)
console.log(NaN === NaN) // true
console.log(+0 === -0) // false
console.log(5 == "5") //false

为了处置惩罚历遗留问题,新增了Object.is()来处置惩罚2个值的比较。

console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(+0, -0)) // false
console.log(Object.is(5, "5")) //false

2、Object.assign()

或许你已见过或许运用过这个要领了,那这个新增的要领处置惩罚了什么问题呢?

答:夹杂(Mixin)。

mixin是一个要领,完成了拷贝一个对象给别的一个对象,返回一个新的对象。

下面是一个mixin要领的完成,这个要领完成的是浅拷贝。将b对象的属性拷贝到了a对象,合并成一个新的对象。

//mixin不只有这一种完成要领。
function mixin(receiver, supplier) {
  Object.keys(supplier).forEach((key) => {
    receiver[key] = supplier[key]
  })
  return receiver
}

let a = {name: 'sb'};
let b = {
  c: {
    d: 5
    }
  }
console.log(mixin(a, b)) // {"name":"sb","c":{"d":5}}

写如许一个mixin要领是否是很烦,而且每一个项目都得引入这个要领,如今,ES6给我们供应了一个现成的要领Object.assign()来做mixin的事变。

假定要完成上面的mixin要领,你只需要给Object.assign()传入参数即可。

console.log(Object.assign(a, b))// {"name":"sb","c":{"d":5}}

运用Object.assign(),你就可以够不是有继承就可以取得另一个对象的一切属性,快速好用。

看一个完成Component的例子。

//声明一个组织函数Component
class Component {}
//给组织函数设置原型要领
Component.prototype = {
  componentWillMount() {},
  componentDidMount() {},
  render() {console.log('render')}
}
//定义一个新的对象
let MyComponent = {}
//新对象继承了Component的一切要领和属性。
Object.assign(MyComponent, Component.prototype)

console.log(MyComponent.render()) // render

在react的reducer中,每次传入新的参数返回新的state,你都能够用到Object.assign()要领。

反复的对象字面量属性

ES5的严厉形式下,假如你的对象中涌现了key雷同的状况,那末就会抛出毛病。而在ES6的严厉形式下,不会报错,背面的key会覆蓋掉前面雷同的key。

const state = {
  id: 1,
  id: 2
}
console.log(state.id) // 2

自有属性罗列递次

这个观点看起来比较隐约,假如你看了下面的例子,你能够就会邃晓在说什么了。

const state = {
  id: 1,
  5: 5,
  name: "eryue",
  3: 3
}

Object.getOwnPropertyNames(state) 
//["3","5","id","name"] 罗列key

Object.assign(state, null)
//{"3":3,"5":5,"id":1,"name":"eryue"} 

上面的例子的输出效果都有个规律,就是数字提早,按递次排序,接着是字母排序。而这类行动也是ES6新增的规范。你还能够本身测试一下其他要领是否是也支撑罗列自动排序。比方Object.keys(), for in 等。

加强对象原型

假如你想定义一个对象,你会想到许多要领。

let a = {}

let b = Object.create(a)

function C() {}

class D {}

那末,ES6是怎样在这么壮大的对象上面继承加强功用呢?

1、许可转变对象原型

转变对象原型,是指在对象实例化以后,能够转变对象原型。我们运用 Object.setPrototypeOf() 来转变实例化后的对象原型。

let a = {
  name() {
    return 'eryue'
  }
}
let b = Object.create(a)
console.log(b.name()) // eryue
  
//运用setPrototypeOf转变b的原型
let c = {
  name() {
    return "sb"
  }
}    
Object.setPrototypeOf(b, c)    
console.log(b.name()) //sb

2、简化原型接见的super援用

这一个学问你能够看书本原文,我现在想不到现实营业代码来剖析。

要领的定义

ES6明白了要领的定义。

let a = {
  //要领
  name() {
    return 'eryue'
  }
}
//函数
function name() {}

预计习惯了函数和要领切换的我们,照样不必太在乎这些详细的叫法。

总结

本章讲解了对象字面量语法拓展,ES6新增要领,许可反复的对象字面量属性,自有罗列属性排序,加强对象原型,明白了要领的定义。

我们日常平凡开辟中比较经常使用的是前面4种新增的功用,尤其是Object.assign()的运用。然则,就算把悉数新增的功用记着也不是难事。所以,全都记着吧!

=> 返回文章目次

    原文作者:二月
    原文地址: https://segmentfault.com/a/1190000010221539
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞