ES6

ECMAScript 6（五）

对象的扩展 & 对象的新增方法

Posted by     "Jordon Li" on Friday, December 20, 2019

TOC

ECMAScript 6 简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

对象的扩展

属性的简洁表示法

  • 基本用法： ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。 
    const foo = 'bar';
const baz = {foo}; // {foo: "bar"}
// 等同于
const baz = {foo: foo};

//方法也可以简写
method() { return "Hello!"; }
// 等同于
method: function() { return "Hello!"; }

属性名表达式

  • 基本用法： ES6 允许对象的属性名定义为表达式，即把表达式放在方括号内。 
    let propKey = 'foo';

let obj = {
  name: 'Jordon',
  [propKey]: true,  //变量
  ['a' + 'bc']: 123,  //表达式
};

方法的 name 属性

  • 基本用法： 函数的name属性，返回函数名。对象方法也是函数，因此也有name属性。 
    const person = {
  sayName() {
    console.log('hello!');
  },
};
person.sayName.name   // "sayName"

属性的可枚举性

  • 基本用法： 对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。 另外，ES6 规定，所有 Class 的原型的方法都是不可枚举的。 
    let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo');
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,   //可枚举性
//    configurable: true
//  }

属性的遍历

  • 基本用法： ES6 一共有 5 种方法可以遍历对象的属性。
    • for...in:循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）
    • Object.keys(obj):返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名
    • Object.getOwnPropertyNames(obj):返回一个数组，包含对象自身的（不含继承的）所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名
    • Object.getOwnPropertySymbols(obj):返回一个数组，包含对象自身的（不含继承的）所有 Symbol 属性的键名
    • Reflect.ownKeys(obj):回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。 以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则:
      • 首先遍历所有数值键，按照数值升序排列。
      • 其次遍历所有字符串键，按照加入时间升序排列。
      • 最后遍历所有 Symbol 键，按照加入时间升序排列。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

super 关键字

  • 基本用法： this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象(Prototype object)。super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。 
    const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto); //设置proto为obj的原型对象
obj.find() // "hello"

对象的扩展运算符

  • 基本用法： 对象的扩展运算符等同于使用Object.assign()方法。 
    let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

链判断运算符（?.）

  • 基本用法： ?.运算符:直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，返回undefined。 
    a?.b
// 等同于
a == null ? undefined : a.b

a?.[x]
// 等同于
a == null ? undefined : a[x]

a?.b()
// 等同于
a == null ? undefined : a.b()

a?.()
// 等同于
a == null ? undefined : a()

Null 判断运算符（??）

  • 基本用法：
    • ||: 运算符左侧的值为null,undefined,空字符串,false或0时，会返回右侧的值。
    • ??: 只有运算符左侧的值为null或undefined时，才会返回右侧的值。
    const animationDuration = response.settings?.animationDuration ?? 300;

对象的新增方法

Object.is()

  • 基本用法：
    • 相等运算符（==）: 会自动转换数据类型
    • 严格相等运算符（===）: NaN不等于自身，以及+0等于-0
    • Object.is(): 用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。不同之处只有两个：
      • +0不等于-0
      • NaN等于自身。
    +0 === -0 //true
NaN === NaN // false

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

Object.assign()

  • 基本用法： Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
  //如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
  const target = { a: 1, b: 1 };
  const source1 = { b: 2, c: 2 };
  const source2 = { c: 3 };

  Object.assign(target, source1, source2);
  target // {a:1, b:2, c:3}

  //Object.assign方法实行的是浅拷贝，而不是深拷贝。
  const obj1 = {a: {b: 1}};
  const obj2 = Object.assign({}, obj1);

  obj1.a.b = 2;
  obj2.a.b // 2

Object.getOwnPropertyDescriptors()

  • 基本用法： ES5 的Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述对象（descriptor）。 ES2017 引入了Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。 该方法的引入目的，主要是为了解决Object.assign()无法正确拷贝get和set属性的问题。
  const obj = {
    foo: 123,
    get bar() { return 'abc' }
  };

  Object.getOwnPropertyDescriptors(obj)
  // { foo:
  //    { value: 123,
  //      writable: true,
  //      enumerable: true,
  //      configurable: true },
  //   bar:
  //    { get: [Function: get bar],
  //      set: undefined,
  //      enumerable: true,
  //      configurable: true } }

Object.setPrototypeOf()

  • 基本用法： Object.setPrototypeOf方法的作用与__proto__相同，用来设置一个对象的prototype对象，返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。
  // 格式
  Object.setPrototypeOf(object, prototype)

  // 用法
  const o = Object.setPrototypeOf({}, null);

Object.getPrototypeOf()

  • 基本用法： Object.getPrototypeOf()用于读取一个对象的原型对象。
  Object.getPrototypeOf(obj);

Object.keys()，Object.values()，Object.entries()

  • 基本用法： ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。 ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for...of循环使用。
  let {keys, values, entries} = Object;
  let obj = { a: 1, b: 2, c: 3 };

  for (let key of keys(obj)) {
    console.log(key); // 'a', 'b', 'c'
  }

  for (let value of values(obj)) {
    console.log(value); // 1, 2, 3
  }

  for (let [key, value] of entries(obj)) {
    console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
  }

Object.fromEntries() 键值对数组 -> 对象

  • 基本用法： Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。
  const entries = new Map([
    ['foo', 'bar'],
    ['baz', 42]
  ]);
  Object.fromEntries(entries)
  // { foo: "bar", baz: 42 }

  Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
  // { foo: "bar", baz: "qux" }

「下次一定」

下次一定

使用微信扫描二维码完成支付

FEATURED TAGS
clr-via-c# csharp docker dot-net-core es6 istio japanese kubernetes microservice security service-mesh tips vue