es6璇�娉�

��涓�宄扮����瀹�

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

你可能感兴趣的:(es6璇�娉�)