ES6 对象扩展-蒲公英云

ES6 对象扩展

Myth丶恋晨 2022-02-21 00:12 464阅读 0赞

方法简写

var person = {
  say: function(word) { console.log(word); }
}
person.say("test");

ES6中可省略function关键字，简写为：

var person = {
  say(word) { console.log(word); }
}
person.say("test");

成员的`简洁表示法`

ES6中允许对象的成员直接写变量名，

变量名就是成员名
变量值就是成员的值

成员属性和成员方法皆可

var name = "JT";
var foo = function() { console.log("foo"); };
// var person = {name:name, foo:foo};
var person = {name, foo};   // 简洁表示法
console.log(person);

成员`名称表达式`

ES6中允许使用表达式的值作为成员的名称，表达式用[]括起来。

var person = {
  ["na" + "me"]: "张三",
  ["sh" + "ow"]: function() {console.log("这时show方法");},
  ["sim" + "ple"]() {console.log("方法简写可以同时使用");}
}
console.log(person);  // {name: "张三", show: ƒ, simple: ƒ}

NOTE 成员名称表达式和简洁表达式不能同时使用，会报错。

var name = "JT";
var person = {
  [name]
}
// 报错：Uncaught SyntaxError: Unexpected token }

拓展运算符

拓展运算符...用于取出对象中所有可遍历的成员属性，然后拷贝到当前对象。

var original = {name:"JT", age:22};
var another = {...original};
console.log(another); // {name: "JT", age: 22}
console.log(another == original); // false

值覆盖 后来居上(后面的赋值会覆盖之前的赋值)

var p = {name:"AAA"};
var p1 = {...p, name:"BBB"};  // BBB覆盖p中的AAA值
console.log(p1);  // {name: "BBB"}
var p2 = {name:"BBB", ...p};
console.log(p2);  // {name: "AAA"}

若操作的变量并非对象类型，则先进行转换。
以下可视为{}
{...null}
{...undefined}
{...{}}
{...0}
{...""}

新增API

Object.is(value1, value2) 比较两个值是否严格相等(与===基本类似)
Object.assign(target, ...sources) 将多个source对象中的成员拷贝到target对象中。

Object.is(value1, value2)
- 基本用法
  
  Object.is(“aa”, “aa”);// true
  Object.is(1， 1); // true
  Object.is([1], [1]); // false
  Object.is({name:”aa”}, {name:”aa”}); // false
- 与===的区别
  
  console.log(Object.is(+0, -0)); // false
  console.log(+0 === -0); // true
  
  console.log(Object.is(NaN, NaN)); // true
  console.log(NaN === NaN); // false
Object.assign(target, ...sources)
- 若有同名属性，则后来居上(后面的成员会覆盖前面的成员值)
  
  var target = {name:”张三”};
  var source1 = {name:”李四”, age:22};
  Object.assign(target, source1); // {name: “李四”, age: 22}
- 若无...sources，则直接返回target(的引用类型)。
  
  Object.assign(123); // Number {123}
  new Number(123); // Number {123}
  Object.assign(“a”); // String {“a”}
  new String(“a”); // String {“a”}
- null和undefined不能转换为对象，所以会报错Uncaught TypeError。
  
  Object.assign(null); // Cannot convert undefined or null to object
  Object.assign(undefined); // 不能把undefined或null转换到object。
- 若有...sources个数不为0，且有参数不为对象，会先将参数转换为对象。
- Object.assign()是浅拷贝。
  - 成员类型为普通变量，那就是各人有各人的一份变量
    
    var target = {};
    var source = {name:”aaa”};
    console.log(target, source); // {} {name: “aaa”}
    Object.assign(target, source);
    console.log(target, source); // {name: “aaa”} {name: “aaa”}
    target.name = “BBB”; // 修改target的成员
    console.log(target, source); // {name: “BBB”} {name: “aaa”}
  - 成员类型为引用(对象，数组等)。这个成员被target和source共用。
    
    var target = {};
    var source = {contact:{tel:123}};
    Object.assign(target, source);
    console.log(target.contact, source.contact); // {tel: 123} {tel: 123}
    target.contact.tel = “666666”;
    console.log(target.contact, source.contact); // {tel: “666666”} {tel: “666666”}
    console.log(target.contact === source.contact); // true
  NOTE浅拷贝
  基本类型的变量(primitive)不会那么麻烦，会直接赋多份值(占用多份内存空间)。
  而引用类型(reference)的变量，会有多个引用用于存储内存地址，但其中存储的内存地址相同(真正的对象只有一个)。
  所以修改拷贝源和目标的(引用)成员，会互相影响
- 数组的处理(先转对象，下标为成员名，元素值为成员值，进行值覆盖)
  
  Object.assign([“aa”, “bb”], [“cc”]); // [“cc”, “bb”]
  // 相当于Object.assign({0:”aa”, 1:”bb”}, {0:”cc”})的返回对象转换为数组。