[前端-学习]-es6语法精要

,

介绍

目前浏览器和教科书中学到的大量js语法，是所谓的ES5版本。
ES5之前，一直是这样命名的:

  • Standard ECMA-262, 1st Edition（其实第一个版本是没有版本号的）
  • Standard ECMA-262, 2nd EditionStandard ECMA-262
  • 3rd EditionStandard ECMA-262 5th （这就是ES5）
  • EditionStandard ECMA-262 5.1 Edition

其中后面1st，2nd，5th是版本号。ES5之后，标准的命名改了，加上了年份，ES6就变成叫 ECMAScript® 2015 Language Specification, ES7 就是 ECMAScript® 2016 Language Specification。所以大家直接叫她的年份名字就行了。

现在已经出ES8了，他们的名称对应如下:

  • ES6 (ES2015)
  • ES7 (ES2016)
  • ES8 (ES2017)

总之，ES2015 或者更新的ES语法标准 提供了许多新的语法和编程特性以提高 JavaScript 的开发效率和体验

ES7和ES8

http://www.jianshu.com/p/a138a525c287

模块化

1
2
3
4
5
// 导入语法
import mod from './mod.js'

// 导出语法
export default mod = {}

这篇文章记录了 ES module 的发展和讨论历史，以及如何最终决定使用 .mjs 扩展名的方式来兼容commonjs和esmodule模块的加载。
https://segmentfault.com/a/1190000004940294

es6的模块化，在 Node 中一直没有实现。如果希望使用的话，需要使用babel进行预编译来实现。

箭头函数

箭头函数使得我们编写代码更加简洁。

1
2
3
4
5
6
const test = param => console.log(param)
// 如果参数多一些，就要给形参加上括号. 如果函数体不止一句，则需要加大括号
const test = (param1, param2) => {
  console.log(param2)
  console.log(param1)
}

箭头函数一个重要的特性是其this会引用其上层作用域的 this (即箭头函数定义所在的作用域的 this)

属性简洁表示法

如果要把一个变量赋值给一个对象作为属性，且你希望就用变量名字当做属性名。此时，可以直接使用

1
2
const foo = 'bar';
const baz = {foo};

则baz变量实际上为: 

1
{foo: foo}

扩展运算符

1
2
3
let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

他实现的是浅复制，并不是将z对象的指针赋值给n。其含义类似如下代码:

1
2
3
let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

应用场景:

  • 将多个大对象赋值给一个需要分解后属性的变量。比如Vue的computed属性，除了自己定义一些属性之外，有时需要把vuex里的state映射到这里，此时可以利用扩展运算符:

    1
    2
    3
    4
    5
    6
    7
    computed: {
      yourProperty () { /* ... */ },
      // 使用对象展开运算符将此对象混入到外部对象中
      ...mapState({
        // ...
      })
    }

  • 修改已有对象的某个属性

    1
    2
    3
    4
    let newVersion = {
      ...previousVersion,
      name: 'New Name' // Override the name property
    };

这样previousVersion表示已有的对象，则这种写法可以用name去修改previousVersion这个对象里的name属性

  • 接收参数时，给参数设置默认值
    1
    let aWithDefaults = { x: 1, y: 2, ...options };
    如果options里面没有设置x和y，则x和y的默认值为 1 和 2. 它等同于:
    1
    2
    3
    let aWithDefaults = Object.assign({}, { x: 1, y: 2 }, a);
    // 等同于
    let aWithDefaults = Object.assign({ x: 1, y: 2 }, a);
  • 扩展对象到

模块

ES module是新一代的模块化方法，它主张静态解析的能力。而不像以前要引用另外一个模块的话，需要引用另外一个模块导出的完整对象。有了 esmodule,我们可以指定要 import 哪个方法，哪个属性。从而在编译期间就能缩减加载内容。基于此， export 也应该具备导出单个属性和方法的能力。下面我们看下例子:

1
2
3
4
5
6
7
// a.js
const a = {}
export default a // 将 a 作为本模块的默认导出
const b = {}
const c = function () {}
export {b, c} // 将 b 和 c 两个属性导出
export const d = {} // 将属性 d 导出

我们在 a.js 里面使用 默认导出，单独导出 等方式导出了多个变量。下面我们在 b.js 里面把他们导入进来

1
2
3
4
// 导入 a
import a from 'a.js' // default导出只有一个，因此我们导入时可以改变名字: import xx from 'a.js'也可以
// 导入b c
import {b, c} from 'a.js'

class 类的新写法

首先，我们知道 ES6 中新增了 class 关键字，允许我们像其他面向对象的语言一样来定义类（实际上它是原型写法的语法糖）。

另外，有了 class 之后，我们的属性不再是只能在构造函数或实例中创建，而是可以在声明类的时候便声明属性。如下 _count 属性:

1
2
3
4
5
6
7
8
9
10
class IncreasingCounter {
  _count = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

这样我们可以把类中所有属性都定义在类的声明前面，一目了然。

Refer

给 JavaScript 初心者的 ES2015 实战