ES6

ES6深入浅出之解构赋值

Posted by weite122 on 2018-12-11

函数与对象的语法糖

函数默认参数

  • ES5写法：

    1
    2
    3
    4
    5
    6
    7
    function sum(a, b){
        a = a || 0
        b = b || 0
        return a+b
    }

    sum(1, 2)

  • ES6写法：

    1
    2
    3
    function sum(a=0, b=0){
        return a+b
    }

  • 与 Python 的区别:

    1
    2
    3
    4
    5
    6
    function push(item, array=[]){
        array.push(item)
        return array
    }
    console.log(push(1))
    console.log(push(2))
    1
    每次调用获得的数组都是新的数组，Python则是初始化一次数组，之后的还是调用同一个数组

剩余参数

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

  • Array.from(arguments).slice(2)

  • function fn (a,b, …c){}

  • 例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    第一种写法：
    function sum(message){
        let numbers = Array.prototype.slice.call(arguments, 2)
        result = numbers.reduce((p,v) => p+v, 0)
        return message + result       
    }
    第二种写法：
    function sum(message){
        let numbers = Array.from(arguments).slice(2)
        result = numbers.reduce((p,v) => p+v, 0)
        return message + result
    }
    第三种写法：
    function sum(message, ...numbers){
        result = numbers.reduce((p,v) => p+v, 0)
        return message + result
    }
    sum('结果是', 1,2,3,4,5)

    arguments 是伪数组，没有数组的slice等方法

展开操作

  • […iterableObj] = [1, 3, 5, 7, 9];
  • [0, 2, …iterableObj, 4, 6, 8];
  • 例子：
    1
    2
    3
    4
    5
    6
    var array1 = [1,2,3,4,5,6]
    var [a,b,c,...array2] = array1 
    console.log(array2)
    var array3 = [0, array1, 7]
    // var array3 = [0].concat(array1).concat([7])
    console.log(array3)

解构赋值

  • [a, b] = [b, a] //直接交换a和b的值，方括号前加分号，他会自动向上一行

  • [a, b, …rest] = [10, 20, 30, 40, 50]//…rest必须是最后一位

  • let {name, age} = frank

    1
    2
    3
    4
    5
    6
    var frank = {name:'frank', age:18, gender:'Male'}
    var name = frank.name
    var age = frank.age
    var gender = frank.age
    以上可以合并为下面
    var {name,age,gender} = frank

  • [a=5, b=7] = [1];//5和7是默认值，1赋值给a

  • [a, b] = f()

    1
    2
    3
    4
    function f(){
      return [1,2]
    }
    [a,b] = f()

  • [a, , b] = f();

    1
    2
    3
    4
    function f(){
      return [1,2,3]
    }
    [a,b] = f()

  • {p: foo, q: bar} = o

  • let {a = 10, b = 5} = {a: 3};

  • let {a:aa = 10, b:bb = 5} = {a: 3};

对象浅拷贝

  • 例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let objA = {name: 'a'}
let objB = Object.assign({}, objA)

{
    let objA = {name: 'a'}
    let objB = Object.assign({}, objA)
    console.log(objB)
    objB.name = 'b'
    console.log(objA.name)
}

{
    let objA = {
        name: {
            x: 'a'
        }
    }
    let objB = Object.assign({}, objA)
    // let objB = {...objA}新的写法
    objB.name.x = 'b'
    console.log(objA.name)
}

对象合并

1
2
3
4
5
6
7
8
9
10
11
let objA = {
    p1: 1,
    p2: 2
}
let objC = {
    p1: 7777,
    p3: 3
}
let objB = Object.assign({}, objA, objC)
//let objB = {...objA,objC}
console.log(objB)

对象属性加强

  • obj = { x, y }

    1
    2
    3
    4
    5
    6
    var x = 1
    var y = 2
    var obj = {
        x:x, 
        y:y
    }
    1
    2
    3
    4
    5
    6
    7
    8
    var x =1,
    var obj1 = {name:'weite',age: 18}
    var obj2 = {
        z: 0,
        x,
        ...obj1,
        sayhello(){}
    }

  • obj = {[“baz” + quux() ]: 42}

    1
    2
    3
    4
    5
    6
    动态的key值用[]
    var key = 'x'
    var value = 'y'
    var obj = {}
    obj[key] = value
    console.log(obj)//{x: "y"}

函数属性可以缩写

新的字符串

  • 多行字符串

    1
    2
    3
    4
    5
    6
    var text = 'fighting'
    var string = `
      <div>
          <span>${ text }</span>
      </div>
      `

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

  • 函数接字符串

    • fn${name} is a ${person}
    • 例子：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      var name = 'weite'
      var person = 'good man'
      var fn = function(){
          let strings = arguments[0]
          let param1 = arguments[1]
          let param2 = arguments[2]
          console.log(strings)
          console.log(param1)
          console.log(param2)
      }
      fn`${name} is a ${person}`

  • styled-component 就是用的这个语法

FEATURED TAGS
ES6
FRIENDS