ES6笔记--解构

    这一小节主要是记录解构模块知识,解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值，它是对赋值运算符的扩展，解构分4种类型，1 对象解构    2 数组解构    3  混合解构    4  解构参数。

   1 对象结构:

let obj = {
      a: 1,
      b: [1, 2]
    }
    // 对象解构
    const { a, b } = obj
    console.log(a, b) //1  [1, 2]

2 数组解构:

let arr = [1, 2, 3]
    
    //解构前2个元素
    const [a, b] = arr
    console.log(a,b) //1 2
    
    //解构中间的元素
    const [, b,] = arr
    console.log(b) // 2

数组解构比对象解构简单，因为数组只有数组字面量，不需要像对象一个使用key属性。

 3 函数中使用解构赋值

let props = {
      a: 1,
      b: 2
    }
    function test(value) {
      console.log(value)
    }
    test({a=3, b=3} = props) 
//输出: {a: 1, b: 2}

分析:在调用test()函数的时候，我们给参数设置了默认值3，如果不重新赋值，则打印出3,3，但是进行解构赋值后，将props对象的参数解构赋值给a和b，所以打印结果是{a: 1, b: 2}

  如果现在我们想修改这2个变量的值，采用解构赋值的方式可以这样做：定义一个props对象，该对象包含2个属性a和b，然后进行解构赋值，这时就能更新变量a和b的value。

let props = {
      a: 1,
      b: 2
    },
    a = 3,
    b = 3;
    //解构赋值
    ({ a, b } = props)
    console.log(a, b) 
//输出 1, 2

4 嵌套对象解构

{
 	let metaData = {
 		title:'abc',
 		test:[{
 			title:'test',
 			desc:'description'
 		}]
 	}

 	let {title:esTitle,test:[{title:cnTitle}]} = metaData;
 	console.log(esTitle,cnTitle);  //abc test
 }

5 不定元素解构

let arr = [1, 2, 3, 4];
    let [...a] = arr;
    console.log(a) 
//[1,2,3,4] 这种做法就是克隆arr数组

6 混合解构

混合解构指的是对象和数组混合起来，执行解构操作

let obj = {
      a: {
        id: 1
      },
      b: [2, 3]
    }
    
    const {
      a: {id},
      b:[...arr]
    } = obj;
    console.log(id, arr) 
//id = 1, arr = [2, 3]

7 解构参数

 function Ajax(url, options) {
      const {timeout = 0, jsonp = true} = options
      console.log(url, timeout, jsonp)
    };
    Ajax('baidu.com', {
      timeout: 1000,
      jsonp: false
    }) // "baidu.com" 1000 false

       当给函数传递参数时，我们可以对每个参数进行解构，我给option的参数设置了默认值，这样可以防止没有给option传参导致的报错情况。