\u4ee5\u4e0b\u662fES6\u6392\u540d\u524d\u5341\u7684\u6700\u4f73\u7279\u6027\u5217\u8868\uff08\u6392\u540d\u4e0d\u5206\u5148\u540e\uff09\uff1a<\/p>\n
\u3010\u5907\u6ce8 \u3011\u8fd9\u91cc\u53ea\u5217\u51fa\u4e8610\u6761\u6bd4\u8f83\u5e38\u7528\u7684\u7279\u6027\u3002\u5e76\u4e0d\u662f\u6240\u6709\u7684\u6d4f\u89c8\u5668\u90fd\u652f\u6301ES6\u6a21\u5757\uff0c\u6240\u4ee5\u4f60\u9700\u8981\u4f7f\u7528\u4e00\u4e9b\u50cfjspm\u53bb\u652f\u6301ES6\u6a21\u5757\u3002<\/p>\n
ES5\uff1a<\/p>\n
var link = function<\/span> (height, color, url) { \r\n var height = height || 50<\/span>; \r\n var color = color || 'red'<\/span>; \r\n var url = url || 'http:\/\/azat.co'<\/span>; \r\n ...<\/span> \r\n} <\/code><\/pre>\nES6\uff1a\u76f4\u63a5\u5199\u5728\u53c2\u6570\u91cc<\/p>\n
var link = function<\/span>(height = 50<\/span>, color = 'red'<\/span>, url = 'http:\/\/azat.co'<\/span>) { \r\n ...<\/span> \r\n}<\/code><\/pre>\n\u597d\u5904<\/code> \u8282\u7701\u4e86\u4ee3\u7801\u91cf\u3002<\/p>\n<\/a>2.Template Literals\uff08\u6a21\u677f\u5bf9\u8c61\uff09<\/h2>\n\u5728\u5b57\u7b26\u4e32\u91cc\u9762\u8f93\u51fa\u53d8\u91cf<\/p>\n
ES5\uff1a<\/p>\n
var<\/span> name = 'Your name is '<\/span> + first + ' '<\/span> + last + '.'<\/span>; \r\nvar<\/span> url = 'http:\/\/localhost:3000\/api\/messages\/'<\/span> + id; <\/code><\/pre>\nES6\uff1a\uff0c\u4f7f\u7528\u65b0\u7684\u8bed\u6cd5 $ {NAME}<\/code>\uff0c\u5e76\u628a\u5b83\u653e\u5728\u53cd\u5f15\u53f7\u91cc\uff1a<\/p>\nvar<\/span> name = 'Your name is ${first}<\/span> ${last}<\/span>.'<\/span>;\r\nvar<\/span> url = 'http:\/\/loalhost:3000\/api\/messages\/${id}<\/span>'<\/span>;<\/code><\/pre>\n\u597d\u5904<\/code>\uff1a \u8fd9\u91cc\u7684$ {NAME}\u76f4\u63a5\u5f53\u505a\u5b57\u7b26\u4e32\u7528\uff0c\u65e0\u9700\u5199\u52a0\u53f7<\/p>\n<\/a>3.Multi-line Strings \uff08\u591a\u884c\u5b57\u7b26\u4e32\uff09<\/h2>\nES5:<\/p>\n
var roadPoem = 'Then took the<\/span> other, as<\/span> just as<\/span> fair,nt' \r\n + 'And having perhaps the<\/span> better claimnt' \r\n + 'Because it<\/span> was grassy and<\/span> wanted wear,nt' \r\n + 'Though as<\/span> for<\/span> that<\/span> the<\/span> passing therent' \r\n + 'Had worn them really about<\/span> the<\/span> same,nt'; \r\nvar fourAgreements = 'You have the<\/span> right to<\/span> be you.n \r\n You can only be you when you do your best.'; <\/code><\/pre>\nES6: \u53cd\u5f15\u53f7\u5c31\u53ef\u4ee5\u5566\uff01<\/p>\n
var roadPoem = `Then took the<\/span> other, as<\/span> just as<\/span> fair, \r\n And having perhaps the<\/span> better claim \r\n Because it<\/span> was grassy and<\/span> wanted wear \r\n Though as<\/span> for<\/span> that the<\/span> passing theren \r\n Had worn them really about the<\/span> same,`; \r\nvar fourAgreements = `You have the<\/span> right<\/span> to<\/span> be you.n \r\n You can only be you when you do<\/span> your best.`; <\/code><\/pre>\n\u597d\u5904<\/code>\uff1a\u76f4\u63a5\u4e00\u4e2a\u53cd\u5f15\u53f7\uff0c\u5c06\u6240\u6709\u7684\u5b57\u7b26\u4e32\u653e\u8fdb\u53bb\u5373\u53ef\uff0c\u4e2d\u4ecb\u968f\u610f\u6362\u884c\uff0c\u597d\u6e05\u723d\uff01<\/p>\n<\/a>4.Destructuring Assignment \uff08\u89e3\u6784\u8d4b\u503c\uff09<\/h2>\n\u4e0b\u8fb9\u4f8b\u5b50\u4e2d\uff0chouse \u548c mouse\u662f key\uff0c\u540c\u65f6 house \u548c mouse \u4e5f\u662f\u4e00\u4e2a\u53d8\u91cf\u3002<\/p>\n
ES5\uff1a<\/p>\n
var<\/span> data<\/span> = $('body'<\/span>)<\/span>.data<\/span>()<\/span>, \/\/ data<\/span> has properties house and mouse <\/span>\r\n house = data<\/span>.house, <\/span>\r\n mouse = data<\/span>.mouse; <\/span><\/code><\/pre>\n\u4ee5\u53ca\u5728Node.js\u4e2d\u7528ES5\u662f\u8fd9\u6837\uff1a<\/p>\n
var jsonMiddleware = require('body<\/span>-parser').jsonMiddleware ; \r\nvar body<\/span> = req.body<\/span>, \/\/ body<\/span> has username and<\/span> password \r\nusername = body<\/span>.username, \r\npassword = body<\/span>.password; <\/code><\/pre>\nES6\uff1a<\/p>\n
var<\/span> {house,mouse} = $('body'<\/span>).data(); \/\/we'll get house and mouse variables <\/span>\r\nvar<\/span> {jsonMiddleware} = require<\/span>('body-parser'<\/span>);\r\nvar<\/span> {username,password} = req.body;<\/code><\/pre>\n\u5728\u6570\u7ec4\u4e2d\u662f\u8fd9\u6837\u7684\uff1a<\/p>\n
var [col1,col2] = $('.column'),\r\n [line1,line2,line3, ,line5] = file.split('n');<\/span><\/code><\/pre>\n\u597d\u5904<\/code>\uff1a\u4f7f\u7528{}\u7701\u53bb\u4e86\u5199\u5bf9\u8c61\u7684\u5c5e\u6027\u7684\u6b65\u9aa4\uff0c\u5f53\u7136\u8fd9\u4e2a{}\u4e2d\u7684\u53d8\u91cf\u662f\u4e0e\u5bf9\u8c61\u7684\u5c5e\u6027\u540d\u5b57\u4fdd\u6301\u4e00\u81f4\u7684\u60c5\u51b5\u4e0b\u3002<\/p>\n<\/a>5.Enhanced Object Literals \uff08\u589e\u5f3a\u7684\u5bf9\u8c61\u5b57\u9762\u91cf\uff09<\/h2>\n\u4f7f\u7528\u5bf9\u8c61\u6587\u672c\u53ef\u4ee5\u505a\u8bb8\u591a\u8ba9\u4eba\u610f\u60f3\u4e0d\u5230\u7684\u4e8b\u60c5\uff01\u901a\u8fc7ES6\uff0c\u6211\u4eec\u53ef\u4ee5\u628aES5\u4e2d\u7684JSON\u53d8\u5f97\u66f4\u52a0\u63a5\u8fd1\u4e8e\u4e00\u4e2a\u7c7b\u3002<\/p>\n
\u4e0b\u9762\u662f\u4e00\u4e2a\u5178\u578bES5\u5bf9\u8c61\u6587\u672c\uff0c\u91cc\u9762\u6709\u4e00\u4e9b\u65b9\u6cd5\u548c\u5c5e\u6027\uff1a\r\n\r\nvar<\/span> serviceBase = {port: 3000<\/span>, url: 'azat.co'<\/span>}, \r\n getAccounts = function<\/span>()<\/span>{<\/span>return<\/span> [1<\/span>,2<\/span>,3<\/span>]}; \r\nvar<\/span> accountServiceES5 = { \r\n port: serviceBase.port, \r\n url: serviceBase.url, \r\n getAccounts: getAccounts, \r\n toString: function<\/span>()<\/span> {<\/span> \r\n return<\/span> JSON<\/span>.stringify(this<\/span>.valueOf()); \r\n }, \r\n getUrl: function<\/span>()<\/span> {<\/span>return<\/span> \"http:\/\/\"<\/span> + this<\/span>.url + ':'<\/span> + this<\/span>.port}, \r\n valueOf_1_2_3: getAccounts() \r\n} <\/code><\/pre>\n\u5982\u679c\u6211\u4eec\u60f3\u8ba9\u5b83\u66f4\u6709\u610f\u601d\uff0c\u6211\u4eec\u53ef\u4ee5\u7528Object<\/span>.create\u4eceserviceBase\u7ee7\u627f\u539f\u578b\u7684\u65b9\u6cd5\uff1a\r\n\r\nvar<\/span> accountServiceES5ObjectCreate = Object<\/span>.create(serviceBase) \r\n\/\/ Object.create() \u65b9\u6cd5\u521b\u5efa\u4e00\u4e2a\u62e5\u6709\u6307\u5b9a\u539f\u578b\u548c\u82e5\u5e72\u4e2a\u6307\u5b9a\u5c5e\u6027\u7684\u5bf9\u8c61\u3002<\/span>\r\nvar<\/span> accountServiceES5ObjectCreate = { \r\n getAccounts: getAccounts, \r\n toString: function<\/span>()<\/span> {<\/span> \r\n return<\/span> JSON<\/span>.stringify(this<\/span>.valueOf()); \r\n }, \r\n getUrl: function<\/span>()<\/span> {<\/span>return<\/span> \"http:\/\/\"<\/span> + this<\/span>.url + ':'<\/span> + this<\/span>.port}, \r\n valueOf_1_2_3: getAccounts() \r\n} <\/code><\/pre>\nES6\u7684\u5bf9\u8c61\u6587\u672c\u4e2d\uff1a\u65e2\u53ef\u4ee5\u76f4\u63a5\u5206\u914dgetAccounts: getAccounts,\u4e5f\u53ef\u4ee5\u53ea\u9700\u7528\u4e00\u4e2agetAccounts<\/p>\n
var<\/span> serviceBase = {port: 3000<\/span>, url: 'azat.co'<\/span>},\r\ngetAccount = function<\/span>()<\/span>{<\/span>return<\/span> [1<\/span>,2<\/span>,3<\/span>]};\r\nvar<\/span> accountService = {\r\n __proto__: serviceBase, \/\/\u901a\u8fc7proto\u8bbe\u7f6e\u5c5e\u6027<\/span>\r\n getAccount, \/\/ \u65e2\u53ef\u4ee5\u76f4\u63a5\u5206\u914dgetAccounts: getAccounts,\u4e5f\u53ef\u4ee5\u53ea\u9700\u7528\u4e00\u4e2agetAccounts<\/span>\r\n toString() { \/\/\u8fd9\u91cc\u5c06json\u5f62\u5f0f\u6539\u4e3a\u51fd\u6570\u5f62\u5f0f <\/span>\r\n return<\/span> JSON<\/span>.stringify(super.valueOf()); \r\n \/\/\u8c03\u7528super\u9632\u8303<\/span>\r\n }, \r\n getUrl() {return<\/span> \"http:\/\/\"<\/span> + this<\/span>.url + ':'<\/span> + this<\/span>.port}, \r\n [ 'valueOf_'<\/span> + getAccounts().join('_'<\/span>) ]: getAccounts() \/\/\u4f7f\u7528\u52a8\u6001key\u503c(valueOf_1_2_3)\u6b64\u5904\u5c06getAccounts()\u65b9\u6cd5\u5f97\u5230\u7684\u6570\u7ec4[1,2,3]\u8f6c\u5316\u4e3a\u5b57\u7b26\u4e321_2_3<\/span>\r\n};\r\nconsole.log(accountService);<\/code><\/pre>\n\u597d\u5904<\/code>\uff1a\u76f8\u5f53\u4e8e\u76f4\u63a5\u5c06\u7ed3\u679c\u5199\u8fdb\u53bb\uff0c\u800c\u4e0d\u518d\u5fc5\u987b key\uff1avalue<\/p>\n\n- \u5c06toString: function(){}\u8fd9\u79cdjson\u5f62\u5f0f\u8f6c\u53d8\u4e3a toString() {}\u8fd9\u6837\u7684\u51fd\u6570(\u7c7b)\u7684\u5f62\u5f0f<\/li>\n
- \u65e2\u53ef\u4ee5\u76f4\u63a5\u5206\u914dgetAccounts: getAccounts\u8fd9\u6837\u7684json\u5f62\u5f0f\uff0c\u4e5f\u53ef\u4ee5\u53ea\u9700\u7528\u4e00\u4e2agetAccounts\u8868\u8fbe\u76f8\u540c\u7684\u610f\u601d<\/li>\n<\/ul>\n
<\/a>\u30006.Arrow Functions in\uff08\u7bad\u5934\u51fd\u6570\uff09<\/h2>\n\u8fd9\u4e9b\u4e30\u5bcc\u7684\u7bad\u5934\u662f\u4ee4\u4eba\u60ca\u8bb6\u7684\u56e0\u4e3a\u5b83\u4eec\u5c06\u4f7f\u8bb8\u591a\u64cd\u4f5c\u53d8\u6210\u73b0\u5b9e\uff0c\u6bd4\u5982\uff0c
\n\u4ee5\u524d\u6211\u4eec\u4f7f\u7528\u95ed\u5305\uff0cthis\u603b\u662f\u9884\u671f\u4e4b\u5916\u5730\u4ea7\u751f\u6539\u53d8\uff0c\u800c\u7bad\u5934\u51fd\u6570\u7684\u8ff7\u4eba\u4e4b\u5904\u5728\u4e8e\uff0c\u73b0\u5728\u4f60\u7684this\u53ef\u4ee5\u6309\u7167\u4f60\u7684\u9884\u671f\u4f7f\u7528\u4e86\uff0c\u8eab\u5904\u7bad\u5934\u51fd\u6570\u91cc\u9762\uff0cthis\u8fd8\u662f\u539f\u6765\u7684this\u3002<\/p>\n
ES5:<\/p>\n
var<\/span> _this = this<\/span>; \r\n$('.btn'<\/span>).click(function<\/span>(event)<\/span>{<\/span> \r\n _this.sendData(); \r\n}) <\/code><\/pre>\nES6: \u5c31\u4e0d\u9700\u8981\u7528 _this = this\uff1a<\/p>\n
$('.btn'<\/span>)<\/span>.click<\/span>((event) =>{ \r\n this<\/span>.sendData(); \r\n})<\/span> <\/span><\/code><\/pre>\n\u518d\u6bd4\u5982\uff1a<\/p>\n
ES5:<\/p>\n
var<\/span> logUpperCase =<\/span> function() { \r\n var<\/span> _this =<\/span> this; \/\/this = Object {string: \"ES6 ROCKS\"}<\/span>\r\n console.<\/span>log<\/span>('this\u6307\u7684\u662f'<\/span>,this); \/\/Object {string: \"ES6 ROCKS\"}<\/span>\r\n console.<\/span>log<\/span>('_this\u6307\u7684\u662f'<\/span>,_this);\/\/Object {string: \"ES6 ROCKS\"}<\/span>\r\n this.<\/span>string<\/span> =<\/span> this.<\/span>string<\/span>.<\/span>toUpperCase(); \r\n console.<\/span>log<\/span>(_this.<\/span>string<\/span>); \/\/ES6 ROCKS <\/span>\r\n console.<\/span>log<\/span>(this.<\/span>string<\/span>); \/\/ES6 ROCKS<\/span>\r\n return<\/span> function () { \r\n return<\/span> console.<\/span>log<\/span>(_this.<\/span>string<\/span>);