【 ES6 】解构

数组解构

• 解构数组

  const names = ["Henry", "Bucky", "Emily"];
  // 解构
  const [name1, name2, name3] = names;
  console.log(name1, name2, name3);
  // Henry Bucky Emily
  

• 返回数组个数 使用 { }

  const { length } = names;
  console.log(length); // 3
  

• 结合展开运算符

  const [name, ...rest] = names;
  console.log(name); // Henry
  console.log(rest); // [ 'Bucky', 'Emily' ]
  

• 对象数组

  const people = [
    { name: "Henry", age: 20 },
    { name: "Bucky", age: 25 },
    { name: "Emily", age: 30 }
  ];
  
  // es5 
  var age = people[0].age;
  console.log(age);
  
  // es6 解构
  // 获得people里面的每一个对象 {},{},{}
  const [person] = people;
  console.log(person); // { name: 'Henry', age: 20 }
  
  // 解构单个对象 并且获得对象的年纪
  const { age } = person;
  console.log(age);// 20
  

• 将数组转化为对象

  const points = [
    [4, 5],
    [10, 1],
    [0, 40]
  ];
  
  // 期望数据格式
  // [
  //   {x:4,y:5},
  //   {x:10,y:1},
  //   {x:0,y:40}
  // ]
  
  let newPoints = points.map(pair => {
    // const x = pair[0];
    // const y = pair[1];
    const [x, y] = pair;
    return { x, y }
  })
  
  // ES6解构 将上面的pair直接解构
  let newPoints = points.map(([x, y]) => {
    return { x, y }
  })
  
  console.log(newPoints); 
  // [ { x: 4, y: 5 }, { x: 10, y: 1 }, { x: 0, y: 40 } ]
  

对象解构

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

// 非ES6
var type = expense.type;
var amount = expense.amount;
console.log(type, amount); // es6 45

// ES6解构 解构对象的所有内容 不能改变{ xxx }里面的名字 必须和对象的属性保持一致
const { type, amount } = expense;
console.log(type, amount); // es6 45

var saveFiled = {
  extension: "jpg",
  name: "girl",
  size: 14040
};
// ES5
function fileSammary(file){
  return `${file.name}.${file.extension}的总大小是${file.size}`;
}

// ES6 解构
function fileSammary({ name, extension, size }) {
  return `${name}.${extension}的总大小是${size}`;
}

console.log(fileSammary(saveFiled));
// girl.jpg的总大小是14040