一廊营、函數(shù)的默認(rèn)參數(shù)
ES6 之前楞卡，不能直接為函數(shù)的參數(shù)指定默認(rèn)值，只能采用變通的方法挑童。
function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
ES6 允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值闪水，即直接寫在參數(shù)定義的后面糕非。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
注意與 Python 的區(qū)別，JS 每次調(diào)用函數(shù)都會(huì)重新生成一個(gè)array球榆，而 Python 是直接追加到第一次生成的那個(gè)array
二朽肥、函數(shù)的 rest 參數(shù)
ES5 用arguments來獲取函數(shù)多余的參數(shù)
function sum(message) {
let result = 0
for (let i = 1; i < arguments.length; i++) {
result += arguments[i]
}
return message + result
}
sum('結(jié)果是', 1, 2, 3, 4, 5, 6) // "結(jié)果是21"
ES6 引入rest參數(shù)（形式為...變量名），用于獲取函數(shù)的多余參數(shù)持钉，這樣就不需要使用arguments對(duì)象了衡招。rest參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中每强。
function sum(message, ...numbers) {
let result = numbers.reduce((a, b) => {
return a + b
}, 0)
return message + result
}
sum('結(jié)果是', 1, 2, 3, 4, 5, 6) // "結(jié)果是21"
注意：
arguments對(duì)象是一個(gè)“偽數(shù)組”始腾。所以為了使用數(shù)組的方法，必須使用Array.prototype.slice.call先將其轉(zhuǎn)為數(shù)組（還可以使用Array.from或者...）空执。而rest參數(shù)就是一個(gè)真正的數(shù)組浪箭，數(shù)組特有的方法都可以使用。
三辨绊、數(shù)組的擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）奶栖。它好比rest參數(shù)的逆運(yùn)算，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列门坷。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
該運(yùn)算符主要用于函數(shù)調(diào)用宣鄙。
function push(array, ...items) {
array.push(...items);
return array
}
push([], ...[1, 2, 3]) // [1, 2, 3]
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
注意：只有函數(shù)調(diào)用時(shí)，擴(kuò)展運(yùn)算符才可以放在圓括號(hào)中拜鹤，否則會(huì)報(bào)錯(cuò)框冀。
(...[1, 2])
// Uncaught SyntaxError: Unexpected number
console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number
console.log(...[1, 2])
// 1 2
四流椒、解構(gòu)賦值
1. 數(shù)組的解構(gòu)賦值
以前敏簿，為變量賦值，只能直接指定值宣虾。
let a = 1
let b = 2
oldA = a
a = b
b = oldA
console.log(a, b) // 2,1
ES6 的寫法可以從數(shù)組中提取值惯裕，按照對(duì)應(yīng)位置，對(duì)變量賦值绣硝。
let a = 1
let b = 2; // 注意這里有分號(hào)
[a, b] = [b, a]
console.log(a, b) // 2,1
解構(gòu)賦值允許指定默認(rèn)值蜻势。
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
2. 對(duì)象的解構(gòu)賦值
數(shù)組的元素是按次序排列的，變量的取值由它的位置決定鹉胖；而對(duì)象的屬性沒有次序握玛，變量必須與屬性同名够傍，才能取到正確的值。
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
對(duì)象的解構(gòu)賦值是下面形式的簡(jiǎn)寫
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
也就是說挠铲，對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制冕屯，是先找到同名屬性，然后再賦給對(duì)應(yīng)的變量拂苹。真正被賦值的是后者安聘，而不是前者。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
上面代碼中瓢棒，foo是匹配的模式浴韭，baz才是變量。真正被賦值的是變量baz脯宿，而不是模式foo念颈。
容易混淆的點(diǎn)：foo什么時(shí)候是被賦值的變量？什么時(shí)候是匹配模式连霉？
let { foo } = { foo: 'aaa' }; // 此時(shí) foo 就是被賦值的變量
let { foo: baz } = { foo: 'aaa' }; // 此時(shí) foo 為匹配模式舍肠，baz 為被賦值的變量
3. 解構(gòu)賦值的用途
（1）交換變量的值
（2）從函數(shù)返回多個(gè)值
（3）函數(shù)參數(shù)的定義
（5）函數(shù)參數(shù)的默認(rèn)值
（6）遍歷 Map 結(jié)構(gòu)
（7）輸入模塊的指定方法
五、如何合并對(duì)象
用Object.assign()
let obj1 = {
a: 1,
b: 2
}
let obj2 = {
a: 3,
c: 4
}
let obj3 = Object.assign({}, obj1, obj2)
console.log(obj3) // {a: 3, b: 2, c: 4}
用...
let obj1 = {
a: 1,
b: 2
}
let obj2 = {
a: 3,
c: 4
}
let obj3 = {...obj1, ...obj2}
console.log(obj3) // {a: 3, b: 2, c: 4}
六窘面、模板字符串
1. 多行字符串
傳統(tǒng)的 JavaScript 語言翠语，定義多行字符串是這樣寫的
/*\后只要有空格就會(huì)報(bào)錯(cuò)*/
var string = "\
<div>\
<p>awsl</p>\
</div>"
console.log(string) // <div><p>awsl</p></div>
/*+ 后面允許有空格，但寫起來太繁瑣*/
var string = "" +
"<div>" +
"<p>awsl</p>" +
"</div>"
console.log(string) // <div><p>awsl</p></div>
上面兩種寫法不僅寫起來繁瑣财边，而且輸出結(jié)果里面也不包含回車
因此肌括，ES6 引入了模板字符串。它可以當(dāng)作普通字符串使用酣难，也可以用來定義多行字符串谍夭，或者在字符串中嵌入變量。
var string = `
<div>
<p>awsl</p>
</div>
`
console.log(string) // 結(jié)果包含回車
/*<div>
<p>awsl</p>
</div>*/
2. 字符串里插入變量（插值）
// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
3. 函數(shù)接字符串
更標(biāo)準(zhǔn)的說法是帶標(biāo)簽的模板字符串憨募，這種形式的函數(shù)的第一個(gè)參數(shù)是一個(gè)字符串值的數(shù)組紧索，其余的參數(shù)與表達(dá)式相關(guān)。
var name = 'aaa'
var person = '人'
var fn = function() {
console.log(arguments) // [["", "是一個(gè)", ""], "aaa", "人"]
let strings = arguments[0] // ["", "是一個(gè)", ""]
let var1 = arguments[1] // "aaa"
let var2 = arguments[2] // "人"
if (var1 === 'aaa') {
return var1 + strings[1] + '好人'
} else {
return var1 + strings[1] + '壞人'
}
}
fn`${name}是一個(gè)${person}`
styled-component 就是用的這個(gè)語法
參考：
http://es6.ruanyifeng.com/#docs/function
http://es6.ruanyifeng.com/#docs/string
http://es6.ruanyifeng.com/#docs/destructuring
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
