一、let和const命名
let命令是用來申明變量的斥赋。用法和var類似，不同的是let作用域只在{}之間滑绒，var會進行申明置頂,全局有效隘膘。
for(var i=0;i<10;i++){
//do something
}
console.log(i);//10
//let
for(let j=0;j<10;j++){
//do something
}
console.log(j);//Uncaught ReferenceError: j is not defined
var進行變量提升后的結(jié)果見下
var i;
for(i=0;i<10;i++){
//do something
}
console.log(i);//10
let的使用有幾點需要注意
- 同一作用域不允許重復(fù)申明
- for循環(huán)還有一個特別之處，就是設(shè)置循環(huán)變量的那部分是一個父作用域弯菊，而循環(huán)體內(nèi)部是一個單獨的子作用域纵势。
const用來定義常量的，重復(fù)賦值的會報錯钦铁，先定義，再使用
二育瓜、數(shù)據(jù)的結(jié)構(gòu)賦值
1、數(shù)組
let [a,b,c] = [1,2,3];//完全解構(gòu) ok
let [e,f,g] = [4,5];//不完全解構(gòu) ok
let [h, ,j]= [5,6,7];//不完全解構(gòu) h=5,j=7
let [l,m] = [7,,9];//不完全解構(gòu) l=7, m=undefind
let l,m = [7,,9]; //不完全解構(gòu) l=undefind,m=[7, ,9] 避免
解構(gòu)是可以指定默認(rèn)值的恋脚，例:let [l,m=8] = [7,,9]
2焰手、對象
ES6還可以進行對象的解構(gòu)，數(shù)組的解構(gòu)按順序船响，對象的解構(gòu)按鍵
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
值得注意的是let { bar, foo }只是一種簡寫躲履，補全后是
let { bar:bar, foo:foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
bar:bar 第一個是匹配模式，第二個才是賦值的
let { bar:bar1, foo:foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar1 // "bbb"
bar // Uncaught ReferenceError: bar is not defined
3工猜、字符串
字符串也可以解構(gòu)賦值。這是因為此時史侣，字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象魏身。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
類似數(shù)組的對象都有一個length屬性，因此還可以對這個屬性解構(gòu)賦值箭昵。
let {length : len} = 'hello';
len // 5
4、用途
#######交換變量的值
let a = 1;
let b = 2;
[a,b] = [b,a];
既方便又簡捷
從函數(shù)返回多個值
// 返回一個數(shù)組
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
函數(shù)只能返回一個參數(shù)掉房，通過這個可以進行多個參數(shù)的接收
提取 JSON 數(shù)據(jù)
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);// 42, "OK", [867, 5309]
上面代碼可以快速提取 JSON 數(shù)據(jù)的值慰丛，尤其有用瘾杭。
函數(shù)參數(shù)的默認(rèn)值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};
指定參數(shù)的默認(rèn)值，就避免了在函數(shù)體內(nèi)部再寫var foo = config.foo || 'default foo';這樣的語句贤笆。
輸入模塊的指定方法
加載模塊時，往往需要指定輸入哪些方法芥永。解構(gòu)賦值使得輸入語句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");
3板辽、模板字符串
s6模板字符簡直是開發(fā)者的福音啊棘催，解決了ES5在字符串功能上的痛點。
第一個用途醇坝，基本的字符串格式化。將表達式嵌入字符串中進行拼接画畅。用${}來界定宋距。
//ES5
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux
第二個用途，在ES5時我們通過反斜杠()來做多行字符串或者字符串一行行拼接乡革。ES6反引號(``)直接搞定。
// ES5
var msg = "Hi \
man!
"
// ES6
const template = `<div>
<span>hello world</span>
</div>`
4嘁傀、Spread Operator 展開運算符
ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒...接下來就展示一下它的用途视粮。
組裝對象或者數(shù)組
//數(shù)組
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//對象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}
5、import和export
import導(dǎo)入模塊蕾殴、export導(dǎo)出模塊
//全部導(dǎo)入
import people from './example'
//有一種特殊情況，即允許你將整個模塊當(dāng)作單一對象進行導(dǎo)入
//該模塊的所有導(dǎo)出都會作為對象的屬性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())
//導(dǎo)入部分
import {name, age} from './example'
// 導(dǎo)出默認(rèn), 有且只有一個默認(rèn)
export default App
// 部分導(dǎo)出
export class App extend Component {};
以前有人問我茴肥，導(dǎo)入的時候有沒有大括號的區(qū)別是什么荡灾。下面是我在工作中的總結(jié)：
1.當(dāng)用export default people導(dǎo)出時瞬铸，就用 import people 導(dǎo)入（不帶大括號）
2.一個文件里础锐，有且只能有一個export default。但可以有多個export拦宣。
3.當(dāng)用export name 時信姓，就用import { name }導(dǎo)入（記得帶上大括號）
4.當(dāng)一個文件里，既有一個export default people, 又有多個export name 或者 export age時财破，導(dǎo)入就用 import people, { name, age }
5.當(dāng)一個文件里出現(xiàn)n多個 export 導(dǎo)出很多模塊，導(dǎo)入時除了一個一個導(dǎo)入靡羡，也可以用import * as example
6俊性、類和繼承
Class 可以通過extends關(guān)鍵字實現(xiàn)繼承略步，這比 ES5 的通過修改原型鏈實現(xiàn)繼承定页，要清晰和方便很多。
class Point {
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 調(diào)用父類的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 調(diào)用父類的toString()
}
}
上面代碼中杭煎，constructor方法和toString方法之中卒落，都出現(xiàn)了super關(guān)鍵字，它在這里表示父類的構(gòu)造函數(shù)也切，用來新建父類的this對象腰湾。
子類必須在constructor方法中調(diào)用super方法雷恃，否則新建實例時會報錯费坊。這是因為子類自己的this對象，必須先通過父類的構(gòu)造函數(shù)完成塑造导犹，得到與父類同樣的實例屬性和方法羡忘，然后再對其進行加工，加上子類自己的實例屬性和方法卷雕。如果不調(diào)用super方法，子類就得不到this對象滨嘱。
