es6解构赋值一学就会

目录

一 解构对象

1 单层对象

 2 深层对象

 3 解构赋值修改对象属性的名字

 二 解构数组

1 按顺序解构数组

 2 乱序解构数组

---

一 解构对象

1 单层对象

 一般写法

import React from "react";


const obj={
    name:"梨轻巧",
    age:22,
    hobby:"eat"
}

const name= obj.name
const age= obj.age
const hobby= obj.hobby

console.log(name,age,hobby)

es6解构赋值写法

 控制台

 2 深层对象

对象嵌套对象的解构赋值

import React from "react";


const obj={
    name:"梨轻巧",
    age:22,
    hobby:"eat",
    eatWhat:{
        fruit:"melon",
        meat:"fish",
        vegetables:"菜苔"
    }
}

const{name,age,hobby,eatWhat:{fruit,meat,vegetables}}=obj;

console.log(name,age,hobby+":"+fruit,meat,vegetables)

 控制台

 3 解构赋值修改对象属性的名字

修改之后新的名字是nickname

 

 二 解构数组

1 按顺序解构数组

一般写法

const arr = [1,2,3]
const a = arr[0]
const b = arr[1]
const c = arr[2]
console.log(a,b,c)

es6解构赋值写法

const arr = [1,2,3]
const [a,b,c] = arr
console.log(a,b,c)

控制台

 2 乱序解构数组

数组也是对象,把数据在数组里的顺序(数组下标)当成key, 数组里的值当成value 使用

// 0:"春",
// 1:"夏",
// 2:"秋",
// 3:"冬"
const arr = ["春","夏","秋","冬"]
const {3:a,1:b}= arr
console.log(a,b)

控制台