这是我参与「第五届青训营」伴学笔记创作活动的第 17 天

学习笔记

ES6的学习2

2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。

新增加特性

对象的扩展

属性和方法可以简写。

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
变量foo直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值：

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

属性简写：

function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}

方法简写：

const o = {
  say() {
    return "Hello!";
  }
};

// 等同于

const o = {
  say: function() {
    return "Hello!";
  }
};

示例：

let birth = '2000/01/01';

const Person = {

  name: '张三',

  //等同于birth: birth
  birth,

  // 等同于hello: function ()...
  hello() { 
          console.log(this.name); 
  }

};

用于函数的返回值：

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}

getPoint()
// {x:1, y:10}

在对象中新的使用表示

用[]来使用

const prop = 'age';
const person = {};
person[prop] = 18;
console.log(person);	// { age: 18 }

// -----------------------------------------

// ES6 
const prop = 'age';
const person = {
    [prop]: 18
};
console.log(person);	// { age: 18 }

[]里面可以放变量、方法和字符串。

super

指向当前对象的原型对象。可以用在class继承中的constructor

展开运算符

对象不能直接展开，必须在 {} 中展开。

const apple = {
    color: 'red',
    shape: 'circle',
    taste: 'sweet'
};
console.log({...apple});
// { color: 'red', shape: 'circle', taste: 'sweet' }
console.log({...apple} === apple);
// false

对象的合并，对空对象没有效果。展开的时候不会展开对象的对象属性。
非对象的展开会自动转为对象。
字符串的展开会转换成一个类似数组的对象。

const apple = {
    color: 'RED',
    shape: 'CIRCLE',
    taste: 'SWEET'
};

const pen = {
    color: 'BLACK',
    shape: 'RECTANGLE',
    use: 'WRITE'
};

// 新对象拥有全部属性，相同属性，后者覆盖前者

console.log({...apple, ...pen});

对象的新增方法

Object.is()
Object.assign()
Object.keys()
Object.values()
Object.entries()

Object.is()方法用来比较两个值是否严格相等。 Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

ES6学习2|青训营笔记