EcmaScript基礎 · JS與WEB前端框架技術

詳細的教程請閱讀：http://es6.ruanyifeng.com/ 前期基礎：Javascript、 HTML、CSS Ecma Script 6基礎 === > ECMAScript 6(標準官方名稱是 ECMAScript 2015) 是 ECMAScript 的下一代標準。 [TOC] 詳細的教程請閱讀：http://es6.ruanyifeng.com/ 前期基礎：Javascript、 HTML、CSS # 變量聲明const和let 盡管關于let,const,var的特殊用法有很多，但是我們只關注基本部分。在ES6以前，var關鍵字聲明變量。無論聲明在何處，都會被視為聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)。這就是函數變量提升。例如: ```js function fn() { if(bool) { var name = 'Jack' } else { console.log(name) } } ``` 以上的代碼實際上是： ```javascript function fn() { var name // 變量提升 if(bool) { name = 'Jack' } else { //此處訪問name 值為undefined console.log(name) } //此處訪問name 值為undefined } ``` 所以不用關心bool是否為true or false。實際上，無論如何name都會被創建聲明。這種語法規則會帶來很多的歧義。 ES6中，我們通常用let和const來聲明，let表示變量、const表示常量。let和const都是塊級作用域。通俗的講，{}大括號內的代碼塊即為let 和 const的作用域。 let的作用域是在它所在當前代碼塊，但不會被提升到當前函數的最頂部。 ```javascript function fn() { if(bool) { //let的作用域，限定在這個語句塊中 let name = 'Jack' } else { //超越了name的定義域 //name 在此處訪問不到 console.log(name) } } ``` const定義常量，顧名思義，就是不能改變的量，對常量修改會報錯。程序中不需要修改的值，或者不允許修改的值盡可能定義為常量，這樣可以減少程序語義上的錯誤。例如： ```javascript const name = 'Jack' name = 'Tom' //再次賦值此時會報錯 ``` # 模板字符串模板字符串可以用于基本的字符串格式化，將表達式嵌入字符串中進行拼接。ES6反引號(``)直接搞定,模板字符串用${}來界定變量。 ```javascript const name = 'Jack' let message=`Hello, ${name}.`; console.log(message);//輸出：Hello, Jack. ``` # 默認參數和箭頭函數 ES6為參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。箭頭函數最直觀的三個特點。 1. 不需要function關鍵字來創建函數 2. 省略return關鍵字 3. 繼承當前上下文的 this 關鍵字 ```javascript //例如： [1,2,3].map( x => x + 1 ) //等同于： [1,2,3].map((function(x){ return x + 1 }).bind(this)) ``` 當你的函數有且僅有一個參數的時候，是可以省略掉括號的。當你函數返回有且僅有一個表達式的時候可以省略{}； ```javascript var fn=name=>{ //這里的name是函數fn的參數，不過我們不建議這樣簡寫，不容易讀懂代碼 } //等價的寫法 var fn=(name)=>{ //... } //對于多個參數，必須要加上括號，如果缺少()或者{}就會報錯 const people = (name, age=22) => { let message=`name:${name},age:${age}`; return message; } function people(name,age=22){ let message=`name:${name},age:${age}`; return message; } const people = function(name, age=22){ let message=`name:${name},age:${age}`; return message; } let tom=people('Tom'); //這里年齡使用默認的參數值22 //返回：name:Tom,age:22 let jack=people('Jack',18); //返回：name:Jack,age:18 ``` # for...of語句 for...of語句在可迭代對象(包括 Array, Map, Set, String, TypedArray，arguments 對象等等)上創建一個迭代循環，對每個不同屬性的屬性值,調用一個自定義的有執行語句的迭代掛鉤. for...of語法是為各種collection對象專門定制的，并不適用于所有的object.它會以這種方式迭代出任何擁有[Symbol.iterator] 屬性的collection對象的每個元素。 ```javascript //variable:每一次迭代,不同屬性的屬性值會被賦值給該變量. //object:一個可迭代對象. for (variable of object) { statement } ``` 遍歷 Array: ``` let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } // 10 // 20 // 30 ``` 如果你不修改語句塊中的變量 , 也可以使用 const 代替 let。注意不要用var，會導致變量提升副作用。 ``` let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } // 10 // 20 // 30 遍歷Map: let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); for (let entry of iterable) { console.log(entry); } // [a, 1] // [b, 2] // [c, 3] for (let [key, value] of iterable) { console.log(value); } // 1 // 2 // 3 遍歷 Set: let iterable = new Set([1, 1, 2, 2, 3, 3]); //集合是不包含重復元素的 for (let value of iterable) { console.log(value); } // 1 // 2 // 3 ``` # for...of與for...in的區別 for...in循環會遍歷一個object所有的可枚舉屬性。 for...of語法是為各種collection對象專門定制的，并不適用于所有的object.它會以這種方式迭代出任何擁有[Symbol.iterator] 屬性的collection對象的每個元素。下面的例子演示了for...of 循環和 for...in 循環的區別。for...in 遍歷（當前對象及其原型上的）每一個屬性名稱,而 for...of遍歷（當前對象上的）每一個屬性值: ``` Object.prototype.objCustom = function () {}; Array.prototype.arrCustom = function () {}; let iterable = [3, 5, 7]; iterable.foo = "hello"; for (let i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" } for (let i of iterable) { console.log(i); // logs 3, 5, 7 } ``` # 拓展的對象功能 ES5我們對于對象都是以鍵值對的形式書寫，是有可能出現鍵值對重名的，ES6允許簡寫。 ``` function people(name, age) { return { name: name, age: age }; } ``` Es6可以簡寫，這種簡寫在react-native編程中非常常見。 ``` function people(name, age) { return { name, age }; } ``` ES6 同樣改進了為對象字面量方法賦值的語法。ES5為對象添加方法： ``` const people = { name: 'lux', getName: function() { console.log(this.name) } } ``` ES6通過省略冒號與 function 關鍵字，將這個語法變得更簡潔 ``` const people = { name: 'lux', getName () { console.log(this.name) } } ``` ES6 對象提供了Object.assign()這個方法來實現淺復制。Object.assign()可以把任意多個源對象自身可枚舉的屬性拷貝給目標對象，然后返回目標對象。第一參數即為目標對象。在實際項目中，我們為了不改變源對象。一般會把目標對象傳為{} ``` const obj = Object.assign({}, objA, objB) ``` 例子： ``` let objA ={x:1,y:2}; let objB ={x:2,z:3}; const obj=Object.assign({},objA,objB); //此時的obj={x:2,y:2,z:3} ``` # 解構數組和對象是JS中最常用也是最重要表示形式。為了簡化提取信息，ES6新增了解構，這是將一個數據結構分解為更小的部分的過程。解構能讓我們從對象或者數組里取出數據存為變量: ``` //對象 const people = { name: 'lux', age: 20, sex:’男’, } const { name, age } = people console.log(`${name} --- ${age}`) ``` 等價寫法 ``` name= people.name; age=people.age; //數組 const color = ['red', 'blue'] const [first, second] = color console.log(first) //'red' console.log(second) //'blue' 等價寫法 let first=color[0]; let second=color[1] ``` # Spread Operator 展開運算符 ES6中另外一個好玩的特性就是Spread Operator 也是三個點...。組裝對象或者數組 ``` //數組 const color = ['red', 'yellow'] const colorful = [...color, 'green', 'pink'] console.log(colorful) //[red, yellow, green, pink] //對象 const alpha = { fist: 'a', second: 'b'} const alphabets = { ...alpha, third: 'c' } console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"} ``` 有時候我們想獲取數組或者對象除了前幾項或者除了某幾項的其他項 ``` //數組 const number = [1,2,3,4,5] const [first, ...rest] = number console.log(rest) //2,3,4,5 //對象 const user = { username: 'lux', gender: 'female', age: 19, address: 'peking' } const { username, ...rest } = user console.log(rest) //{"address": "peking", "age": 19, "gender": "female"} ``` 對于 Object 而言，還可以用于組合成新的 Object，如果有重復的屬性名，右邊覆蓋左邊。 ``` const first = { a: 1, b: 2, c: 6, } const second = { c: 3, d: 4 } const total = { ...first, ...second } //注意后面的屬性會覆蓋前面的重名屬性 console.log(total) // { a: 1, b: 2, c: 3, d: 4 } ``` 等價寫法 ``` total =Object.assign({},first,second) ``` # import 和 export ``` import導入模塊、export導出模塊 // module "my-module.js" export function cube(x) { return x * x * x; } const foo = Math.PI + Math.SQRT2; export { foo }; ``` 在其它腳本 (cf. import)，我們可以這樣使用： ``` import { cube, foo } from 'my-module.js'; console.log(cube(3)); // 27 console.log(foo); // 4.555806215962888 ``` # 默認導出如果我們只想導出一個簡單的值或者想在模塊中保留一個候選值，就可以使用默認導出： ``` // module "my-module.js" export default function cube(x) { return x * x * x; } ``` 然后，在另一個腳本中，默認的導出值就可以被簡單直接的導入： ``` // module "my-module.js" import cube from 'my-module'; console.log(cube(3)); // 27 //全部導入 import people from './example' //有一種特殊情況，即允許你將整個模塊當作單一對象進行導入 //該模塊的所有導出都會作為對象的屬性存在 import * as example from "./example.js" console.log(example.name) console.log(example.age) console.log(example.getName()) //導入部分 import {name, age} from './example' // 導出默認, 有且只有一個默認 export default App ``` 以前有人問我，導入的時候有沒有大括號的區別是什么。下面是我在工作中的總結： 1.當用export default people導出時，就用 import people 導入（不帶大括號） 2.一個文件里，有且只能有一個export default。但可以有多個export。 3.當用export name 時，就用import { name }導入（記得帶上大括號） 4.當一個文件里，既有一個export default people, 又有多個export name 或者 export age時，導入就用 import people, { name, age } 5.當一個文件里出現n多個 export 導出很多模塊，導入時除了一個一個導入，也可以用import * as example