ES6笔记二

Posted 2020-09-26

1.遍历Map结构;任何部署了Iterator接口的对象，都可以用for...of循环遍历。Map结构原生支持Iterator接口，配合变量的结构赋值，获取键名和键值就非常方便。

    var map = new Map();
    map.set(‘first‘, ‘hello‘);
    map.set(‘second‘, ‘world‘);
    for (let [key, value] of map) {
      console.log(key + " is " + value);
     }
     // first is hello
     // second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

    // 获取键名
    for (let [key] of map) {
      // ...
    }
    
    // 获取键值
    for (let [,value] of map) {
      // ...
    }

2.输入模块的指定方法;加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

3.字符串扩展

    charCodeAt方法只能分别返回前两个字节和后两个字节的值。

    

var s = "";
s.length // 2
s.charAt(0) // ‘‘
s.charAt(1)    // ‘‘
s.charCodeAt(0) // 55362        
s.charCodeAt(1) // 57271

    codePointAt方法，能够正确处理4个字节储存的字符;codePointAt方法会正确返回四字节的UTF-16字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt方法相同。

    var s = "a";
    s.codePointAt(0) // 134071
    s.codePointAt(1) // 57271
    s.charCodeAt(2) // 97

    

    ES6提供了String.fromCodePoint方法，可以识别0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。

    String.fromCodePoint(0x20BB7)
     // ""

    ES7提供了at方法，可以识别Unicode编号大于0xFFFF的字符，返回正确的字符。

    ‘‘.at(0)
    // ‘‘

    

    字符的Unicode表示法:

        ES6对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

    "\u{20BB7}"
    // ""
    
    "\u{41}\u{42}\u{43}"
    // "ABC"

    

    Unicode字符表示法:

    ES6新增了使用大括号表示Unicode字符，这种表示法在正则表达式中必须加上u修饰符，才能识别。

    /\u{61}/.test(‘a‘) // false
    /\u{61}/u.test(‘a‘) // true
    /\u{20BB7}/u.test(‘‘) // true

上面代码表示，如果不加u修饰符，正则表达式无法识别\u{61}这种表示法，只会认为这匹配61个连续的u。

    量词

    使用u修饰符后，所有量词都会正确识别大于码点大于0xFFFF的Unicode字符。

    /a{2}/.test(‘aa‘) // true
    /a{2}/u.test(‘aa‘) // true
    /{2}/.test(‘‘) // false
    /{2}/u.test(‘‘) // true

ES6 Class

//定义类
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return ‘(‘+this.x+‘, ‘+this.y+‘)‘;
  }
}

var point = new Point(2,3);

point.toString() // (2, 3)

constructor函数是构造函数
this关键字则代表实例对象
定义了一个toString方法

Class之间可以通过extends关键字，实现继承。

class ColorPoint extends Point {}

上面代码定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法。

class ColorPoint extends Point {

  constructor(x, y, color) {
    super(x, y); // 等同于super.constructor(x, y)    
    this.color = color;
  }

  toString() {
    return this.color+‘ ‘+super();
  }
}

上面代码中，constructor方法和toString方法之中，都出现了super关键字，它指代父类的同名方法。在constructor方法内，super指代父类的constructor方法；在toString方法内，super指代父类的toString方法

Module基本用法

CommonJS模块就是对象，输入时必须查找对象属性。

var { stat, exists, readFile } = require(‘fs‘);

ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。

import { stat, exists, readFile } from ‘fs‘;

所以，ES6可以在编译时就完成模块编译，效率要比CommonJS模块高。

模块功能主要由两个命令构成：export和import。export命令用于用户自定义模块，规定对外接口；import命令用于输入其他模块提供的功能，同时创造命名空间（namespace），防止函数名冲突。文件内部的所有变量，外部无法获取，必须使用export关键字输出变量

eg:

// profile.js
export var firstName = ‘Michael‘;
export var lastName = ‘Jackson‘;
export var year = 1958;

或者

// profile.js
var firstName = ‘Michael‘;
var lastName = ‘Jackson‘;
var year = 1958;
export {firstName, lastName, year};

// main.js
import {firstName, lastName, year} from ‘./profile‘;
function sfirsetHeader(element) {
  element.textContent = firstName + ‘ ‘ + lastName;
 }
 大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

如果想为输入的变量重新取一个名字，import语句中要使用as关键字，将输入的变量重命名。

import { lastName as surname } from ‘./profile‘;

export命令除了输出变量，还可以输出方法或类（class）。下面是一个circle.js文件，它输出两个方法area和circumference。

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

然后，main.js输入circlek.js模块。

// main.js
import { area, circumference } from ‘circle‘;
console.log("圆面积：" + area(4));
console.log("圆周长：" + circumference(14));

上面写法是逐一指定要输入的方法。另一种写法是整体输入。

import * as circle from ‘circle‘;
console.log("圆面积：" + circle.area(4));
console.log("圆周长：" + circle.circumference(14));

module命令可以取代import语句，达到整体输入模块的作用。

// main.js

module circle from ‘circle‘;
console.log("圆面积：" + circle.area(4));
console.log("圆周长：" + circle.circumference(14));

如果想要输出匿名函数，可以使用export default命令。

// export-default.js
export default function () {
    console.log(‘foo‘);
}

其他模块输入该模块时，import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from ‘./export-default‘;
customName(); // ‘foo‘

上面代码的import命令，可以用任意名称指向输出的匿名函数。需要注意的是，这时import命令后面，不使用大括号。

export default命令用在非匿名函数前，也是可以的。

// export-default.js
export default function foo() {
  console.log(‘foo‘);
}

// 或者写成
function foo() {
  console.log(‘foo‘);
}

export default foo;

上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

如果想在一条import语句中，同时输入默认方法和其他变量，可以写成下面这样。

import customName, { otherMethod } from ‘./export-default‘;

如果要输出默认的值，只需将值跟在export default之后即可。

export default 42;

export default也可以用来输出类。

// MyClass.js

export default class { ... }

// main.js
import MyClass from ‘MyClass‘

let o = new MyClass();

模块之间也可以继承。

假设有一个circleplus模块，继承了circle模块。

// circleplus.js
export * from ‘circle‘;
export var e = 2.71828182846;
export default function(x) {
    return Math.exp(x);
}

上面代码中的“export *”，表示输出circle模块的所有属性和方法，export default命令定义模块的默认方法。