es6-物件擴充套件

littlebirdflying發表於2018-09-18

函式新增特性

  • 簡潔表示法
  • 屬性表示式
  • 擴充套件運算子
  • Object新增方法

簡介表示法

屬性簡寫

{
  // 簡潔表示法
  let o=1;
  let k=2;
  let es5={
    o:o, 
    k:k
  };
  let es6={
    o, // 屬性簡寫
    k
  };
  console.log(es5,es6); // {o: 1, k: 2} {o: 1, k: 2}
}
複製程式碼

方法簡寫

{
 let es5_method={
    hello:function(){
      console.log('hello');
    }
  };
  let es6_method={
    hello(){ // 方法簡寫
      console.log('hello');
    }
  };
  console.log(es5_method.hello(),es6_method.hello()); // hello hello
}
複製程式碼

屬性表示式

{
  let a='b';
  let es5_obj={
    a:'c',
    b:'c'
  };

  let es6_obj={
    [a]:'c' // key 值,可以是表示式或變數
  }

  console.log(es5_obj,es6_obj); // {a: "c", b: "c"} {b: "c"}

}
複製程式碼

擴充套件運算子

babel 支援不友好,暫時沒法用

{
  let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:'ccc'};
  c={ // c 的解析結果
    c:'ddd',
    d:'ccc'
  }
}
複製程式碼

Object新增方法

判斷是否相等

Object.is() 與 === 一樣

{
  console.log('字串',Object.is('abc','abc'),'abc'==='abc'); // true true, 
  console.log('陣列',Object.is([],[]),[]===[]); // false false,引用地址不同
}
複製程式碼

拷貝

Object.assign(target, ...sources),物件拷貝

注意

  • 拷貝屬性有限制,淺拷貝
  • 拷貝的只有自身物件的屬性,不拷貝不可列舉的屬性
{
  console.log('拷貝',Object.assign({a:'a'},{b:'b'})); // {a: "a", b: "b"}
}
複製程式碼

遍歷

Object.entries() 配合遍歷使用

{
  // Object.entries() 配合遍歷使用
  let test={k:123,o:456};
  for(let [key,value] of Object.entries(test)){
    console.log([key,value]); // ["k", 123] ["o", 456]
  }
}
複製程式碼

相關文章