[关闭]
@dudusky 2017-05-06T01:47:15.000000Z 字数 11404 阅读 2351

ECMAScript 6(ES6) 快速入门手册

  1. // 课堂笔记
  2. https://www.zybuluo.com/dudusky/note/708025
  4. // 课程资料
  5. git clone https://github.com/dudusky/ES6_tutorial_demo.git
  6. git clone https://github.com/dudusky/es6-tutorial.git

一. ECMAScript快速概览

ES6的背景和概念 , 以及亮点.

1. 背景介绍

2. ES6的优势

解决了哪些ES5没有解决的问题(面试问题)?

二. 如何开始使用ES6？

1. ES6的兼容和规范

2. ES6转码工具Babel使用方法

Babel是一个ES6转码器, 可以将ES6代码转换为ES5代码.

好处是可以使用ES6的语法, 而不用担心当前的环境是否完全支持ES6.

例如使用箭头函数, Babel可以将其转换为普通函数, 就能在不支持ES6的环境中执行了.

Babel在线转换http://babeljs.cn/repl/

In

  1. //ES6 arrow function 
  2. [1, 2, 3].map((n) => n + 1);

Out

  1. [1, 2, 3].map(function(n) {
  2.     return n + 1;
  3. });

1. 准备工作:

2. 安装babel-cli命令行工具

在node官网安装node.js, 然后就可以使用npm包管理工具来安装babel-cli命令行工具

  1.   # 在项目目录如d:\babel_test\下安装babel-cli
  2.   $ npm install --save-dev babel-cli
  4.   # 安装最新的转码规则
  5.   $ npm install --save-dev babel-preset-latest

3. 在项目目录下创建隐藏文件.babelrc文件和package.json文件(可选)

注意, 所有 Babel工具和模块的使用，都必须先写好.babelrc.

pakage.json配置内如下: 

  1. {
  2.   "devDependencies": {
  3.     "babel-cli": "^6.0.0"
  4.   },
  5.   "scripts": {
  6.     "build": "babel src -d lib"
  7.   },
  8. }

.babelrc配置内容如下:

  1.      {
  2.         "presets": [
  3.           "latest"
  4.         ],
  5.         "plugins": []
  6.       }

4. Babel-cli的基本使用方法:

  1. # es6.js为ES6代码 使用bable命令编译要转换的ES6代码
  2. $ babel es6.js
  4. # 使用-o指令 将转码结果写入到一个文件
  5. $ babel es6.js -o es5.js
  7. # 使用-d 将ES代码所在目录转码到另外一个目录
  8. $ babel src -d lib
  10. # 如果配置好package.json文件 可以使用以下快捷方式 等同于src -d lib
  11. $ npm run build

5. babel-polyfill 的使用

babel-plyfull可以转换babel不能转换的语法.
babel默认只转换JavaScript的语法, 而不转换新的 API, 比如Iterator, Set, Maps, Promise等全局对象.

3. 使用Webpack快速搭建可以使用ES6开发的项目http://webpackdoc.com/index.html

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

优势：

1. 安装 webpack

通过 npm 在全局环境下安装 webpack：
全局安装

  1. $ npm install webpack -g

建议在项目下安装一份局域的 webpack：

  1. $ npm install webpack --save-dev

2. 初始化项目

  1. // 创建一个 package.json文件，用于保存项目版本、依赖关系等
  2. $ npm init -y
  1. $ npm install webpack --save-dev
  1. <!DOCTYPE html>
  2.   <html lang="en">
  3.   <head>
  4.       <meta charset="UTF-8">
  5.       <title>webpack 教程</title>
  6.   </head>
  7.   <body>
  8.   <script src="./bundle.js"></script> <!-- 在 index.html 文件中添加这一行代码 -->
  9.   </body>
  10.   </html>

3. webpack 配置

  1. module.exports = {
  2.       entry: './main.js',
  3.       output: {
  4.           path: __dirname, // 输出文件的保存路径
  5.           filename: 'bundle.js' // 输出文件的名称
  6.       }
  7.   }

4. 实时刷新

  1. $ npm install jquery --save
  2. // 更多
  1.  import $ from 'jQuery'

// 使用babel 将ES6转成ES5
* 安装 babel-loader


$ npm install babel-loader babel-core babel-preset-es2015 --save-dev

在 module.exports 值中添加 module：

  1. module.exports = {
  2.   entry: {
  3.       app: ['./main.js']
  4.   },
  5.   output: {
  6.       filename: 'bundle.js'
  7.   },
  8.   module: {
  9.       loaders: [{
  10.           test: /\.js$/,
  11.           loaders: ['babel?presets[]=es2015'],
  12.           exclude: /node_modules/
  13.       }]
  14.   }
  15. }

7. 打包、构建

项目结束后，代码要压缩、混淆、合并等，只需要在命令行执行

*　安装 css-loader 和 style-loader
合并css文件

  1. // 安装在本地, 不要使用全局安装
  2. $ npm install css-loader style-loader
  1. // style.css
  2. body {
  3.   background: yellow;
  4. }
  1. // entry.js
  2. document.write("改变我的颜色看看!");
  1. // index.html
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.     </head>
  6.     <body>
  7.         <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  8.     </body>
  9. </html>
  1. $ Webpack ./entry.js bundle.js
  1. // content
  2. module.exports = "现在试试是我在工作吗?";
  1. $ Webpack ./entry.js bundle.js
  1. // entry.js
  2.   require("./style.css");
  3.   document.write(require("./content.js"));
  1. $ webpack ./entry.js bundle.js --module-bind 'css=style!css'

三. ES6实用新特性

ES6开发中最常用语法介绍和案例.

1. 块级作用域 let和const

let的特性
const的特性

2. 变量/参数的结构赋值

3. 字符串扩展方法

4. 数组扩展方法

Array.from()

用于将可遍历的对象转为真正的数组

5. Set和Map数据结构

Set

Set类似于数组, 区别是内部成员的值不能重复.

Set是一个构造函数,可以创建Set数据结构.

Set实例的操作数据的方法: add(value), delete(value)

Set实例的遍历方法之一: forEach() 使用回调函数遍历每个成员.

Map

Map类似于对象,是键值对的集合, 但是“键”的范围不限于字符串, 各种类型的值（包括对象）都可以当作键.

Map是一个构造函数,可以创建Map数据结构.

Map实例的操作数据的方法: add(value), delete(value), set(value), get(value)

Map实例的遍历方法之一: forEach()

6. Arrow function 箭头函数

  • 使用 “ 箭头 ”（=>）定义函数.
  • 箭头函数不绑定自己的this, arguments, super.
  • 箭头函数是匿名函数.
  • 不能用作构造函数.

7. Symbol

Symbol 是一种特殊的、不可变的数据类型，可以作为对象属性的标识符使用。
基本数据类型: Undefined、Null、Boolean、Number、String、Symbol.
好处是可以使用在对象属性名,不会被覆盖

  1. //作为属性名的Symbol
  2. var mySymbol = Symbol();
  4. // 第一种写法
  5. var a = {};
  6. a[mySymbol] = 'Hello!';
  8. // 第二种写法
  9. var a = {
  10.   [mySymbol]: 'Hello!'
  11. };
  13. // 第三种写法
  14. var a = {};
  15. Object.defineProperty(a, mySymbol, { value: 'Hello!' });
  17. // 以上写法都得到同样结果
  18. a[mySymbol] // "Hello!"

8. Promise对象

  • Promise是一个对象，用来传递异步操作的消息
  • 异步操作的三种状态：
    Pending（进行中）
    Resolved（已完成）
    Rejected（已失败）
  • 同步/异步操作: 案例说明
  • 应用场景: Ajax
  1. //应用场景： 回调函数嵌套“金字塔问题”
  2. step1(function (value1) {
  3.     step2(value1, function(value2) {
  4.         step3(value2, function(value3) {
  5.             step4(value3, function(value4) {
  6.                 // Do something with value4
  7.             });
  8.         });
  9.     });
  10. });
  12. //使用promise
  13. Q.fcall(promisedStep1)
  14. .then(promisedStep2)
  15. .then(promisedStep3)
  16. .then(promisedStep4)
  17. .then(function (value4) {
  18.     // Do something with value4
  19. })
  20. .catch(function (error) {
  21.     // Handle any error from all above steps
  22. })
  23. .done();

9. 对象继承Class和 extends

通过class关键字, 可以定义类, 实现类的继承。

10. Module模块

  • 模块功能主要由两个命令构成：export和import。
  • export命令用于规定模块的对外接口。
  • import命令用于输入其他模块提供的功能。
  1. // profile.js
  3. // export关键词可以使外部读取内部的变量
  4. export var firstName = 'Michael';
  5. export var lastName = 'Jackson';
  6. export var year = 1958;
  8. //另一种写法
  9. var firstName = 'Michael';
  10. var lastName = 'Jackson';
  11. var year = 1958;
  13. export {firstName, lastName, year};
  1. // main.js
  3. // import命令可以加载export命令定义的对外接口
  4. import {firstName, lastName, year} from './profile';
  6. function setName(element) {
  7.   element.textContent = firstName + ' ' + lastName;
  8. }

输出一个匿名函数

  1. // export-default.js
  2. export default function () {
  3.   console.log('foo');
  4. }

使用import为该匿名函数命名

  1. // import-default.js
  2. import customName from './export-default';
  3. customName(); // 'foo'

四. ES6经典面试题分析

目前各大公司关于ES6相关面试题案例分析.

选择题

  1. let name = 'zach'
  2. while (true) {
  3.     let name = 'obama'
  4.     console.log(name)
  5.     break
  6. }
  7. console.log(name)

a. zach zach

b. obama obama

c. zach obama

d. obama zach

  1. var a = [];
  2. for (let i = 0; i < 10; i++) {
  3.   a[i] = function () {
  4.     console.log(i);
  5.   };
  6. }
  7. a[6]();

a. 10

b. 1

c. 6

d. 0

填空题(5)

编程题(2)

  1. 11
  2. 11

五. 参考资源

1. 严格模式'use strict';

2. ES6新特性在Babel下的兼容性列表

ES6特性 兼容性
箭头函数 支持
类的声明和继承 部分支持，IE8不支持
增强的对象字面量 支持
字符串模板 支持
解构 支持，但注意使用方式
参数默认值，不定参数，拓展参数 支持
let与const 支持
for of IE不支持
iterator, generator 不支持
模块 module、Proxies、Symbol 不支持
Map，Set 和 WeakMap，WeakSet 不支持
Promises、Math，Number，String，Object 的新API 不支持
export & import 支持
生成器函数 不支持
数组拷贝 支持

3. ES6资源

文档

工具推荐:

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注