最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

全球最资讯丨ES6 简介（二）

来源：博客园
目录
  • ES6 简介（二）
    • 五、 函数扩展
      • 1、 函数参数默认值
        • 1.1 基本用法
        • 1.2 与解构赋值默认值结合使用
        • 1.3 指定参数的必要性
      • 2、 rest 参数
      • 3、 name 属性
      • 4、 箭头函数
    • 六、 模块化
      • 1、 概述
      • 2、 导入导出
        • 2.1 export
        • 2.2 import
      • 3、 模块的整体加载
      • 4、 模块的继承
      • 5、 import()
    • 七、 es6 编程风格
      • 1、 块级作用域
      • 2、 字符串
      • 3、 结构赋值
      • 4、 对象
      • 5、 数组
      • 6、 函数
      • 7、 Map 结构
      • 8、 Class
      • 9、 模块

ES6 简介（二）

五、 函数扩展

1、 函数参数默认值

1.1 基本用法

ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。


(资料图片仅供参考)

function log(x, y) {  y = y || "World";  console.log(x, y);}log("Hello") // Hello Worldlog("Hello", "China") // Hello Chinalog("Hello", "") // Hello World

缺点：

  • 如果参数 y 赋值了，但是对应的布尔值为 false ，则该赋值不起作用。就像上面代码的最后一行，参数 y 等于空字符，结果被改为默认值。

修改：

if (typeof y === "undefined") {  y = "World";}

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = "World") {  console.log(x, y);}log("Hello") // Hello Worldlog("Hello", "China") // Hello Chinalog("Hello", "") // Hello

优点：

  • 阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；
  • 有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

注意：

  • 参数变量是默认声明的，所以不能用 let 或 const 再次声明；

    function foo(x = 5) {  let x = 1; // error  const x = 2; // error}

  • 使用参数默认值时，函数不能有同名参数；

    // 不报错function foo(x, x, y) {  // ...}// 报错function foo(x, x, y = 1) {  // ...}// SyntaxError: Duplicate parameter name not allowed in this context

  • 参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。

    let x = 99;    function foo(p = x + 1) {  console.log(p);}    foo() // 100    x = 100;    foo() // 101

1.2 与解构赋值默认值结合使用

function foo({x, y = 5}) {  console.log(x, y);}foo({}) // undefined 5foo({x: 1}) // 1 5foo({x: 1, y: 2}) // 1 2foo() // TypeError: Cannot read property "x" of undefined

这里只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数 foo 的参数是一个对象时，变量 x 和 y 才会通过解构赋值生成。如果函数 foo 调用时没提供参数，变量 x 和 y 就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

与函数默认值结合使用：

function foo({x, y = 5} = {}) {  console.log(x, y);}foo() // undefined 5

使用示例：

function fetch(url, { body = "", method = "GET", headers = {} } = {}) {  console.log(method);}fetch("http://example.com")// "GET"

双重默认值

1.3 指定参数的必要性

利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

function throwIfMissing() {  throw new Error("Missing parameter");}function foo(mustBeProvided = throwIfMissing()) {  return mustBeProvided;}foo()// Error: Missing parameter

可以将参数默认值设为 undefined ，表明这个参数是可以省略的

function foo(optional = undefined) { ··· }

2、 rest 参数

ES6 引入rest 参数（形式为 ...变量名 ），用于获取函数的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

const ft = (...args) => {    console.log(typeof args);    return args;}console.log(ft(1, 2, 3))

rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

注意，arguments 其为一个伪数组，不是数组，而 rest 参数 其为一个数组。

使用示例：

// arguments变量的写法function sortNumbers() {  return Array.prototype.slice.call(arguments).sort();}// rest参数的写法const sortNumbers = (...numbers) => numbers.sort();

3、 name 属性

函数的name属性，返回该函数的函数名。

function foo() {}foo.name // "foo"

这个属性早就被浏览器广泛支持，但是直到 ES6，才将其写入了标准。

需要注意的是，ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量，ES5 的 name 属性，会返回空字符串，而 ES6 的 name 属性会返回实际的函数名。

var f = function () {};// ES5f.name ""// ES6f.name "f"

上面代码中，变量 f 等于一个匿名函数，ES5 和 ES6 的 name 属性返回的值不一样。

如果将一个具名函数赋值给一个变量，则 ES5 和 ES6 的 name 属性都返回这个具名函数原本的名字。

const bar = function baz() {};// ES5bar.name "baz"// ES6bar.name "baz"

Function 构造函数返回的函数实例， name 属性的值为 anonymous 。

(new Function).name // "anonymous"

bind 返回的函数， name 属性值会加上 bound 前缀。

function foo() {};foo.bind({}).name // "bound foo"(function(){}).bind({}).name // "bound "

4、 箭头函数

ES6允许使用“箭头”（ => ）定义函数。

var f = v => v;// 等同于var f = function (v) {  return v;};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;// 等同于var f = function () { return 5 };var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) {  return num1 + num2;};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句返回。

var sum = (num1, num2) => { return num1 + num2; }

如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let fn = () => void doesNotReturn();

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句返回。

// 报错let getTempItem = id => { id: id, name: "Temp" };// 不报错let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数的一个用处是简化回调函数。

// 正常函数写法var result = values.sort(function (a, b) {  return a - b;});// 箭头函数写法var result = values.sort((a, b) => a - b);

使用注意点：

（1）函数体内的 this对象，就是定义时所在的对象，而不是使用时所在的对象。

  • function foo() {    setTimeout(() => {        console.log("id:", this.id);    }, 100);}let id = 21;foo.call({ id: 42 });// id: 42// 将上面函数装换为 es5 代码// ES5function foo() {  const _this = this;  setTimeout(function () {    console.log("id:", _this.id);  }, 100);}

（2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用 yield命令，因此箭头函数不能用作 Generator 函数。

六、 模块化

1、 概述

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的 require 、Python 的 import ，甚至就连 CSS 都有 @import ，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

// CommonJS模块let { stat, exists, readfile } = require("fs");// 等同于let _fs = require("fs");let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;

上面代码的实质是整体加载 fs 模块（即加载 fs 的所有方法），生成一个对象（ _fs ），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入。

// ES6模块import { stat, exists, readFile } from "fs";

静态加载

2、 导入导出

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

2.1 export

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

// profile.jsexport const firstName = "Michael";export const lastName = "Jackson";export const year = 1958;// 也可以这样const firstName = "Michael";const lastName = "Jackson";const year = 1958;export { firstName, lastName, year };

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

通常情况下， export 输出的变量就是本来的名字，但是可以使用 as 关键字重命名。

function v1() { ... }function v2() { ... }export {  v1 as streamV1,  v2 as streamV2,  v2 as streamLatestVersion};

需要特别注意的是， export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 报错export 1;// 报错var m = 1;export m;// 应该要这样写export var m = 1;export {m};

最后， export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错， import 命令也是如此。

2.2 import

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

// main.jsimport { firstName, lastName, year } from "./profile.js";function setName(element) {  element.textContent = firstName + " " + lastName;}// 也可以修改变量的名字import { lastName as surname } from "./profile.js";
  • import 命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
  • import 后面的 from 指定模块文件的位置，可以是相对路径，也可以是绝对路径， .js 后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。
  • 由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

加载所有模块：

import "lodash";

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

3、 模块的整体加载

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

下面是一个 circle.js 文件，它输出两个方法 area 和 circumference 。

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

加载模块：

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

4、 模块的继承

模块之间也可以继承。

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

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

5、 import()

前面介绍过，import命令会被JavaScript引擎静态分析，先于模块内的其他语句执行（ import 命令叫做“连接” binding 其实更合适）。所以，下面的代码会报错。

// 报错if (x === 2) {  import MyModual from "./myModual";}

那我们可不可以根据需求来加载呢？

  1. 使用 require 来进行动态加载

    const path = "./" + fileName;const myModual = require(path);

  2. 使用 import() 来加载

    const main = document.querySelector("main");import( ./section-modules/${someVariable}.js )  .then(module => {    module.loadPageInto(main);  })  .catch(err => {    main.textContent = err.message;  });

注意：

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

  • 如果模块有 default 输出接口，可以用参数直接获得。

  • import("./myModule.js").then(myModule => {  console.log(myModule.default);});

  • 加载多个模块

    Promise.all([  import("./module1.js"),  import("./module2.js"),  import("./module3.js"),]).then(([module1, module2, module3]) => {   ···});

使用场景：

  • 按需加载
  • 条件加载
  • 动态的模块路径

七、 es6 编程风格

1、 块级作用域

使用 let 取代 var：

  • ES6 提出了两个新的声明变量的命令：let和 const。其中，let完全可以取代 var，因为两者语义相同，而且let没有副作用。

全局常量和线程安全：

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

const 优于 let 有几个原因：

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

2、 字符串

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

// badconst a = "foobar";const b = "foo" + a + "bar";// acceptableconst c =  "foobar" ;// goodconst a = `foobar`;const b =  `foo${a}bar`;

3、 结构赋值

使用数组成员对变量赋值时，优先使用解构赋值。

const arr = [1, 2, 3, 4];// badconst first = arr[0];const second = arr[1];// goodconst [first, second] = arr;

函数的参数如果是对象的成员，优先使用解构赋值。

// badfunction getFullName(user) {  const firstName = user.firstName;  const lastName = user.lastName;}// goodfunction getFullName(obj) {  const { firstName, lastName } = obj;}// bestfunction getFullName({ firstName, lastName }) {}

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

// badfunction processInput(input) {  return [left, right, top, bottom];}// goodfunction processInput(input) {  return { left, right, top, bottom };}const { left, right } = processInput(input);

4、 对象

单行定义的对象，最后一个成员不以逗号结尾。

多行定义的对象，最后一个成员以逗号结尾。

// badconst a = { k1: v1, k2: v2, };const b = {  k1: v1,  k2: v2};// goodconst a = { k1: v1, k2: v2 };const b = {  k1: v1,  k2: v2,};

对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用 Object.assign方法。

// badconst a = {};a.x = 3;// if reshape unavoidableconst a = {};Object.assign(a, { x: 3 });// goodconst a = { x: null };a.x = 3;

如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

// badconst obj = {  id: 5,  name: "San Francisco",};obj[getKey("enabled")] = true;// goodconst obj = {  id: 5,  name: "San Francisco",  [getKey("enabled")]: true,};

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

var ref = "some value";// badconst atom = {  ref: ref,  value: 1,  addValue: function (value) {    return atom.value + value;  },};// goodconst atom = {  ref,  value: 1,  addValue(value) {    return atom.value + value;  },};

5、 数组

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

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

使用 Array.from 方法，将类似数组的对象转为数组。

const nodes = Array.from(argument);

6、 函数

立即执行函数可以写成箭头函数的形式。

(() => {  console.log("Welcome to the Internet.");})();

那些使用匿名函数当作参数的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。

// bad[1, 2, 3].map(function(x) {  return x * x;});// good[1, 2, 3].map((x) => {  return x * x;});// best[1, 2, 3].map(x => x * x);

箭头函数取代Function.prototype.bind，不应再用 self/_this/that 绑定 this。

// badconst self = this;const boundMethod = function(...params) {  return method.apply(self, params);}// acceptableconst boundMethod = method.bind(this);// bestconst boundMethod = (...params) => method.apply(this, params);

简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。

所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数。

// badfunction divide(a, b, option = false ) {}// goodfunction divide(a, b, { option = false } = {}) {}

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

// badfunction concatenateAll() {  const args = Array.from(arguments);  return args.join("");}// goodfunction concatenateAll(...args) {  return args.join("");}

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

// badfunction handleThings(opts) {  opts = opts || {};}// goodfunction handleThings(opts = {}) {  // ...}

7、 Map 结构

注意区分 Object 和 Map，只有模拟现实世界的实体对象时，才使用 Object。如果只是需要 key: value的数据结构，使用 Map 结构。因为 Map 有内建的遍历机制。

let map = new Map(arr);for (let key of map.keys()) {  // 遍历键  console.log(key);}for (let value of map.values()) {  // 遍历值  console.log(value);}for (let item of map.entries()) {  // 遍历键值对  console.log(item[0], item[1]);}

8、 Class

总是用 Class，取代需要 prototype 的操作。因为 Class 的写法更简洁，更易于理解。

// badfunction Queue(contents = []) {  this._queue = [...contents];}Queue.prototype.pop = function() {  const value = this._queue[0];  this._queue.splice(0, 1);  return value;}// goodclass Queue {  constructor(contents = []) {    this._queue = [...contents];  }  pop() {    const value = this._queue[0];    this._queue.splice(0, 1);    return value;  }}

使用 extends实现继承，因为这样更简单，不会有破坏 instanceof运算的危险。

// badconst inherits = require("inherits");function PeekableQueue(contents) {  Queue.apply(this, contents);}inherits(PeekableQueue, Queue);PeekableQueue.prototype.peek = function() {  return this._queue[0];}// goodclass PeekableQueue extends Queue {  peek() {    return this._queue[0];  }}

9、 模块

首先，Module语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用 import取代 require。

// badconst moduleA = require("moduleA");const func1 = moduleA.func1;const func2 = moduleA.func2;// goodimport { func1, func2 } from "moduleA";

使用 export取代 module.exports 。

// commonJS的写法var React = require("react");var Breadcrumbs = React.createClass({  render() {    return

如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用 export default， export default与普通的 export不要同时使用。

不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）。

// badimport * as myObject from "./importModule";// goodimport myObject from "./importModule";

如果模块默认输出一个函数，函数名的首字母应该小写。

function makeStyleGuide() {}export default makeStyleGuide;

如果模块默认输出一个对象，对象名的首字母应该大写。

const StyleGuide = {  es6: {  }};export default StyleGuide;

关键词： 一个对象 也就是说