JS ES6新增特性 —＞解构赋值

ES6新增特性 —>解构赋值

• 解构：按照数据模型取出数据源中的数据

• let { name } = user 右边的部分称为数据源，左边的部分称为数据模型

• 数据源一般是对象

• 优点：在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取，可以提高工作效率

基本使用

let user = { name: "小张", age: 18 }

{ name: username, age: userage } = user
//严格模式下 必须要 声明
let { name, age } = user //属性名与赋值的变量名相同可以更简洁

console.log(age)//18
console.log(username)//小张

简洁定义

对数组

let [,sex]=['小张','男'];
console.log(sex);//男

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据

let [a,b,c,d,e]="hello"
console.log(a,e,d,c,b)//hello

可以直接使用变量赋值对象属性

let name = "帅哥",age = 18;

//如果属性和值变量同名  可以写成以下简写形式
let user = { name, age };
//等同于 let user = { name: name, age: age };
console.log(user); //{name: '帅哥', age: 18}

多层对象嵌套解构

可以操作多层复杂数据结构

//一个老师对象中含有一个课程对象
const teacher = {
    name: '帅哥黄',
    lessons: {
        title: 'JS解构赋值',
        date: '2023-3-28'
    }
}
const { name, lessons: { title, date }, } = teacher;
console.log(name, title, date); //帅哥黄 JS解构赋值 2023-3-28

默认值

为变量设置默认值，当对象中有值时使用对象的值，没有则会使用默认值

let user = {
    name: '帅哥黄',
    age：18
}
let {age = "40"} = user
console.log(age);//18

使用默认值特性可以方便的对参数预设

默认值bug

若数据源的值一开始就是undefined就会触发默认值

但null不会

let obj={a:undefined}
let {a=10}=obj
console.log(a)//10

let obj={a:null}
let {a=10}=obj
console.log(a)//null

函数参数

数组参数的使用

function hd([a, b]) {
	console.log(a, b);//帅哥黄 男
}
hd(['帅哥黄', '男']);

对象参数使用方法

function hd( {name,sex,age=20} ) {
	console.log(name,sex,age);//帅哥黄 undefined 18
}
hd({name:'帅哥黄',age:18}); 

对象解构传参

function user(name, { sex: a, age: b }) {
    console.log(name, a, b);//帅哥黄 男 18
}
user("帅哥黄", { sex: "男", age: 18 });