javascript es6中关于解构赋值的基础使用及定义说明

解构赋值在如今的前端代码中经常被应用及见到,但对于部分开发人员来说可能还不知道什么是解构赋值。

跟随本篇文章来详细了解关于解构赋值在数组和json数据中应用吧。

解构赋值的定义:

    解构赋值是对赋值运算符的扩展。

    他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

    在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。

解构赋值的两部分组成:

    解构的源,解构赋值表达式的右边部分。

    解构的目标,解构赋值表达式的左边部分。

一、数组中解构赋值的应用:

       1、完全解构:

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

从上方三个案例可以看出:完全解构模式即左右两侧每个值都是相互对应模式。

    2、不完全解构

let [a=1,b] = []
//a = 1;
//b = undefined
let [a,...b] = [1,2,3]
//a = 1
//b = [2,3]

从案例可知,不完全解构相对于完全解构其更加灵活变化也相对于完全解构更多。


二、json数据的解构赋值

    基础使用

let {a,b} = {a:1,b:2}
//a = 1
//b = 2

let {a:b} = {a:1}
//b = 1
//a is not defined

let {a,...b} = {a:1,b:2,c:3}
//a = 1
//b = {b:2,c:3}

let {a:a1 = 0,b} = {a:1,b:2}
//a1 = 1
//b = 2


六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!