��涓�宄扮����瀹�
http://es6.ruanyifeng.com/
涓� ES6绠�浠�
ECMAScript 6.0锛�浠ヤ�绠�绉� ES6锛��� JavaScript 璇�瑷���涓�涓�浠f����锛�宸茬���2015骞�6��姝e���甯�浜���
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��浠g����浣��ㄥ��
1.4 let 涓�瀛��ㄥ����������瀹�涔�
1.5 let�����舵�ф�诲��
1.6 const �抽��瀛���浣跨��
1.7 const瀹�涔�甯搁����浣跨��
1.8 const����璐�
const瀹���涓�淇�璇���锛�骞朵����������间�寰��瑰��锛����������������d釜��瀛��板��涓�寰��瑰�ㄣ��瀵逛�绠���绫诲�����版��锛��板�笺��瀛�绗�涓层��甯�灏��硷�锛��煎氨淇�瀛��ㄥ�����������d釜��瀛��板��锛���姝ょ����浜�甯搁����浣�瀵逛�澶���绫诲�����版��锛�涓昏���瀵硅薄���扮�锛�锛�������������瀛��板��锛�淇�瀛�������涓�涓�����锛�const���戒�璇�杩�涓��������哄����锛��充�瀹��������版��缁�����涓���������锛�灏卞���ㄤ��芥�у�朵�����姝わ�灏�涓�涓�瀵硅薄澹版��涓哄父��蹇�椤婚��甯稿�蹇���
2.0 ES6 澹版����������绉��规�
2.1 ES6 ��椤跺�瀵硅薄��灞���
娉ㄦ��let��const���� 涓�娣诲����window涓�
(浜�) ������瑙f��璧���
1.1 �扮���瑙f��
let [a,b] = [100,200];
1.2 瀵硅薄��瑙f��
娉ㄦ��: 瀵硅薄��瑙f��娌℃��椤哄�
let { bar, foo } = { foo: "aaa", bar: "bbb" };
1.3 �板�煎��甯�灏��肩��瑙f��璧���
1.4 �芥�板���扮��瑙f��璧��� (�芥�颁�璇存��)
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 ��浜�涓��逛慨�癸�瑙�瀹���瑕��芥�板���颁娇�ㄤ�榛�璁ゅ�笺��瑙f��璧��笺�������╁�杩�绠�绗�锛��d��芥�板���ㄥ氨涓��芥�惧�璁惧��涓轰弗�兼ā寮�锛�����浼��ラ����
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()
瑙e��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�ュ�c��
1.2 ��ES6涓�锛���涓�绫绘�版��缁��������峰�Iterator�ュ�o��扮�����浜�绫讳技�扮���瀵硅薄��Set��Map缁���
1.3 瀛�绗�涓�,绫绘�扮�瀵硅薄,set��map��Iterator�ュ�e������
(��) 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