ES6知识点-对象的扩展

Posted 2021-03-23 xuzhengguo

3.6对象的扩展

3.6.1属性的简洁表示法

• ES6允许直接写入变量和函数，作为对象的属性和方法。

var foo = 'bar';
var baz = {foo};
console.log( baz )        //  { foo: 'bar' } 
//等同于
var foo = 'bar';
var baz={ foo:foo};
console.log( baz )        //  { foo: 'bar' } 


var func= {
    method() {
        return "这里是ES6方法简写!";
   }
};
// 等同于
var func= {
    method: function() {
        return "这里是ES6以前的方法!";
    }
};

3.6.2属性名表达式

• 定义对象属性的两种方法

  • 直接用标识符作为属性名
  • 用表达式作为属性名，要将表达式放在方括号之内
    • ES6 允许字面量定义对象(使用大括号)时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。
    • 注意，属性名表达式与简洁表示法，不能同时使用，会报错。

  // 方法一
  obj.foo = true;
  // 方法二
  obj['a' + 'bc'] = 123;
  
  let propKey = 'foo';
  let obj = {
      [propKey]: true,
      ['a' + 'bc']: 123        // ES5使用大括号时不能这样定义
  }
  
  let obj = {
    ['f' + 'unc']() {
      return '欢迎来到w3cschool';
    }
  };
  obj.func()     // 欢迎来到w3cschool

3.6.3属性的遍历

? ES6一共有5种方法可以遍历对象的属性

• for...in

  for...in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。

• Object.keys(obj)

  返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）

• Object.getOwnPropertyNames(obj)

  ? 返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）。

• Object.getOwnPropertySymbols(obj)

  ? 返回一个数组，包含对象自身的所有Symbol属性。

• Reflect.ownKeys(obj)

  返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举。

  总结：同样的属性遍历次序规则：

  • 首先遍历所有属性名为数值的属性，按照数字排序。
  • 其次遍历所有属性名为字符串的属性，按照生成时间排序。
  • 最后遍历所有属性名为Symbol值的属性，按照生成时间排序。

3.6.4Object.assign() 对象的合并

• 用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）
• 第一个参数是目标对象，后面的参数都是源对象。
• 如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性。
• 如果该函数只有一个参数，
  • 当参数为对象时，直接返回该对象；
  • 当参数不是对象时，会先将参数转为对象然后返回。
    • 由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。

3.6.5Object.assign()常见用途

• （1）为对象添加属性

  //将x属性和y属性添加到Person 类的对象实例。
  class Person {
    constructor(x, y) {
      Object.assign(this, {x, y});
    }
  }

• （2）为对象添加方法

  Object.assign(Person.prototype, {
    method1(arg1, arg2) {
      ···
    },
    method2() {
      ···
    }
  });
  // 等同于下面的写法
  Person.prototype.method1 = function (arg1, arg2) {
    ···
  };
  Person.prototype.method2 = function () {
    ···
  };

• （3）克隆对象

//将原始对象拷贝到一个空对象，就得到了原始对象的克隆。
//此方法为浅拷贝，不能克隆它继承的值。
function clone(origin) {
  return Object.assign({}, origin);
}

• （4）合并多个对象

  //将多个对象合并到某个对象。
  const merge =function(target, ...sources){
      Object.assign(target, ...sources);
   }

• （5）为属性指定默认值

  //DEFAULTS对象是默认值，options对象是用户提供的参数。
  //Object.assign方法将DEFAULTS和options合并成一个新对象，
  //如果两者有同名属性，则option的属性值会覆盖DEFAULTS的属性值。
  const DEFAULTS = {
    logLevel: 0,
    outputFormat: 'html'
  };
  function processContent(options) {
    options = Object.assign({}, DEFAULTS, options);
  }

3.6.6Object.is()

• ES5比较两个值是否相等

  • 相等运算符（==） 缺点：会自动转换数据类型
  • 严格相等运算符（===） 缺点：NaN不等于自身，以及+0等于-0

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

• Object.is 同值相等算法

  • 用来比较两个值是否严格相等
  • 不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

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

• 补充：+0与-0的用处：更多应用在实际业务，例如负号代表运动的方向

3.6.7对象的解构赋值

• 对象的解构赋值用于从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。
• 解构赋值必须是最后一个参数，否则会报错。
• 由于解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象。
• 解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

var  { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
//解构赋值必须是最后一个参数
let { ...x, y, z } = obj; // 句法错误
let { x, ...y, ...z } = obj; // 句法错误

//解构赋值拷贝的是这个值的**引用
let obj = { a: { b: 1 } };
let { ...x } = obj;    // 解构赋值
obj.a.b = 2;
x.a.b     // 2    

3.6.8扩展运算符...

• 扩展运算符（ ... ）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

• 扩展运算符可以用于合并两个对象。

• 如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

• let z = { a: 3, b: 4 };
  let n = { ...z };        // n的值 { a: 3, b: 4 }
  
  // 相当于Object.assign方法
  let m = Object.assign( {}, z );        // m的值 { a: 3, b: 4 }
  
  let ab = { ...a, ...b };
  // 等同于
  let ab = Object.assign({}, a, b);
  
  let newobj= { ...obj, x: 1, y: 2 };    
  // 等同于
  let newobj= Object.assign({}, obj, { x: 1, y: 2 });

3.6.9属性的可枚举性

• 对象的每个属性都有一个描述对象，用来控制该属性的行为。
• Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。
• 描述对象的enumerable属性，称为”可枚举性“，如果该属性为false，就表示某些操作会忽略当前属性。
• ES5有三个操作会忽略enumerable为false的属性。
  • for...in循环：只遍历对象自身的和继承的可枚举的属性。
  • Object.keys()：返回对象自身的所有可枚举的属性的键名。
  • JSON.stringify()：只串行化对象自身的可枚举的属性。
• ES6新增了Object.assign()，会忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。