一、函数的默认参数
ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。
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 允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
注意与 Python 的区别，JS 每次调用函数都会重新生成一个array，而 Python 是直接追加到第一次生成的那个array
二、函数的 rest 参数
ES5 用arguments来获取函数多余的参数
function sum(message) {
let result = 0
for (let i = 1; i < arguments.length; i++) {
result += arguments[i]
}
return message + result
}
sum('结果是', 1, 2, 3, 4, 5, 6) // "结果是21"
ES6 引入rest参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
function sum(message, ...numbers) {
let result = numbers.reduce((a, b) => {
return a + b
}, 0)
return message + result
}
sum('结果是', 1, 2, 3, 4, 5, 6) // "结果是21"
注意：
arguments对象是一个“伪数组”。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组（还可以使用Array.from或者...）。而rest参数就是一个真正的数组，数组特有的方法都可以使用。
三、数组的扩展运算符
扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。
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>]
该运算符主要用于函数调用。
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
注意：只有函数调用时，扩展运算符才可以放在圆括号中，否则会报错。
(...[1, 2])
// Uncaught SyntaxError: Unexpected number
console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number
console.log(...[1, 2])
// 1 2
四、解构赋值
1. 数组的解构赋值
以前，为变量赋值，只能直接指定值。
let a = 1
let b = 2
oldA = a
a = b
b = oldA
console.log(a, b) // 2,1
ES6 的写法可以从数组中提取值，按照对应位置，对变量赋值。
let a = 1
let b = 2; // 注意这里有分号
[a, b] = [b, a]
console.log(a, b) // 2,1
解构赋值允许指定默认值。
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. 对象的解构赋值
数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
容易混淆的点：foo什么时候是被赋值的变量？什么时候是匹配模式？
let { foo } = { foo: 'aaa' }; // 此时 foo 就是被赋值的变量
let { foo: baz } = { foo: 'aaa' }; // 此时 foo 为匹配模式，baz 为被赋值的变量
3. 解构赋值的用途
（1）交换变量的值
（2）从函数返回多个值
（3）函数参数的定义
（5）函数参数的默认值
（6）遍历 Map 结构
（7）输入模块的指定方法
五、如何合并对象
用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. 多行字符串
传统的 JavaScript 语言，定义多行字符串是这样写的
/*\后只要有空格就会报错*/
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>
上面两种写法不仅写起来繁琐，而且输出结果里面也不包含回车
因此，ES6 引入了模板字符串。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
var string = `
<div>
<p>awsl</p>
</div>
`
console.log(string) // 结果包含回车
/*<div>
<p>awsl</p>
</div>*/
2. 字符串里插入变量（插值）
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
3. 函数接字符串
更标准的说法是带标签的模板字符串，这种形式的函数的第一个参数是一个字符串值的数组，其余的参数与表达式相关。
var name = 'aaa'
var person = '人'
var fn = function() {
console.log(arguments) // [["", "是一个", ""], "aaa", "人"]
let strings = arguments[0] // ["", "是一个", ""]
let var1 = arguments[1] // "aaa"
let var2 = arguments[2] // "人"
if (var1 === 'aaa') {
return var1 + strings[1] + '好人'
} else {
return var1 + strings[1] + '坏人'
}
}
fn`${name}是一个${person}`
styled-component 就是用的这个语法
参考：
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
