登录
原创

ES6-解构赋值

发布于 2021-09-29 阅读 105
  • 前端
  • ECMAScript 6
原创

解构赋值解释

按照一定模式,从数组和对象中提取值,对变量赋值

数组解构赋值

提取数组中的值,对变量赋值 传统方式- - -

let arr = ['苹果', '芒果', '榴莲']

let fruit1 = arr[0]
let fruit2 = arr[1]
let fruit3 = arr[2]

console.log(fruit1, fruit2, fruit3)

解构赋值方式- - -

let arr = ['苹果', '芒果', '榴莲']

let [fruit1, fruit2, fruit3] = arr

console.log(fruit1, fruit2, fruit3)

简化了代码,左边变量的结构要和右边赋值的数组结构一致

image.png

如果前面结构一致,后面左边变量没有再右边找到对应值,则该变量值为undefined

image.png

这种两边结构不一样的会报错:

image.png

对象解构赋值

旧的赋值方式- - -

let obj = {
    name: '史迪仔',
    age: 2
}

let name = obj.name
let age = obj.age

console.log(name, age);

对象解构赋值- - -

let obj = {
    name: '史迪仔',
    age: 2
}

let {name, age} = obj
/* 
// 等效于以下这句:
let {age, name} = obj */

console.log(name, age);

其中的变量名name, age是以对象的属性名为准,赋值时前后顺序无所谓,如果想要和属性名不一样的变量名,可以这样:

let {属性名1: 别名1, 属性名2: 别名2} 后面的别名就是变量名

image.png

变量名已经不是原来的属性名了,写以前属性名会报错:

image.png

字符串解构赋值

字符串当成数组处理:

image.png

评论区

零00
5粉丝

时光荏苒,我自清欢

0

0

0

举报