es6新增——解构赋值

「爱情、让人受尽委屈。」 2023-06-29 10:41 6阅读 0赞

# 解构赋值 #

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，成为解构（Destructuring）。  
赋值运算符右侧是要解构的数组或对象，左侧是对应的模式和声明变量，表现形式为\[\]、\{\}

var arr = [1,2,3];
    var obj = {name : '李翠花'};
    let [a] = arr;
    let{name:b} = obj;
    console.log(a,b);//1,李翠花

let [a,b,c] = [1,2,3];  ==> let a = 1;
    							let b = 2;
    							let c = 3;
    							
    let [ , , c] = [1,2,3];//c:3

#### 解构赋值默认值 ####

解构赋值默认值生效的前提是：结构的内容严格等于undefined（===）；  
*undefined:声明未赋值，类型undefined*

let [a = 1,y = 0] = [];

var [x = f()] = [1] //x =1

function f(){
    console.log('测试')
    }
    var [x = f()] = [1] ;
    console.log(x);//undefined(函数没有返回值)

#### 对象解构赋值 ####

对象中键值一样时，可以简写

var obj = {
    title:'标题',
    brand = 'haha'
    };
    let {title:a,brand:b} = obj;
    console.log(a,b);//标题,haha

简化：

let {title,brand} = obj;  => let {title:title,brand:brand} = obj;
    console.log(title,brand);//标题,haha

(这里obj的值就相当于传到了后面的title和brand中，所以输出打印时可以获取到原本对象中的值)，也就是说title和brand既充当模式匹配

#### 字符串解构赋值 ####

const [a,b,c,d,e] = 'hello';//     a//h  b//e  c//l  d//l  e//o

#### 函数形参的解构赋值 ####

标准：

function fn({a,b = 0,c} = {}){
    	console.log(a,b,c);
    }
    fn();//undefined 0 undefined

(因为函数调用时没有传实参，走的是函数的默认值（形参），而此时形参=\{\}，undefined（解构赋值默认值生效），再次走默认值，所以最终输出决定权在\{a,b = 0,c\}，未赋值的都为undefined，a = undefined ,b = 0,c = undefined)

**函数形参的解构赋值优势**：  
与传统形参列表相比较  
1.可以有默认值；  
2.可以有缺省参数；  
3.可以打乱次序

还没有评论，来说两句吧...