ES6 - 解構(數組和對象)

解構對象

/**
 * 解構：快捷，方便
 * 
 * 對象解構
 */

{
  var expense = {
    type: "es6",
    amount: "45"
  };

  //1.ES5
  // var type = expense.type;
  // var amount = expense.amount;
  // console.log(type, amount); //output: es6 45

  //2.ES6
  const { type, amount, abc } = expense;
  console.log(type, amount, abc);    //output: es6 45 undefined
}

{

  var saveFiled = {
    extension: "jpg",
    name: "girl",
    size: 14040
  };

  //ES5
  function fileSammary1(file) {
    return `${file.name}.${file.extension}的總大小是${file.size};`
  }

  //ES6
  //名字不能變，位置可以亂
  function fileSammary2({ name, size, extension }) {
    return `${name}.${extension}的總大小是${size};`
  }

  console.log(fileSammary1(saveFiled)); //output: girl.jpg的總大小是14040;
  console.log(fileSammary2(saveFiled)); //output: girl.jpg的總大小是14040;
}

其他參考：ECMAScript6 - 2.變量的解構賦值

解構數組

/**
 * 解構：快捷，方便
 * 
 * 數組解構
 */

/**
 * 基礎
 */
{
  const names = ["Henry", "Bucky", "Emily"];
  const [name1, name2, name3] = names;
  console.log(name1, name2, name3);

  //用對象接收，反數組個數
  const { length } = names;
  console.log(length); // 3

  //結合張開運算符
  const [name, ...rest1] = names;
  console.log(name);  // Henry
  console.log(rest1); //(2) ["Bucky", "Emily"]

  let [foo, [[bar], baz]] = [1, [[2], 3]];
  foo; // 1
  bar; // 2
  baz; // 3
}

/**
 * 數組中的對象
 */
{
  //對象數組
  const people = [
    { name: "Henry", age: 20 },
    { name: "Bucky", age: 25 },
    { name: "Emily", age: 30 }
  ];

  // ES5
  //讀取數據元素中的對象參數值
  {
    var age = people[0].age;
    age;      // 20
  }

  // ES6
  {
    //讀取數組的元素
    {
      const [age1, , age] = people;
      console.log(age1);  // { name: "Henry", age: 20 },
      console.log(age);   // { name: "Emily", age: 30 }
    }

    //讀取數組元素中的對象參數值
    {
      const [{ age }] = people;
      console.log(age);   // 20
    }
  }


  //數組轉化為對象
  {
    const points = [
      [4, 5], [10, 20], [0, 100]
    ];

    /**
     * 期望數據格式：
     * [
     *  {x:4,y:5},
     *  {x:10,y:20},
     *  {x:0,y:100}
     * ]
     */

     let newPoints = points.map(([x,y])=>{
       //1.傳入解構 [x,y] = [4,5]
       //2.x = 4, y = 5
       //3.return {x:x,y:y} 簡寫 return {x,y}
       return {x,y};
     })

     console.log(newPoints);
  }
}