javascript 解构

在没学习ES6之前我获取对象或数组中的值一般是这样操作的:

假设有一个对象

var obj ={
    name:"小八",
    age:"18",
    Arr:["吃饭","睡觉"]
}
//ES6之前获取属性
var _Arr=obj.Arr;

var _name=obj.name;

确实简单明了，但是感觉有点笨，每一次获取一个值就要定义一次。那学了解构以后呢就会发现原来这样更爽,上代码加测试的结果

数组解构：

//声明数组
let Arr=[1,2,3,4,5];

//获取数组中某个索引的值
let [a,b,c]=Arr;  //a=1,b=2.c=3;  模式匹配

//现如果让你有就传值没有就传默认值用解构如何实现?

//按照往常的写法
var arr=[1,2];
let a=arr[3]||10  //很明显索引3不存在输出10

//解构的方法
let [a=10,b=10,c=10]=arr;   //如果C匹配到则输出数组原有的数据，没有则输出默认值

let [a=10,b=10]=[1,undefined]; //输出 a=1,b=10

let [a=10,b=10]=[null,undefined]  //输出a=null,b=10;

对象解构：

//声明一个对象
var obj={
    name:"小八",
    age:18,
    Arr:["吃饭","睡觉"]
}
//通常获取对象中的某个属性
var _name=obj.name;    var _age=obj.age;   //这样的代码好看吗？非常不优雅

//使用对象解构
let {name,age,Arr}=obj;  //name="小八"，age=18,Arr=[]

//如果在项目中出现太多相同的名字怕会造成污染可以用别名的方式

let {name:_name,age:_age,Arr:_Arr} =obj; //当你需要调用obj中的那么则直接调用_name;

//默认值

let {name:_name="小八八"}=obj;  //如果不存在可直接输出name="小八八"

函数参数解构;

//数组传参解构
let  Num=[2,6];
function age([x,y]){
    console.log(x+y);
}
age(Num)
//输出8

//对象传参解构
let obj2={name:"小八",age:3};
function age({name:_name,age:_age}){
    console.log(`我叫${_name},今年${_age}岁`);
}
age(obj2)
//输出 我叫小八,今年3岁

//除上以外还可以直接以参数的形式传

function arr2([x,y]){
    console.log(x+y);
}
arr2([1,2]) //输出3


function arr2([x:2,y]){
    console.log(x+y);
}
arr2([,2]) //输出4

function obj({x:3,y:3}={}){
    console.log(x+y);
}

obj({x:2,y:1})  //结果等同于 {x:3,y:3}={x:2,y:1}  所以结果为3
obj({,y:1})     //{x:3,y:3}={x:undefined,y:1}  结果为3+1=4

猜你喜欢