ES6-变量的解构赋值(数组、对象、特殊对象、实际用途)

1.数组的解构赋值

(1)语法形式，左边变量，右边值，只需左右模式匹配即可：例：let[a,b,c,d]=[10,20,30,40]

<script>
     // let a=10;
      // let b= 20;
      // let c=30;
      //以上通过解构赋值表示：
      let[a,b,c]=[100,200,300]
      console.log(a,b,c);
</script>

复杂数组案例：

<script>
let[ ba, [[b]b,[bc,bd]]]=[100,[200],[300,400]];
console.log(ba,bb,bc,bd);
</script>

(2) 两边模式不能匹配，也可以进行解构：

例子1：

<script>
let[a, ,b]=[1,2,3];//声明变量有一为空
console.log(a,b);//输出1,3
</script>

例子2：解构赋值，变量没有设置值，系统设置个默认值Undefined

<script>
let[a, b,c]=[1,4];//声明值有一为空,
console.log(a,b,c);//输出1,4，c变量输出默认值Undefined
</script>

例子3：

<script>
let[var1,var2='小红']=['小马'];/
console.log(var1,var2);//输出小马,小红，var2没有给设置值，所以var2使用了自己的默认值
</script>

例子4：

<script>
let[var1='小红',var2]=['小马'];
console.log(var1,var2); //输出小马,Undefined,变量没有值，默认给了Undefined
</script>

总结：

数组的解构赋值：

保证等号两边的数组模式一样；(见例子1)

如果不能正确解构，有的变量可能会自动赋值undefined；（见例子4，例子2）

变量可以有默认值；（见例子3）

2.对象的解构赋值

完整格式：

let{变量名1:变量值命名1,变量名2:变量值命名2} = {变量名1:变量值1,变量名2:变量值2};

简写形式：

let{变量名1,变量名2} = {变量名1:变量值1,变量名2:变量值2};

例子：

<script>
//简写形式
let{bar,foo} = {bar:'li'，foo:100};
console.log(bar,foo);
//完整格式，对象解构赋值
let{bar:a,foo:b} = {bar:'li'，foo:100};
console.log(a,b);
</script>

复杂形式：

<script>
let obj = {
     p:[
           'hello',
           { y:'World'}
]
};
let {p:[x,y:y]}=obj;
console.log(obj)
</script>

3..特殊对象的解构赋值

一切皆对象；

字符串可以被看做是由字符组成的数组；

(1) 字符串可以当做字符组成的数组，例子：

<script>
let[a,b,c,d,e,f,g,h,i] = 'helloworld';
conlole.log(a);
conlole.log(b);
conlole.log(c);
conlole.log(d);//输出helloworld
</script>

(2) 字符串当成对象：例子:

<script>
let {length:len}=''world';
console.log(len);//输出5,对象的长度
let{PI:p1}=Math;
console.log(p1);//输出3.14......
</script>

4.实际用途

（1）交换两个变量的值

<script>
let a = 100;
let b=200;
//传统的方式
let c = a;
a = b;
b = a;
// 解构方式
[a,b]=[b,a];//不能写成let[a,b]=let[b,a]，因为上面已经进行声明
console.log(a,b);//输出100，200
</script>

（2）提取json中的数据

<script>
let jsonData = {
        id:42,
       status:'OK',
       data:[12,,4,5,6,73]
};
let{id,status,data} = jsonData;
consloe.log(id,status,data);//输出42，OK,[12,,4,5,6,73]
</script>

（3）设置函数的默认值

<script>
function gerJson({
          url,
          type='get',
          data='',
          async=true;
console.log(url,type,data,async);
})
getJson({
          url:'http://www.baidu.com',
          data:'a=100'
})
//输出http://www.baidu.com，get，a=100，true
</script>

（4）ES6模块(必须使用解构赋值)

读取module.js中变量值：

export var firstName="Zhang";

export var lastName="wang";

export var year="1999";

<script>
import{firstName,lastName,year} from './module.js';
console.log(firstName,lastName,year);
//输出Zhang,wang,1999
</script>

ES6-变量的解构赋值(数组、对象、特殊对象、实际用途)

猜你喜欢