大概总结一下解构的几种方式：
一、数组解构
1.基本用法：
let [a,b,c] = [1,2,3];
console.log(a)
console.log(b)
console.log(c)
// 2.数组模式和赋值模式统一：
// 可以简单的理解为等号左边和等号右边的形式要统一，如果不统一解构将失败。
let [d,[e,f],g] = [1,[2,3],4];
console.log(d)//1
console.log(e)//2
console.log(f)//3
console.log(g)//4
// 3.解构的默认值：
let [foo='aa'] = [];
console.log(foo);// 'aa'
// 4.null（有值，为空而已） 和 undefined(无值)
// 如果设置了默认值，后面设置值为undefined或者不赋值时候，解构为默认值，但如果
// 赋值为null，则解构为null（null也是一个结果，只是为空而已）
let [h,i='ye']=['amy',undefined];
console.log(h)// amy
console.log(i)// ye
let [j,k='ye']=['amy',null];
console.log(j)// amy
console.log(k)// null
// 5.lenght是字符串、数组的一个属性
let {length:len} = 'hello'
console.log(len)
2.对象的解构
// 对象解构不需要按顺序，只认对象名
let {foo,bar,ba} = {foo:'amy',bar:'ye',ba:{a:2,b:1}};
console.log(foo)
console.log(bar)
console.log(ba)
// 如先声明了，解构的时候必须加小括号，否则会报错
let foo1;
({foo1} = {foo1 :'111'});
console.log(foo1)
3.字符串解构
// 字符串解构
let [a,b,c,d,e,f] ='abcdef'
console.log(a)//a
console.log(b)//b
console.log(c)//c
console.log(d)//d
console.log(e)//e
console.log(f)//f
4.函数解构
// 1.对象的函数解构,可以直接获取对象的数据，不需要通过对象.属性来获取
let json = {
a:'amy',
b:'ye',
c:'11'
}
function fun({a,b}) { // 需要什么参数写在括号里面，与顺序无关
console.log(a) // 'amy'
console.log(b)//'ye'
}
fun(json)
// 2.数组的解构
let arr = ['amy','ye','qq'];
function ff(a,b,c) {
console.log(a) //'amy'
console.log(b)//'ye'
console.log(c)//'qq'
}
ff(...arr)
解构赋值应用场景
//1、交换变量值
let a=1;let b=2;
[a,b]=[b,a];
console.log(a)
console.log(b)
// 2、返回多个值
function f() {
return [1,2,3]
}
let [aa,bb,cc] = f();
console.log(aa)
console.log(bb)
console.log(cc)
// 3、返回多个对象
function f1() {
return{ff1:'111',ff2:'2222'}
}
let {ff1,ff2}=f1();
console.log(ff1)
console.log(ff2)
// 4.函数的定义
// 形式为数组
function arr([x,y,z]) {
console.log(x)
console.log(y)
console.log(z)
}
arr([1,2,3]);
// 形参为对象
function obj({a,b}) {
console.log(a)
console.log(b)
}
obj({a:'111',b:'222'})
// 5.提取json
let jsondata={
name:'amy',
age:18,
height:161
}
let {name,age,height} = jsondata;
console.log(name)
console.log(age)
console.log(height)
// 6.输入模块的指定方法
// 在加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumar, SourceNode } = require("source-map");
function aa() {
return{a:'111',b:'22',c:'3333'}
}
const {a,b} = aa();
console.log(a)
console.log(b)
更多应用
数组:
//1.获取数组指定的元素
let name = ['amy','molia','tom'];
let [a,b] = name;
console.log(a);// amy
console.log(b);//molia
//2.略过数组中的值
let name = ['amy','molia','tom'];
let [,b] = name;
console.log(b);//molia
// 3.把数组中剩下的部分赋值给变量(剩余符号)，只能放在最后，否则会报错
let name = ['amy','molia','tom'];
let [a,...other] = name;
console.log(a);//molia
console.log(other);//molia
4.获取对象中的player值
const rocketsTeam = {
name:'rockets',
players:[
{
name:'james harden',
age: 18,
role: 'sg'
},
{
name:'yao ming',
age: 12,
role: 'c'
}
],
city:'houston'
}
let {players:[a,b]} = rocketsTeam;
console.log(a)
console.log(b)
对象 ：
//1.从对象中解构值（基本用法）
const person = {
name:'Amy',
age:18,
factor:{
body:'beautiful'
}
}
let {name,age} = person;
console.log(name)//Amy
console.log(age)//18
// 2.解构嵌套的值
const person = {
name:'Amy',
age:18,
factor:{
body:'beautiful',
height:162
}
}
let {factor:{body}} = person;
console.log(body)//beautiful
// 3.给对象设置默认值
const person = {
name:'Amy',
age:18,
factor:{
body:'beautiful',
height:162
}
}
let {hometown='gx'} = person;
console.log(hometown)//gx
