阮一峰的博客
http://es6.ruanyifeng.com/
一 ES6简介
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。
2011年，ECMAScript 5.1版发布后，就开始制定6.0版了。
因此，ES6 这个词的原意，
就是指 JavaScript 语言的下一个版本。
二 检查浏览器是否支持ES6的方法
http://ruanyf.github.io/es-checker
三 语法介绍
(一) let和const的使用
1.1 let 关键字的使用
1.2 let和 var的区别案例
1.3 ES6的代码块作用域
1.4 let 不存在变量的提升定义
1.5 let的暂时性死区
1.6 const 关键字的使用
1.7 const定义常量的使用
1.8 const的本质
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。
2.0 ES6 声明变量的六种方法
2.1 ES6 的顶层对象的属性
注意let和const变量 不添加到window中
(二) 变量的解构赋值
1.1 数组的解构
let [a,b] = [100,200];
1.2 对象的解构
注意: 对象的解构没有顺序
let { bar, foo } = { foo: "aaa", bar: "bbb" };
1.3 数值和布尔值的解构赋值
1.4 函数参数的解构赋值 (函数会说明)
1.5 圆括号问题
(三) 字符串扩展
1.1 字符的 Unicode 表示法
百度搜索:汉字字符编码
http://www.mytju.com/classCode/tools/encode_gb2312.asp
http://tool.chinaz.com/Tools/Unicode.aspx
1.2 codePointAt()
1.3 String.fromCodePoint()
1.4 字符串的遍历器接口
for...of的使用 和for...in的区别
1.5 charAt方法 ES5新增的方法
1.6 includes(), startsWith(), endsWith()
1.7 repeat()
1.8 模板字符串(重点)
// ES6字符串教程中
// 有箭头函数的写法和...参数的写法
1.8.1 字符串模板的来源是使用+的不方便
'name'+name+"age is"+age
1.8.2 字符串的插值采用${name}的方式实现
1.8.3 标签模板 tagged template
function tag(stringArr, value1, value2){
// ...
}
// 等同于
function tag(stringArr, ...values){
// ...
}
(四) 函数的扩展
1.1 函数参数的默认值
ES6新添加的函数默认值
1.2 rest参数
ES6 引入 rest 参数（形式为"...变量名"），用于获取函数的多余参数，这样就不需要使用arguments对象了
1.3 扩展运算符
可以看做前面的rest参数的逆运算
扩展运算符（spread）是三个点（...）
将一个数组转为用逗号分隔的参数序列。
注意：三个点（...）用在不同的地方表示的意义不一样
1.4 严格模式
1.4.1 从 ES5 开始，函数内部可以设定为严格模式。
1.4.3 ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。
1.5 name 属性
1.6 箭头函数
1.7 绑定 this
(五) 数值Number的扩展
1.1 二进制和八进制表示法
1.2 Number.isFinite(), Number.isNaN()
1.3 Number.parseInt(), Number.parseFloat()
1.4 Number.isInteger()
四 Babel介绍使用
1.1 后缀名称为.babelrc文件
添加：
{
"presets": ["env"]
}
1.2 安装babel的包文件
npm install --save-dev babel-cli babel-preset-env
1.2 运行测试文件01example.js
1.3 babel测试文件
babel 01example.js
1.4 babel -d 测试输出文件
babel 01example.js --out-file 01result.js
或者
babel 01example.js -o 01result.js
1.5 babel 的配置环境介绍
https://excaliburhan.com/post/babel-preset-and-plugins.html
二 数值Number的扩展
1.1 二进制和八进制表示法
1.2 Number.parseInt(), Number.parseFloat()
1.3 Number.isInteger()
三 ES6的语法续
(一) 数组的扩展
1.1 Array.from()
将类数组对象 转换为数组对象
1.2 Array.of()
解决new Array(3)
第一个参数是数组的长度还是数组的元素问题
弥补数组构造函数Array()的不足
1.3 数组实例的find()和findIndex()
find方法用于找出第一个符合条件的数组成员
数组实例的findIndex方法的用法与find方法非常类似，
返回第一个符合条件的数组成员的位置，
如果所有成员都不符合条件，则返回-1。
1.4 数组实例的fill()
fill方法使用给定值，填充一个数组。
用于数组的初始化操作
1.5 数组实例的 entries()，keys()和values()
ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组
注意:values方法暂时有些浏览器不支持 但是转码是支持的
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
1.6 数组实例的 includes()
Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似
该方法属于ES7，但Babel转码器已经支持。
(二) 对象的扩展
1.1 属性的简洁表示法
1.1.1 {x:x,y:y} 简写为:{x,y}
1.1.2 方法名的简写
var obj = {
showName(){
console.log("html5");
}
}
1.2 属性名表达式
let propKey = 'foo';
let obj = {
[propKey]: true,
['a' + 'bc']: 123
};
1.3 Object.is()
判断传入的参数是否是相等的 类似===的操作
1.4 Object.assign()
将source对象的可枚举属性赋值到target对象上。
注意：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
1.6 属性的遍历
1.6.1 for...in
1.6.2 Object.keys(obj)
1.6.3 Object.values(obj) 暂时不支持 需要转码
1.7 __proto__属性和
Object.setPrototypeOf()，Object.getPrototypeOf()
(三) Map和Set集合
1.1 Set
Set 基本的数学集合 不允许有重复的对象
size属性 Set的集合个数
has方法 判断是否存在对象
add添加数据
delete方法删除数据
使用forEach方法和for...of方法实现
clear方法清除set集合
1.2 Map
JavaScript 的对象（Object）本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制, Map可以使用任意的对象或值做键
set方法设置属性和值
get方法获取属性和值
delete方法删除对应的键属性
(四) Symbol的基本使用
http://www.cnblogs.com/sker/p/5474591.html
1.1 概述
1.2 作为属性名的Symbol
表示独一无二的ID。它通过Symbol函数生成。
(五) Iterator和for...of循环
1.1 Iterator的概念
当对象需要遍历的时候就需要调用某种方法将对象显示出来
当使用for...of循环遍历某种数据结构时，
该循环会自动去寻找Iterator接口。
1.2 在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构
1.3 字符串,类数组对象,set和map的Iterator接口和遍历
(六) Promise的使用 (异步编程 什么是异步)
1.1 Promise 的含义和基本用法
1.2 Promise.prototype.then()
1.3 Promise.prototype.catch()
1.4 Promise.all()
1.5 Promise.race()
1.6 Promise.resolve()
1.7 Promise.reject()
Promise的说明使用
http://www.tuicool.com/articles/RzQRV3
(七) Class
1.1 类的定义
1.2 类的继承
1.3 类的get和set函数
(八) Module 必须要采用简单的jspm的模块进行开发测试
1.1 Module的导入import
import {nam1,name2} from '文件路径';
import { name as n } from '路径';
import * as 变量名 from '路径';
1.2 Module的到导出export
另一种定义匿名函数的方式导出
export default
输出匿名函数
语法：
export default function(){};
在输入的时候可以使用任何名字指向该匿名函数
例如：
import name from '路径'；
注意：name不需要{}包含起来
1.3 模块的继承 模块的整体输出
export * from '模块路径';
输出模块中所有方法和属性
export { a as b} from '模块路径';
将模块中的a变量转为b输出
(九) Babel介绍使用
安装Node.js
Node.js的项目 npm 的包项目
新建文件夹test
在改文件夹下面输入npm init 初始化项目
先全局安装
npm install -g babel-cli
安装成功 输入babel -V 查看版本号
1.1 后缀名称为.babelrc文件
添加：
{
"presets": ["env"]
}
1.2 安装babel的包文件
npm install --save-dev babel-cli babel-preset-env
--save-dev 保存到package.json文件中
babel-cli 包工具
babel-preset-env 包工具
npm install --save-dev babel-cli babel-preset-env
1.2 运行测试文件01example.js
1.3 babel测试文件
babel 01example.js
1.4 babel -d 测试输出文件
babel 01example.js --out-file 01result.js
或者
babel 01example.js -o 01result.js
1.4.1 babel-node 01.js 运行输出结果
1.5 babel 的配置环境介绍
https://excaliburhan.com/post/babel-preset-and-plugins.html
本地的服务器开发方式:
browser-sync start --server
要安装webpack 实现浏览器支持ES6的语法
1. 安装webpack
npm install -g webpack;
2. 新建后缀名称为.babelrc文件
添加：
{
"presets": ["env"]
}
3. npm install --save-dev babel-loader babel-core
3. npm install --save-dev babel-preset-env
4. 新建webpack.config.js文件
(十二) 复习 ES6
http://www.jianshu.com/p/ebfeb687eb70
扩展: 数组的推导(不需要掌握) 仅仅FireFox实现了 建议不要使用
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Array_comprehensions
网友评论