ES6-解构赋值基本用法

mac2026-08-06  12

定义:解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

数组解构赋值 { let a,b,rest; [a,b]=[1,2]; console.log(a,b); //1 2 } //块级作用域分隔开 { let a,b,rest; [a,b,...rest]=[1,2,3,4,5,6]; console.log(a,b,rest); //1 2 [3,4,5,6] } 对象解构赋值 { let a,b; ({a,b}={a:1,b:2}); console.log(a,b); // 1 2 } 解构赋值默认参数 { let a,b,c,rest; [a,b,c=3]=[1,2]; //c报undefined //[a,b,c]=[1,2]; console.log(a,b,c); // 1 2 3 } 解构赋值适用场景——变量交换 { let a=1; let b=2; [a,b]=[b,a];//ES6中无需借助第三个变量 console.log(a,b);//2,1 } 解构赋值适用场景——取得函数返回值 { function f(){ return [1,2]; } let a,b; [a,b]=f(); console.log(a,b);//1,2 } 解构赋值适用场景——取指定数组参数 { function f(){ return [1,2,3,4,5]; } let a,b,c,d; [a,,,b] = f(); console.log(a,b); // 1 4 [c,,,,d] = f(); console.log(c,d); // 1 5 } 对象解构赋值 { let o={p:42,q:true}; let {p,q}=o; console.log(p,q);//42,true } 对象解构赋值–默认参数 { let {a=10,b=5}={a:3}; console.log(a,b);//3,5 } 对象解构赋值–模拟服务端JSON格式数据存取 { let metaDate={ title:'abc', test:[{ title:'test', desc:'description' }] } let {title:esTitle,test:[{title:cnTitle}]}=metaDate;//重点格式 console.log(esTitle,cnTitle); //abc test } 函数参数解构赋值–对象形式 { function sayName({firstName,lastName}){ console.log(firstName+","+lastName); } let person={ firstName:'Jack', lastName:'Mike' } sayName(person); //jack,Mike } 函数参数解构赋值–数组形式 { function f3([x,y,...z],...w){ console.log(x,y,z,w); } f3([]);//undefined,undefined,[],[] f3([1,2,3,4,5,6],7,8)//1,2,[3,4,5,6],[7,8] }
最新回复(0)