ES6学习：...运算和新版字符串ES6函数和对象的语法糖，包含函数的默认参数，剩余参数，展开操作，结构赋值，对象的属性

函数与对象的语法糖

函数默认参数

允许在没有值或undefined被传入时使用默认形参

function fn(a,b){
    console.log(a+b)
}
fn(1)     //NaN

b的值为undefined，所以输出结果为NaN

function fn1(a,b){
    a=a||0
    b=b||0   //ES5的写法：当b的值不是undefined，b的值就是b，如果为undefined，b的值就是0
    console.log(a+b)
}
fn1(1)     //1

//ES6的写法：直接给参数一个默认值
    例：当b的值不是undefined，b的值就是b，如果为undefined，b的值就是0
function fn2(a=0,b=0){
    console.log(a+b)
}
fn2(1)    //1

与 Python 的区别 effbot.org/zone/defaul…

剩余参数

允许将一个不定量的参数表示为数组

Array.prototype.slice.call(arguments,2)

将arguments伪数组转换为真数组，并利用slice方法获取指定数组的剩余参数

function sum(message){
    let result=0
    let args=Array.prototype.slice.call(arguments,1) 
    for(let i=0;i<args.length;i++){
        result+=args[i]
    }
    return message+result
}

sum('结果是',1,2,3,4,5)    //'结果是15'

Array.from(arguments).slice(1)
function fn (a, ...b){}

2&3两种写法得到的结果等同于1

补充：...b
 let [a, ...b] = [1, 2, 3, 4];
 a     //1
 b     //[2,3,4]

展开操作

[...iterableObj] = [1, 3, 5, 7, 9];

let [...iterableObj] = [1, 3, 5, 7, 9];
console.log(iterableObj) //[1, 3, 5, 7, 9]

let arr1=[1,2,3,4,5,6]
let [a,b,c,...arr2]=arr1

console.log(arr2)   //[4,5,6]

[0, 2, ...iterableObj, 4, 6, 8];在数组iterableObj前后各增加元素

let iterableObj=[1,2,3,4,5,6]
let iterableObj2=[0, 2, ...iterableObj, 4, 6, 8]

console.log(iterableObj2)    //[0, 2, 1, 2, 3, 4, 5, 6, 4, 6, 8]

解构赋值

[a, b] = [b, a] 交换数组中的两个值

let a=1 
let b=2
;[a,b]=[b,a]

console.log(a)  //2
console.log(b)  //1

[a, b, ...rest] = [10, 20, 30, 40, 50] 从数组中提取值，按照对应的位置给变量赋值，（模式匹配）

[a, b, ...rest] = [10, 20, 30, 40, 50]

a  //10
b  //20
rest  //[30, 40, 50]

let {name, age} = frank 对象的结构赋值需要注意变量名必须和属性名相同才能取到正确的值

let frank={
    name:'Jack', age:18
 }
let {name, age} = frank 

name  //Jack
age   //18

如果变量名与属性名不一致，必须写成下面这样。

let { name: xingming } = { name: 'Jack', age: 18 };
xingming  // "Jack"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

[a=5, b=7] = [1]结构赋值允许指定默认值

let [foo = true] = [];
foo   // true

let [a, b=7] = [1];   // a=1, b=7
let [a, b=7] = [5, undefined];   // a=5, b=7
let [a=5, b=7] = [1,2];  //a=1, b=2

[a, b] = fn();{foo, bar} = example()利用解构赋值从函数返回多个值

返回一个数组
    function fn(){
        return [1,2]
    }
    let [a, b] = fn()
    
    function fn2(){
        return [1,2,3]
    }
    let [a, , b] = fn2()    //此时a=1; b=3 
 
返回一个对象
    function example() {
      return {
        foo: 1,
        bar: 2
      };
    }
    let { foo, bar } = example();

结构赋值和剩余参数的综合使用

    let person={
       name:'Jack',
       age:18
    }
    {name: xingming='Tom', age: nianliang=17} = person
    
    xingming   //Jack
    nianliang  //18
    
    默认值生效的条件是，对象的属性值严格等于`undefined`。
    let person2={
       name:undefined,
       age:undefined
    }
    {name: xingming='Tom', age: nianliang=17} = person
    
    xingming   //TOM
    nianliang  //17

对象浅拷贝

let person1 = {
    name: 'Tom',
    age: 28,
    child: {
        name: 'Jack',
        age: 10
    }
}

let person2 = {
    ...person1
}

对象合并

let obj1 = {
    a: 1,
    b: 2,
    c: 3
}
let obj2 = {
    c: 4,
    d: 5,
    x: 6
}

//方法一：利用Object.assign方法
let obj3 = Object.assign({}, obj1, obj2)  

//方法二：利用...运算
let obj3 = {
    ...obj1,
    ...obj2
}

obj3  //{a: 1, b: 2, c: 4, d: 5, x: 6}

MDN 上更多的例子

对象属性加强
1. obj = { x, y }
2. obj = {["baz" + quux() ]: 42}
3. 函数属性可以缩写

新的字符串

多行字符串

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
```
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);
```

字符串里插入变量（插值）

模板字符串中嵌入变量，需要将变量名写在${}之中，{}大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性，也可以调用函数，并进行相应的嵌套

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 传统写法为
      // 'User '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

函数接字符串
```
 fn`${name} 是一个 ${person}`
```
styled-component 就是用的这个语法