1. 程式人生 > >深入淺出es6----物件篇

深入淺出es6----物件篇

1、Object.is()用來比較兩個物件是否嚴格相等,相當於 ===不同之處只有兩個:一是+0不等於-0,二是NaN等於自身。+0 === -0  //trueNaN === NaN //falseObject.is(+0,-0)//falseObject.is(NaN,NaN)//true2、Object.assign()用於物件的合併第一個引數是目標物件,後面的引數都是源物件。var target = {a:1}var source1 = {b:2}var source2 = {c:3}Object.assign(target,source1,source2);target//{a:1,b:2,c:3}如果只有一個引數則返回其本身,如果其本身不是物件就先轉換為物件然後返回。typeof Object.assign(2)//'object'undefined和null無法轉換為物件,所以用Object.assign()的時候會報錯Object.assign(undefined)//報錯Object.assgin(null)//報錯其他型別的值(即數值、字串和布林值)不在首引數,也不會報錯。但是,除了字串會以陣列形式,拷貝入目標物件,其他值都不會產生效果。
Object.assign()方法實行的是淺拷貝,如果源物件的某一個屬性的值是物件,那麼目標物件拷貝得到的是這個物件值的引用。var obj1 = {a:{b:2}};var obj2 = Object.assign({},obj1)obj2.a.b //2對於巢狀的物件,遇到重名的情況,Object.assign()不會進行合併而是進行替換var target = {a:{b:'c',d:'e'}}var source = {a:{b:'hello'}}Object.assign(target,source)target//{a:{b:'hello'}}Object.assign()可以處理陣列,但是會將陣列看做物件。
Object.assign([1,2,3],[4,5])//[4,5,3]Object.assign()常用用途1、為物件新增屬性:class Point{     constructor(x,y){         Object.assign(this,{x,y})      }}2、為物件新增方法:Object.assign(SomeClass.prototype,{     someMethod(arg1,arg2){         ...      },     anotherMethod(){         ...      }})3、克隆物件這種方法只能克隆原始物件自身的值,繼承來的不能克隆function Clone(origin){     return Object.assign({},origin)}如果想要保持繼承鏈,可以這樣寫:
function clone(origin){     let originProto =   Object.getPrototypeOf(origin);//返回物件的原型Object.getPrototypeOf()     return Object.assign(Object.create(originProto), origin)// Object.create(Obj1)obj1是要繼承的原型}function Car(){     this.desc = '描述';     this.color = '紅色';}Car.prototype = {     getInfo:function(){          return 'A'+this.color+''+this.desc     }}var car = Object.create(Car.prototype);car.color = '藍色'alert(car.getInfo())//藍色undefined4、合併多個物件將多個物件合併到某一個物件const merge =      (target,...source) => Object.assign(target,...source)如果希望合併後返回一個新物件,可以這樣const merge = (...source) => Object.assign({},...source)5、為屬性指定預設值var DEFAULT = {     logLevel:0,     outputFormat:'html'}function proccessCOntent(options){     options = Object.assign({},DEFAULT,options);     console.log(options);}6、屬性的可列舉性物件的每個屬性都有一個描述物件。Object.getOwnPorpertyDescciptor方法可以獲取該屬性的描述物件。let obj = {foo:'123}Object.getOwnPropertyDescriptor(obj,'foo')描述物件的enumberable屬性,成為‘可列舉性’,如果該屬性為false,就表示某些操作會忽略當前屬性。7、屬性的遍歷es6一共有5種方式可以遍歷物件的屬性(1)for...infor...in迴圈遍歷物件自身的和繼承的可列舉屬性(不含 Symbol 屬性)。(2)Object.keys(obj)Object.keys返回一個數組,包括物件自身的(不含繼承的)所有可列舉屬性(不含 Symbol 屬性)。(3)Object.getOwnPropertyNames(obj)Object.getOwnPropertyNames返回一個數組,包含物件自身的所有屬性(不含 Symbol 屬性,但是包括不可列舉屬性)。(4)Object.getOwnPropertySymbols(obj)Object.getOwnPropertySymbols返回一個數組,包含物件自身的所有 Symbol 屬性。(5)Reflect.ownKeys(obj)Reflect.ownKeys返回一個數組,包含物件自身的所有屬性,不管屬性名是 Symbol 或字串,也不管是否可列舉。以上的5種方法遍歷物件的屬性,都遵守同樣的屬性遍歷的次序規則。
  • 首先遍歷所有屬性名為數值的屬性,按照數字排序。
  • 其次遍歷所有屬性名為字串的屬性,按照生成時間排序。
  • 最後遍歷所有屬性名為 Symbol 值的屬性,按照生成時間排序。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]
上面程式碼中,Reflect.ownKeys方法返回一個數組,包含了引數物件的所有屬性。這個陣列的屬性次序是這樣的,首先是數值屬性210,其次是字串屬性ba,最後是 Symbol 屬性。7、Object.keys()          返回物件的屬性名的陣列。var obj = {'foo':'a','is':'b'}Object.keys(obj)//['foo','is']8、Object.values()     返回物件的屬性值var obj = {'foo':'a','is':'b'}Object.valeus(obj)//['a','b']Object.values()只返回自身可遍歷的屬性。 p的描述屬性enumerable是false,Object.values()就不會返回,改成true就可以了的。var obj = Object.create({},{p:{value:42}})Object.values(obj)//[]var obj = Object.create({}, {p:{value: 42,enumerable: true}});Object.values(obj)//[42]9、Object.entries()返回一個數組,是引數物件自身的(不包括繼承來的)所有可遍歷的(enumberable)的屬性鍵值對陣列。var obj = {foo:'bar,baz:322}Objec.entries(obj)//[['foo','bar'],['baz',322]     Object.entries()的另一個用途是將物件轉為真正的map結構var obj = {foo:'bar',baz:42}var map = new Map(Object.entries(obj))10、物件的擴充套件運算子: