了解ES6解构赋值

解构赋值

本章所需要了解什么是解构赋值,怎么使用

• 数组解构赋值

• 对象解构赋值

解构赋值是一种:混合式赋值.例如，在解构赋值中，=右侧是一个数组或者对象（一个结构化的值),指定左侧一个或者多个变量的语法和右侧的数组和对象直接量的语法保持一致。

当发生解构赋值时，右侧的数组和对象中一个或者多个的值就会被提取出来(解构)，并赋值给左侧相应的变量名。

除了const外，解构赋值还用于初始化用let和var新声明的变量。

解构操作在那些具有很多参数和默认参数值的函数中也很奏效，很快我们就会看到这些都是怎么处理的。

数组的解构赋值

数组的解构是按次排列的，变量取值位置决定的

let arr = ["1","2","3"];
let [a, b, c] = arr;
console.log(a);//"1"
console.log(b);//"2"
console.log(c);//"3"

原本的数组获取：

const numbers = ['one','two','three','four'];
 numbers[0];//'one'
 numbers[1];//'two'

使用数组解构后：

const numbers = ['one','two','three','four'];
const [one,two] = numbers;
console.log( one, two); // one two

想获取第一个，和第三个，其他都不需要

const numbers = ['one','two','three','four'];
const [one, ,three] = numbers;
console.log( one, three);  //'one','three'

获取在数组里面组成一个新的数组

const numbers = ['one','two','three','four'];
const [one,...others] = numbers;
console.log(one,others); //one (3) ["two", "three", "four"]

数组的解构赋值 互换位置的简单粗暴方法

let a = 10;
let b = 20;
//以前方法
let temp;
temp = a;
a = b;
b = temp;

//数组解构方法
[a,b] = [b,a];

[a]赋值给了[b], 最后[b]赋值给了[a]让他们两个位置调换了;

数组解构的默认值

let arr = [one,two];
let [one,two,oo] = arr
console.log( one, two,oo); // one two undefined

let arr = [one,two];
let [one,two,oo，aa] = arr
console.log( one, two,oo); // one two undefined

当左侧多余的变量会赋值为undefined;右侧多余的值则会被忽略。

解构赋值右侧的数组包含的元素不必和左侧的变量一一对应，左侧多余的变量赋值为**undefined,而右侧多余的值则会被忽略。 左侧的变量列表可以包含连续的逗号用以跳过右侧对应的值**；

---

对象的解构赋值

对象的属性是没有顺序的，变量必须与属性同名才能取到正确的值

let obj = {
   name = "a",
   age = 20,
}
let { name, age} = obj;
console.log(name);//"a"
console.log(age);//20

创建一个对象并想取里面的值

  const Tom = {
          name: "Tom Jones",
          age: 25,
          family: {
            mother: "Norah Jones",
            father: "Rinchard Jones",
            brother: "Howard Jones"
          }
        };

在以前看来获取的方法

const name = Tom.name;
const age = Tom.age;
....

获取的方法比较枯燥,为了简写，ES6推出了解构赋值let {变量} =对象

const {name,age} = Tom;
console.log(name);//"Tom Jones"
console.log(age);//25

先声明name,age变量，Tom对象里面的属性 一一对应赋值给解构变量并且要求属性名与结构变量名相同~，不然则返回unddfined;

如果声明了解构赋值的变量 与提前声明的变量相同就会报错，他会提示你外部已经存在了一个提前声明变量

const name = "";
const { name, age } = Tom;
//Identifier 'name' has already been declared;提示你常亮已存在，名为 name;

如果你想提前声明的话，可以这样使用 为了避免 {} 被提前解析为代码块，我们应该加上（）

let name;
({name, age} = Tom); // 这样是可以解析的
console.log(name); // "Tom Jones"
console.log(age); // 25

加()是为了 代码在前面不被系统解析为代码块而导致的。

我想获取 Tom对象下的family的属性怎么办？

  const Tom = {
          family: {
            mother: "Norah Jones",
            father: "Rinchard Jones",
            brother: "Howard Jones"
          }
        };

const { father, mother, brother} = Tom.family;
console.log(father); //Rinchard Jones
console.log(mother);//Norah Jones
console.log(brother);//Howard Jones

需要获取Tom对象里面的family所以需要 Tom.family解构赋值给左侧的变量名;注意：需要变量名与对象名相同才能使用，不然undefined；

解构赋值在外部与其他变量名相同，是否可以重另名防止这个事情发生？

const father = "Da"; //这里已经使用了 family这个变量名
const { father: f, mother: m, brother: b } = Tom.family;
console.log(f); //Rinchard Jones  
console.log(m);//Norah Jones
console.log(b);//Howard Jones
// f, m, b 已经成为了 我们备用的名字

执行顺序：声明f变量 => Tom.family中 => 找到father的值，然后father赋值到 f中;

如果 一个对象里面没有这条属性会 返回什么？

const {sister} = Tom.family;
//因为 Tom.family.sister 找不到这条对象属性
console.log(sister); //undefined

一个对象里，没有你所需要的这条属性，并不想让他 undefined

const { sister = 'have' } = Tom.family;
console.log(sister); //have

设置个默认值，因为他默认值 undefined； 我们可以改变的

为了进一步理解这个

const Tom = {
          family: {
          sister:null, 
  }
};

• sister对象属性下为null

  const { sister = 'have' } = Tom.family;
  console.log(sister); //null
  

• sister对象属性下为 false

  const Tom = {
            family: {
            sister:false, 
    }
  };
  
  const { sister = 'have' } = Tom.family;
  console.log(sister); //false
  

• sister对象属性下为 0

  const Tom = {
            family: {
            sister:0, 
    }
  };
  
  const { sister = 'have' } = Tom.family;
  console.log(sister); //0
  

• sister对象属性下为 undefined；

  const Tom = {
            family: {
            sister:undefined, 
    }
  };
  
  const { sister = 'have' } = Tom.family;
  console.log(sister); //have;
  

明确undefined的时候 才能 使用你的默认值，如果为null，0，false，等等方法 都会被赋值进去

🌈总结

数组解构赋值：

1. 数组的解构是按次排列的，变量取值位置决定的
2. 数组的解构易读目了，包含连续的逗号用以跳过右侧对应的值
3. 调换位置不需要第三者变量：[a,b]=[b,a];

对象解构赋值:

1. 对象的属性是没有顺序的，变量必须与属性同名才能取到正确的值,
2. 他可以让我们在对象中快速提取我们所需要的属性,可以嵌套
3. 最后对象里面没有你所需要的属性，可以给他默认值，改变成你想要的属性

解构赋值：

1. 默认值为:undefined,需要要改变提前在解构赋值声明 {sister = 'have'} 或者[a="2"]；
2. 对象与数组解构：数组：是按次排列的; 对象：对象的属性是没有顺序的，变量必须与属性同名才能取到正确的值；