es6学习-201803

Posted 2020-10-28 Colorful_coco

1、ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。

2、变量的解构赋值

数组

对象

3、扩展运算符（...）

//数组
const [a, ...b] = [1, 2, 3];
a // 1
b // [2, 3]

//对象
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

4、函数的扩展

1）函数参数的默认值

 

5、对象的扩展

ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

function f(x, y) {
  return {x, y};
}
// 等同于
function f(x, y) {
  return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}

const o = {
  method() {
    return "Hello!";
  }
};
// 等同于
const o = {
  method: function() {
    return "Hello!";
  }
};

 6、Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

1）ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 javascript 引擎提供，不用自己部署。resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

const promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

2）Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

3）Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。可以采用链式写法，即then方法后面再调用另一个then方法。采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),  //funcA
  err => console.log("rejected: ", err)  //funcB
);
/*
第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。
如果变为resolved，就调用funcA，如果状态变为rejected，就调用funcB。
*/

4）Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

getJSON(\'/posts.json\').then((val) => console.log(\'fulfilled:\', val))
.catch((err) => console.log(\'rejected\', err));
/*
getJSON方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then方法指定的回调函数；
如果异步操作抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数，处理这个错误。
另外，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
*/

一般来说，不要在then方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) {
    // success
  })
  .catch(function(err) {
    // error
  });
/*
第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。
因此，建议总是使用catch方法，而不使用then方法的第二个参数。
*/

一般总是建议，Promise 对象后面要跟catch方法，这样可以处理 Promise 内部发生的错误。catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法。

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};
someAsyncThing()
.catch(function(error) {
  console.log(\'oh no\', error);
})
.then(function() {
  console.log(\'carry on\');
});
// oh no [ReferenceError: x is not defined]
// carry on

/*上面代码运行完catch方法指定的回调函数，会接着运行后面那个then方法指定的回调函数。如果没有报错，则会跳过catch方法。*/
Promise.resolve()
.catch(function(error) {
  console.log(\'oh no\', error);
})
.then(function() {
  console.log(\'carry on\');
});
// carry on

7、模块Module

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

1）export命令

a、一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

export var firstName = \'Michael\';
export var lastName = \'Jackson\';
export var year = 1958;

//等价于
var firstName = \'Michael\';
var lastName = \'Jackson\';
var year = 1958;

export {firstName, lastName, year};
/*优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。*/

export命令除了输出变量，还可以输出函数或类（class）。

b、export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 错误写法
export 1;
var m = 1;export m; 
function f() {};export f;

// 正确写法
export var m = 1;
var m = 1;export {m};
export function f() {};
function f() {};export {f};

c、通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。（import命令类似）

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2
};

2）import 命令

a、使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

import {firstName, lastName, year} from \'./profile.js\'; //加载profile.js文件，并从中输入变量

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同（建议凡是输入的变量，都当作完全只读，轻易不要改变它的属性）。import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。

b、import语句会执行所加载的模块。

import \'lodash\';  //仅仅执行lodash模块，但是不输入任何值

目前阶段，通过 Babel 转码，CommonJS 模块的require命令和 ES6 模块的import命令，可以写在同一个模块里面，但是最好不要这样做。因为import在静态解析阶段执行，所以它是一个模块之中最早执行的。

c、模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

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

// xxx.js
//1、逐一指定要加载的方法
import { area, circumference } from \'./circle\';
console.log(\'圆面积：\' + area(4));
console.log(\'圆周长：\' + circumference(14));

//2、整体加载
import * as circle from \'./circle\';
console.log(\'圆面积：\' + circle.area(4));
console.log(\'圆周长：\' + circle.circumference(14));

3）export default 命令

a、使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。export default命令能为模块指定默认输出。

// export-default.js  默认输出是一个函数
export default function () {
  console.log(\'foo\');
}
// import-default.js
// 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。这时import命令后面，不使用大括号。
import customName from \'./export-default\';
customName(); // \'foo\'

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

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

export default function foo() {
  console.log(\'foo\');
}
// 或者写成
function foo() {
  console.log(\'foo\');
}
export default foo;

c、因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

export var a = 1;// 正确
var a = 1;export default a;// 正确
export default var a = 1;// 错误
/*上面代码中，export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错*/

export default 42;// 正确
export 42;// 报错
/*
同样地，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。
上面代码中，后一句报错是因为没有指定对外的接口，而前一句指定外对接口为default。
*/

4）export 与 import 的复合写法

a、如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

export { foo, bar } from \'my_module\';
// 可以简单理解为
import { foo, bar } from \'my_module\';
export { foo, bar };
/*
上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，
只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。
*/

b、模块的接口改名和整体输出，也可以采用这种写法。

// 接口改名
export { foo as myFoo } from \'my_module\';
// 整体输出
export * from \'my_module\';//会忽略my_module模块的default方法
// 默认接口
export { default } from \'foo\';
// 默认接口也可以改名为具名接口
export { default as es6 } from \'./someModule\';

4）跨模块常量

const声明的常量只在当前代码块有效。如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法。

// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;

// test1.js 模块
import * as constants from \'./constants\';
console.log(constants.A); // 1
console.log(constants.B); // 3

// test2.js 模块
import {A, B} from \'./constants\';
console.log(A); // 1
console.log(B); // 3

 5）import()函数

import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行。

if (x === 2) {// 报错
  import MyModual from \'./myModual\';
}
/*
上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。
也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。
*/

这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。

const path = \'./\' + fileName;
const myModual = require(path);
/*上面的语句就是动态加载，require到底加载哪一个模块，只有运行时才知道*/

a、有一个提案，建议引入import()函数，完成动态加载。import(specifier)：import函数的参数specifier，指定所要加载的模块的位置。

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

b、import()的一些适用场合

（1）按需加载：import()可以在需要的时候，再加载某个模块。

button.addEventListener(\'click\', event => {
  import(\'./dialogBox.js\')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});
/*上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块*/

（2）条件加载：import()可以放在if代码块，根据不同的情况，加载不同的模块。

if (condition) {
  import(\'moduleA\').then(...);
} else {
  import(\'moduleB\').then(...);
}
/*上面代码中，如果满足条件，就加载模块 A，否则加载模块 B*/

（3）动态的模块路径：import()允许模块路径动态生成。

import(f()).then(...);
/*上面代码中，根据函数f的返回结果，加载不同的模块*/

c、注意点

import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

import(\'./myModule.js\')
.then(({export1, export2}) => {
  // ...·
});
/*上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得*/

// 如果模块有default输出接口，可以用参数直接获得。
import(\'./myModule.js\')
.then(myModule => {
  console.log(myModule.default);
});

8、ES6 模块与 CommonJS 模块的差异（Node 应用由模块组成，采用 CommonJS 模块规范）

1）它们有两个重大差异。

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

// lib.js
export let obj = {};

// main.js
import { obj } from \'./lib\';
obj.prop = 123; // OK
obj = {}; // TypeError
/*上面代码中，main.js从lib.js输入变量obj，可以对obj添加属性，但是重新赋值就会报错。因为变量obj指向的地址是只读的，不能重新赋值*/

export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例。

vue：当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

2）import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。如果模块名不含路径，那么import命令会去node_modules目录寻找这个模块。

3）CommonJS—module.exports属性

module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量。为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令—var exports = module.exports。造成的结果是，在对外输出模块接口时，可以向exports对象添加方法。


exports.area = function (r) {
  return Math.PI * r * r;
};

注意，不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。

exports = function(x) {console.log(x)};
// 上面这样的写法是无效的，因为exports不再指向module.exports了。

// 下面的写法也是无效的。
// hello函数是无法对外输出的，因为module.exports被重新赋值了
exports.hello = function() {
  return \'hello\';
};
module.exports = \'Hello world\';

这意味着，如果一个模块的对外接口，就是一个单一的值，不能使用exports输出，只能使用module.exports输出。如果你觉得，exports与module.exports之间的区别很难分清，一个简单的处理方法，就是放弃使用exports，只使用module.exports。

module.exports = function (x){ console.log(x);};

9、字符串的扩展—模板字符串

模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串中嵌入变量，需要将变量名写在${}之中。

$(\'#result\').append(
  \'There are <b>\' + basket.count + \'</b> \' +
  \'items in your basket, \' +
  \'<em>\' + basket.onSale +
  \'</em> are on sale!\'
);
// 上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。
$(\'#result\').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

console.log(`string text line 1
string text line 2`);
/*
string text line 1
string text line 2
*/

$(\'#list\').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);
/*上面代码中，所有模板字符串的空格和换行，都是被保留的，比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。*/
$(\'#list\').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

10、编程风格

1）块级作用域

a、let 取代 var：var命令存在变量提升效用，let命令没有这个问题

b、全局常量

在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。

const优于let有几个原因。一个是const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是 JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率，也就是说let和const的本质区别，其实是编译器内部的处理不同。

// bad
var a = 1, b = 2, c = 3;
// good
const a = 1;
const b = 2;
const c = 3;
// best
const [a, b, c] = [1, 2, 3];

const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。所有的函数都应该设置为常量。

2）静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。

// bad
const a = "foobar";
const b = \'foo\' + a + \'bar\';
// acceptable
const c = `foobar`;
// good
const a = \'foobar\';
const b = `foo${a}bar`;

3）解构赋值

a、使用数组成员对变量赋值时，优先使用解构赋值。函数的参数如果是对象的成员，优先使用解构赋值。

const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}
// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {
}

b、如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。

// bad
function processInput(input) {
  return [left, right, top, bottom];
}
// good
function processInput(input) {
  return { left, right, top, bottom };
}
const { left, right } = processInput(input);

4）对象

对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。

var ref = \'some value\';
// bad
const atom = {
  ref: ref,
  value: 1,
  addValue: function (value) {
    return atom.value + value;
  },
};
// good
const atom = {
  ref,
  value: 1,
  addValue(value) {
    return atom.value + value;
  },
};

5）数组

使用扩展运算符（...）拷贝数组。

// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];

6）函数

a、不要在函数体内使用 arguments 变量，使用 rest 运算符（...）代替。因为 rest 运算符显式表明你想要获取参数，而且 arguments 是一个类似数组的对象，而 rest 运算符可以提供一个真正的数组。

// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join(\'\');
}
// good
function concatenateAll(...args) {
  return args.join(\'\');
}

b、使用默认值语法设置函数参数的默认值。

// bad
function handleThings(opts) {
  opts = opts || {};
}
// good
function handleThings(opts = {}) {
  // ...
}

7）模块

Module 语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用import取代require，使用export取代module.exports。

// bad
const moduleA = require(\'moduleA\');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// good
import { func1, func2 } from \'moduleA\';

// commonJS的写法
var React = require(\'react\');
var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});
module.exports = Breadcrumbs;
// ES6的写法
import React from \'react\';
class Breadcrumbs extends React.Component {
  render() {
    return <nav />;
  }
};
export default Breadcrumbs;