JS 的奇幻旅程 JS 版本? 差在哪

# JS 的奇幻旅程 ## JS 有分版本? 差在哪 [TOC] ---- Made by FanRende (030Mortal#5525) <img src="https://i.imgur.com/jzeVEIi.png" width="50%"> --- ## What is ECMAScript Javascript 出世後由於瀏覽器的百花爭鳴因此 NetScape 將 JS 送到 ECMA 制定標準規範 ---- ### 版本 Original JavaScript -> ES1 ES2 ES3 (1997-1999) ~~Dead ES4 (2008)~~ The First Main Revision ES5 (2009) The Second Revision ES6 (2015) All Yearly Additions (2016, 2017, 2018, 2019, 2020) --- ## ES5 ### Strict mode At JS file begining or begining of a local scope ```javascript "use strict"; // or function funA() { "use strict"; } ``` This will cause an error when a variable not declared been used ---- ### **Declarative and Imperative** - Declarative - HOW to do something ```javascript= var array = [3,2,1]; var total = 0; for( var i = 0 ; i <= array.length ; i ++ ){ total += array[i]; } ``` - Imperative - WHAT will happen ```javascript= var array = [3,2,1]; array.reduce( function( previous, current ){ return previous + current; }) ``` ---- ```javascript Array.forEach(function(element) {}) Array.map(function(element) {}) Array.filter(function(element) {}) Array.reduce(function(accumulator, currentValue) {}) Array.indexOf(element) ... ``` --- ## ES6 ### const & let ### Template Literals - ES5: ```javascript var str = 'Hello' + name + "！"; ``` - ES6: ```tscript const str = 'Hello ${name}！'; ``` ---- ### Destructuring Assignment - 解構賦值 ```javascript= const arr = [1, 2, 3]; const obj = {d: 1, e: 2, f: 3}; const [a, b, c] = arr; // a = arr[0], b = arr[1], c = arr[2] const {d, e, f} = obj; // d = obj.d, e = obj.e, f = obj.f ``` ### Classes ---- ### Modules - export ```javascript // moduleTest.js const numA = 19954465; const funcB = function() { alert("funcB"); } export default {numA, funcB}; // vs export {numA, funcB}; ``` - import ```javascript import feature from moduleTest; console.log(feature.numA); // vs import {numA, funcB} from moduleTest; console.log(numA); ``` ---- ### **Arrow Functions** ```javascript= const arr = [1, 2, 3]; const mapArr = arr.map(element => element * 2); ``` ```javascript= const arr = [1, 2, 3]; const mapArr = arr.map((element) => { element *= 2; console.log(element); return element; }); ``` ---- ### **Promise** - 範例 ```javascript= const longTimePromise = new Promise((resolve, reject) => { const num = Math.random(); if(num > 0.5) setTimeout(resolve(num), 3000); else reject("Not a good number"); }); console.log("waiting"); longTimePromise.then(goodNum => { console.log(goodNum); }).catch(error => { console.log(error); }); ``` ---- ```javascript= function importFile() { let files = document.getElementById('import').files; if (files.length === 0) { return false; } let promiseArr = [...files].map(file => readFile(file)); Promise.all(promiseArr) .then(values => { console.log(values); }); } ``` ```javascript= function readFile(file) { return new Promise((resolve, reject) => { let reader = new FileReader(); reader.onload = () => { resolve(JSON.parse(reader.result)); }; reader.onerror = reject; return reader.readAsText(file); }); } ``` --- ## ECMA 的制定流程 - Strawman - 想法 - Proposal - 提案（目的、解決方法） - Draft - 草案（根據提案撰寫 Spec） - Candidate - 撰寫規格（撰寫並確認 Spec，希望瀏覽器實作） - Finished - 審核完畢（規格確認完畢、有兩個以上的實作） - on Github - [ECMAScript](https://github.com/tc39/ecma262) - [ECMAScript proposals](https://github.com/tc39/proposals)