ES6简介

ES6(ECMAScript2015)是2015年6月发布的新一代Javascript语言标准

  1. ES6就是ECMAScript的第6版，因是2015发布的，所以也叫ECMAScript2015。
  2. ECMAScript是javascript的语言标准，而javascript是ECMAScript的实现。

Babel转码器

因为现在的浏览器对ES6的新语法，并不是完全支持，所以需要将ES6的语法转码成ES5。

  • 目前大多数比较常用的ES6新语法，chrome-60.0及以上版本都支持的较好，可以直接用来熟悉语法

chrome_es6

  • 实时查看es6转码: http://babeljs.io/repl/

  • 在线使用es6语法编码

  • 项目中是怎样使用babel的？

    因babel实时编辑比较耗时，所以在实际项目中，都比较推荐本地编译好，再打包到生成环境。

    • babel-cli 命令行编译 参考

      1. // install
      2. npm install --save-dev babel-cli
      3. // execute
      4. babel script.js --out-file script-compiled.js

    • babel-register 实时编译(不推荐) 参考

    • .babelrc 配置文件(常用) 参考

let和const

参考

1. 块级作用域

  1. // es5, 只有函数作用域，没有块级作用域
  2. function foo() {
  3.     var a = 1;
  4. }
  5. foo();
  6. console.log(a);
  8. // es5, if语句
  9. if(true) {
  10.     var b = 1;
  11. }
  12. console.log(b);
  14. // es5, for循环
  15. for(var i = 0; i < 5; i++) {
  16.     ...
  17. }
  18. console.log(i);
  20. // es6, 用let及const声明的变量默认拥有块级作用域, 即只在let/const命令所在的代码块内有效
  21. if(true) {
  22.     let a = 1;
  23. }
  24. console.log(a);
  26. // es6，for循环
  27. for(let i = 0; i < 5; i++) {
  28.     ...
  29. }
  30. console.log(i);

2. 不能重复声明

  1. // es5, 可以重复声明
  2. var a = 1;
  3. var a = 2;
  4. console.log(a);
  6. // es6, 不可以重复声明
  7. let a = 1;
  8. let a = 2;
  9. console.log(a);

3. 不存在变量名声明提升

  1. // es5 变量名声明会提升
  2. console.log(a);
  3. var a = 1;
  5. // es6 变量名声明不会提升
  6. console.log(a);
  7. let a = 1;

4. 暂时性死区

  1. // es5
  2. var a = 1;
  3. function foo() {
  4.     console.log(a);
  6.     var a = 10;
  7. }
  9. // es6, 用let声明变量,会将变量绑定到当前块作用域, 不受外界影响
  10. var a = 1;
  11. function foo() {
  12.     console.log(a);
  14.     let a = 10;
  15. }

5.const的不同

除与let声明的变量都有以上特性外，用const声明的一定是一个只读的常量，他的值不能被更改。

  1. const值不能被改变
  2. const声明的变量必须初始化就赋值
  3. const声明的变量不能变，实质指的是他的地址不能变
  1. const a = 1;
  2. a = 2;
  3. console.log(a);
  5. const b = [1, 2, 3, 4];
  6. b.push(5);
  7. console.log(b);

小结

  1. 块级作用域，声明的变量只在let/const命令所在的代码块内有效。
  2. 不能重复声明
  3. 不存在变量名提升（了解）
  4. 暂时性死区，即声明的变量将绑定到当前块作用域, 不受外界影响

变量解构赋值

解构就是从数组或对象中提取值，并赋给相应变量。

1.基本用法

  1. // es5
  2. var fullName = ['zhang', 'san'];
  3. var lastName = fullName[0];
  4. var firstName = fullName[1];
  5. // es6解构赋值, 数组按位置解构
  6. let [lastName, firstName] = fullName;
  8. // 对象也一样解构，对象按key解构
  9. var fullName = { first: 'san', last: 'zhang' };
  10. let { first, last } = fullName;

2.默认值

  1. let { first = 'dada' } = {};
  2. console.log(first);

3.函数解构赋值

  1. function foo(a) {
  2.     let { first, last } = a;
  3.     console.log(first, last);
  4. };
  5. // 你可以这样做
  6. function foo({ first, last }) {
  7.     console.log(first, last);
  8. }

模板字符串

用反引号（`，在键盘1字键的左边）标识模板字符串

  1. // es5
  2. var count = 10;
  3. var html = '<div>' + count + '</div>';
  5. // 模板字符串
  6. const html = `<div>${count}</div>`;

函数

1.函数默认值

  1. // es5, 默认值，使用逻辑操作符||实现
  2. function foo(a) {
  3.     const aa = a || 'dada';
  4.     console.log(aa); // dada
  5. };
  7. // es6
  8. function foo(a = 'dada') {
  9.     console.log(a); // dada
  10. };

2.箭头函数

  1. const foo = () => {
  2.     return 'FOO';
  3. };
  4. // 等价于es5
  5. const foo = function () {
  6.     return 'FOO';
  7. };

  • 函数代码块只有一行，可省略return语句

    1. // es6
    2. const foo = () => 'FOO';
    3. // 注意, 对象需要用()括起来
    4. const foo = () => ({a: 1, b: 2});

  • 不能做构造函数，即不能用new调用

    1. // es6
    2. const foo = () => 'FOO';
    3. const f = new foo(); // error

展开运算符

用三个点…表示展开运算符

  1. // 将一个数组展开
  2. const a = [1, 2, 3];
  3. console.log(a); // [1, 2, 3]
  4. console.log(...a); // 1 2 3
  6. // 将一个对象展开, 其实这个是ES2017引入的，但比较常用
  7. const b = { first: 'san', last: 'zhang' };
  8. console.log(b); // {first: "san", last: "zhang"}
  9. const c = { ...b };
  10. console.log(c); // {first: "san", last: "zhang"}

1.通常用来新建对象或数组

  1. const b = { first: 'san', last: 'zhang' };
  2. const c1 = b;
  3. const c2 = { ...b };
  5. b === c1 // true
  6. b === c2 // flase
  8. const d = { first: 'si', ...b };
  9. console.log(d); // { first: 'si', last: 'zhang' };

2.合并对象

  1. const a = { aa: 1 };
  2. const b = { bb: 2 };
  4. // { aa: 1, bb: 2 }
  5. const ab = { ...a, ...b };

3.多说一句，对象简写

  1. // key和value一样的键值对，可以简写为key
  2. const a = { aa: 1 };
  3. const b = { bb: 2, a: a };
  4. // 等价于
  5. const b = { bb: 2, a };

Class

  1. // es5，实现class功能
  2. function Foo(x, y) {
  3.     this.x = x;
  4.     this.y = y;
  5. };
  7. var f = new Foo(1, 2);
  8. console.log(f.x, f.y); // 1 2
  10. // es6, class用法
  11. class Foo {
  12.     constructor(x, y) {
  13.         this.x = x;
  14.         this.y = y;
  15.     }
  16. };
  18. const f = new Foo(1, 2);
  19. console.log(f.x, f.y); // 1 2

1.支持继承

  1. class Animal {
  2.     constructor(name) {
  3.         this.name = name;
  4.     }
  6.     // 实例方法
  7.     printName() {
  8.         console.log(this.name);
  9.     }
  10. };
  12. class Dog extends Animal {
  13.     constructor(name) {
  14.         // 调用父级方法
  15.         super(name);
  16.     }
  17. };
  19. const d = new Dog('corgi');
  20. d.printName(); // corgi

2.支持对象属性和静态属性及方法

  1. class Car {
  2.     // 对象属性, react用的较多, 可以用babel-plugin-transform-class-properties
  3.     state = {
  4.         run: true,
  5.     }
  7.     // 静态属性, 也可说类属性
  8.     static propTypes = {
  9.         color: 'red',
  10.     }
  12.     // 静态方法
  13.     static go() {
  14.         console.log('go....');
  15.     }
  16. }
  18. const c = new Car();
  19. console.log(c.run); // true
  20. console.log(Car.propTypes); // { color: 'red' }
  21. console.log(Car.go()); // go....

Module语法

1.export导出多个变量

  1. // main.js 导出一个变量
  2. export const a = 1;
  3. export const b = () => 20;
  4. // 等价于
  5. export {
  6.   a,
  7.   b,
  8. }; 
  10. // index.js中使用main.js中的变量
  11. import { a, b } from './main.js';
  12. // 可以不解构, 引用整个模块
  13. import * as obj from './main.js';
  14. console.log(obj.a, obj.b);

2.export导出默认值

  1. import时可以取任意名字
  2. 不能通过解构引用通过export default导出的模块中的变量
  3. 一个文件中可以同时存在export和export default, 但不能同时存在多个export default;
  1. // main.js
  2. const obj = { a: 1, b: 2 };
  3. export const dada = 100;
  4. export default obj;
  6. // 1. 引用默认变量obj
  7. import obj from './main.js';
  8. console.log(obj); // { a: 1, b: 2 }
  10. // 2. 导出默认的变量，可以取任意名字
  11. import myobj from './main.js';
  13. // 3. 不能解构导出obj.a
  14. import { a } from './main.js';
  16. // 4. 一个文件中可以同时存在export和export default, 但不能同时存在多个export default;
  17. // main.js, 正确
  18. export const a = 1;
  19. export default { b: 1 };
  20. // main.js, 错误
  21. export default { a: 1 };
  22. export default { b: 2 }; // error

作业:

参考链接

  1. ECMAScript 6 入门
  2. MDN