ES6 学习笔记二

Object

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

• Object.assign()

let test = {}; Object.assign(test, {d: 'd', z: 'z', m: 'm'}); console.log(test); // {d: "d", z: "z", m: "m"}

let test = {}; Object.assign(test, {d: 'd', z: 'z', m: 'm'}, {d: 'x', z: 'y', m: 'q'}); console.log(test); // {d: "x", z: "y", m: "q"}

let test = {}; Object.assign(test, {d: 'd', z: 'z', m: 'm'}, {x: 'x', y: 'y', q: 'q'}); console.log(test); // {d: "d", m: "m", q: "q", x: "x", y: "y", z: "z"}

• getPrototypeOf & setPrototypeOf

let dzm = { getDzm() { return 'dzm'; } }

let xyq = { getXyq() { return 'xyq'; } }

let tempDzm = Object.create(dzm); console.log(tempDzm.getDzm()); // dzm console.log(Object.getPrototypeOf(tempDzm)); // {getDzm: ƒ} console.log(Object.getPrototypeOf(tempDzm) === dzm); // true

// 使用 setPrototypeOf 前者会被后者全部替换覆盖 Object.setPrototypeOf(tempDzm, xyq); console.log(tempDzm.getDzm()); // tempDzm.getDzm is not a function console.log(tempDzm.getXyq()); // xyq console.log(Object.getPrototypeOf(tempDzm) === dzm); // false console.log(Object.getPrototypeOf(tempDzm) === xyq); // true

__proto__

• __proto__ 和 prototype 有什么区别
  
• 普通继承
  

let dzm = { getDzm() { return 'dzm'; } }

let xyq = { getXyq() { return 'xyq'; } }

let djy = { proto: dzm }

console.log(djy.getDzm()); // dzm console.log(Object.getPrototypeOf(djy) === dzm); // true

djy.proto = xyq; console.log(djy.getDzm()); // djy.getDzm is not a function console.log(djy.getXyq()); // xyq console.log(Object.getPrototypeOf(djy) === dzm); // false console.log(Object.getPrototypeOf(djy) === xyq); // true

• 继承重写

let djy = { proto: dzm, getDzm() { return super.getDzm() + 'xyq'; } }

console.log(djy.getDzm()); // dzmxyq console.log(Object.getPrototypeOf(djy) === dzm); // true

Iterators 迭代器

function test(strs) {
  let i = 0;
  return {
    next() {
      let done = (i < strs.length);
      let value = done ? strs[i++] : undefined;
      return {
        value,
        done
      }
    }
  }
}
let temp = test(['d','z','m']);
console.log(temp.next()); // {value: "d", done: true}
console.log(temp.next()); // {value: "z", done: true}
console.log(temp.next()); // {value: "m", done: true}
console.log(temp.next()); // {value: undefined, done: false}

Generators 生成器

• 使用生成器创建一个迭代器

function* test() { yield 'd'; yield 'z'; yield 'm'; }

let temp = test(); console.log(temp.next()); // {value: "d", done: true} console.log(temp.next()); // {value: "z", done: true} console.log(temp.next()); // {value: "m", done: true} console.log(temp.next()); // {value: undefined, done: false}

function* test(strs) {
  for (let index = 0; index < strs.length; index++) {
    yield strs[index];
  }
}
let temp = test(['d','z','m']);
console.log(temp.next()); // {value: "d", done: true}
console.log(temp.next()); // {value: "z", done: true}
console.log(temp.next()); // {value: "m", done: true}
console.log(temp.next()); // {value: undefined, done: false}

class

class Dzm {
  // 初始化方法
  constructor(strs) {
    this.strs = strs;
  }
  log() {
    console.log(this.strs);
  }
}
let dzm = new Dzm('dzm');
dzm.log(); // dzm

set & get

class Dzm {
  constructor() {
    this.names = [];
  }
  get menu() {
    return this.names;
  }
  set menu(name) {
    this.names.push(name);
  }
}
let dzm = new Dzm();
console.log(dzm.menu = 'dzm'); // dzm
console.log(dzm.menu = 'xyq'); // xyq
console.log(dzm.menu); // ["dzm", "xyq"]

static

class Person {
  constructor(name, birthday) {
    this.name = name;
    this.birthday = birthday;
  }
  intro() {
    return `${this.name}, ${this.birthday}`;
  }
}
class Dzm extends Person {
  constructor(name, birthday) {
    super(name, birthday);
  }
}
let dzm = new Dzm('dzm', '2000-00-00');
console.log(dzm.intro()); // dzm, 2000-00-00

extends

class Person {
  constructor(name, birthday) {
    this.name = name;
    this.birthday = birthday;
  }
  intro() {
    return `${this.name}, ${this.birthday}`;
  }
}
class Dzm extends Person {
  constructor(name, birthday) {
    super(name, birthday);
  }
}
let dzm = new Dzm('dzm', '2000-00-00');
console.log(dzm.intro()); // dzm, 2000-00-00

super

• super 关键字
  // 调用 父对象/父类 的构造函数 super([arguments]);
  // 调用 父对象/父类 上的方法 super.functionOnParent([arguments]);
  

Set

let strs = new Set();
console.log(strs); // Set(0) {}
let strs = new Set('dzm');
console.log(strs); // Set(3) {"d", "z", "m"}
let strs = new Set('dzm','xyq');
console.log(strs); // Set(3) {"d", "z", "m"}
let strs = new Set('dzm');
strs.add('xyq');
console.log(strs); // Set(4) {"d", "z", "m", "xyq"}
let strs = new Set('dzm');
// Set 里不能包含同样的数据
strs.add('xyq');
strs.add('xyq');
console.log(strs); // Set(4) {"d", "z", "m", "xyq"}
console.log(strs.size); // 4
console.log(strs.has('xyq')); // true
strs.delete('xyq'); // 移除
console.log(strs) // Set(3) {"d", "z", "m"}
strs.forEach(str => { // 遍历
  console.log(str);
})
strs.clear(); // 清空
console.log(strs) // Set(0) {}

Map

let map = new Map();
let d = {}, z = function () {}, m = 'dzm';
map.set(d, 'd');
map.set(z, 'z');
map.set(m, 'm');
console.log(map); // Map(3) {{…} => "d", ƒ => "z", "dzm" => "m"}
console.log(map.size); // 3
console.log(map.get(d)); // d
console.log(map.get(z)); // z
console.log(map.get(m)); // m
map.delete(d); // 删除
console.log(map.has(d)); // false
map.forEach((value, key) => { // 循环
  console.log(`${key} = ${value}`);
});
map.clear(); // 清空
console.log(map); // Map(0) {}

export，import ，export default是什么

• ES6模块主要有两个功能：export和import
• export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
• import用于在一个模块中加载另一个含有export接口的模块。
• 也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块(文件)。这几个都是ES6的语法。
• 上面讲的是export和import，但是export跟export default 有什么区别呢？如下： ○ export与export default均可用于导出常量、函数、文件、模块等 ○ 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用 ○ 在一个文件或模块中，export、import可以有多个，export default仅有一个 ○ 通过export方式导出，在导入时要加{ }，export default则不需要 ○ 这样来说其实很多时候export与export default可以实现同样的目的，只是用法有些区别。注意空白圆圈第四条，通过export方式导出，在导入时要加{ }，export default则不需要。使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

export

• 比如 Test.js 代码导出：

○ 单个导出

export let dzm = 'dzmdzmdzm';
export let xyq = 'xyqxyqxyq';

○ 多个导出

let dzm = 'dzmdzmdzm';
let xyq = 'xyqxyqxyq';
function test(dzm, xyq) {
    console.log(`${dzm}---${xyq}`);
}
export {dzm, xyq, test as supper}
// export {dzm, xyq, test}
// as 为修改别名，在外部使用新修改的名字，也可以不修改。

• 外部代码使用：

○ 指定使用

import {dzm, xyq} from './Test';
import {dzm, xyq, supper} from './Test';
// import {dzm, xyq, supper as newName} from './Test';
// 使用这里也可以修改别名，看自己需求使用。

然后直接使用 dzm, xyq 或者 supper 属性即可。

调用方法

supper(dzm, xyq); // 输出 dzmdzmdzm---xyqxyqxyq

○ 全部使用

import * as test from './Test';

然后直接使用 test.dzm, test.xyq 属性即可。

export default

• 请看文章上面的 「 export，import ，export default是什么 」方便认识好它们的区别。

• 比如 Test.js 代码导出：

export default function test(dzm, xyq) { console.log(${dzm}---${xyq}); }

• 外部接收

import test from './Test';

导出的 test 这里就默认相当于是 test(dzm, xyq) 方法，export default 导出的是什么它就代表是什么。我们可以直接这么使用

test('dzm', 'xyq'); // dzm---xyq

• 还可以这样导出默认属性

function test(dzm, xyq) { console.log(${dzm}---${xyq}); } export {test as default};

这样导出的效果也是一致的。只要记住 通过export方式导出，在导入时要加{ }，export default则不需要，因为它是默认的。