ES6入门之变量的解构赋值

gityuan 发布于2019-08-23 16:51 / 3339人阅读

摘要：数组的解构赋值基本用法允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为结构。如下以上都会报错但是如果左边为数组，右边为字符串，将会取字符串的第一个下标的值对于结构，同样可以使用数组的解构赋值。

数组的解构赋值 基本用法

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为结构。

在ES6之前想要为变量赋值，只能指定其值，如下：

let a = 1;
let b = 2

而在ES6中可以写成这样，如下：

let [a,b] = [1,2]
// a = 1, b = 2

值得注意的是，等式两边的值要对等，这样左边的变量才会被赋上右边对应的值，如果不对等左边的值将会出现undefined，如下写法：

let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3

注意：只有左右两边的 格式一定要对等，数量可以不对等。

let [a,b,c] = [1,2]
a = 1, b = 2, c = undefined

let [a,,c] = [1,2,3]
a = 1, c = 3

let [a, ...b] = [1,2,3]
a = 1, b = [2,3]

let [a] = []
let [b,a] = [1]
a = undefined

还有一种情况，等号左边为数组，但是等号右边为其他值，将会报错。如下：

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

以上都会报错

但是如果左边为数组，右边为字符串，将会取字符串的第一个下标的值

let [a] = "121321"  a = "1"
let [a] = "adgasg"  a = "a"

对于Set结构，同样可以使用数组的解构赋值。

let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3

默认值

解构赋值允许指定默认值

let [a = 3] = []        // a:3
let [a = 3,b] = [,4]    // a:3 b:4
let [a = 3,b] = [5,4]   // a:5 b:4

特殊

let [a = 3] = [undefined]   // a:3
let [a = 3] = [null]        // a:null

Tips: 在es6中使用严格相等运算符，在结构赋值中如果需要默认值生效，则应对等的值为undefined的时候才会采用默认值，否则还是使用赋值。上面中null 不严格等于undefined++

如果默认值的赋值为一个表达式，只有当等号右边的赋值没有值为undefined的时候，才会取表达式中的值，如下：

function demo(){
    console.log("demo")
}

let [a = demo()] = []   // a: demo
let [a = demo()] = [1]  // a : 1

对象的解构赋值

与数组的不同点是，数组的元素必须和赋值的元素要位置一致才能正确的赋值，而对象的解构赋值则是等号两边的变量和属性同名即可取到正确的值。否则值为 undefined

let {a,b} = {a:"23",b:"3"}
let {a,b} = {b:"3",a:"23"}

// 上面两个的值 都是 a: 23 b: 3

let {a,b} = {a:"3",c:"d"}
//a: 3 b: undefined

对象的解构赋值还有将某一个现有对象的方法赋值到一个新的变量，如下：

let {sin,cos} = Math
// Math 中的sin cos 方法将赋值给变量 sin cos

let {log} = console
// log(2)  ===  console.log(2)

如果等号左边的变量名不能和等号右边的对象的属性名一致，则必须写成如下格式：

let {a:b} = {a:"ss"}     // b：ss
//a是属性名，b才是实际赋值的变量名

对象的解构赋值一样是可以嵌套解构的，如下：

第一种：

let obj = {
    p:[
        "Hello",
        {y:"world"}
    ]
}

let {p:[x,{y}]} = obj 
// x: Hello, y: world

这边的p只是属性不是变量，如果p想赋值可以写成：

let {p,:[x,{y}]} = obj

第二种：
const a = {
    loc: {
        t :1,
        b :{
            c:1,
            d:2    
        }
    }
}
let {loc:{t,b:{c,d}}} = a
或者
let {loc,loc:{t,b,b:{c,d}}} = a

嵌套赋值

let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]

如果解构模式是嵌套的对象，如果子对象所在的父属性不存在，则会报错，如下：

let {foo:{bar}} = {baz:"baz"} //报错

默认值

let {x = 3} = {}
// x: 3

let {x,y = 5} = {x : 1}
// x: 1, y: 5

let {x: y = 5} = {}
// y = 5

let {x: y = 5} = {x : 4}
// y = 4

let {x: y = "hhhh"} = {}
//y = "hhhh"

Tips:以上左边 x为属性名，y为变量


let {x = 5} = {x: undefined}
// x: 5

let {x = 4} = {x: null}
// x: null

同数组一样遵循 严格等于 
只有右边为undefined的时候默认值才会生效

注意点：

1）不能将已声明的变量用于解构赋值，因为已经是一个代码块。

字符串的解构赋值

如果赋值的对象是数组，字符串将被分割为数组的格式，一一对应赋值

let [a,b] = "ha"
// a = h , b = a

同时可以获得字符串的长度：

let {length:len} = "12121"
// len = 5

数值和布尔值的解构赋值

如果等号右边是数字或者布尔值 则转换成对象或者说，除了是数组和对象，其他值都将转换成对象，null 和 undefined 除外。如下：

let {t:s} = 123
let {t: s} = true

函数参数的解构赋值

function add([x,y]){
    return x+y
}
add([3,5]) // 8

[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13

function m({x=3, y=4} = {}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
m({x:32})         // [32,4]
m({})             // [3,4]
m()               // [3,4]

function m({x,y} = {x=0,y=0}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
// 代替右边的 x:0, y:0 所以是传值 33  8

m({x:32})         // [32,undefined]
//因为传值替代右边的赋值，但是只有x没有y
//所以y是取   左边y的默认值，因为你没有赋值 为undefined

m({})             // [undefined,undefined] 
// 取左边x,y的默认值，因为没有赋值 为undefined

m()               // [0,0]
// 没有传值，使用本身的赋值 都是0

其他 不能使用圆括号的情况

变量声明语句

函数参数

赋值语句的模式

可以使用圆括号的情况

赋值语句的非模式部分，可以使用圆括号

解构赋值的用途

交换变量的值

从函数返回多个值

函数参数的定义

提取JOSN数据

函数参数的默认值

遍历Map结构

输入模块的指定方法

欢迎关注 公众号【小夭同学】

ES6入门系列

ES6入门之let、cont

云服务器服务器托管解构赋值 php的变量赋值 php 赋值类的变量 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103410.html

带你入门 JavaScript ES6 (一)

摘要：是国际组织于年月日发布的第六版，正式名为通常被成为或。二模版字面量提供一种简单实现表达式嵌套的字符串字面量操作，简而言之就是能够以简单的方法实现字符串拼接操作。本文同步带你入门 JavaScript ES6 (一)，转载请注明出处。 ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版，正式名为 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 评论0 收藏0
JavaScript基础之ES6对象解构赋值

摘要：具体的分析暂时不讨论解决的方式很简单，把上面的代码块变成一段表达式就小明总结解构赋值是提供一个十分方便的表达式。的解构赋值小明的对象赋值这里可以被赋予初始值小明对象的属性不存在能够赋值给多个变量对象解构赋值 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。 --- 阮一峰《ECMAScript...

sutaking 2019-08-22 15:31 评论0 收藏0
ES6入门之函数的扩展

摘要：如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。等同于等同于注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行尾调用优化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函数参数的默认值 1.1 用法在ES6之前是不能为...

dackel 2019-08-02 16:15 评论0 收藏0
ES6入门之函数的扩展

摘要：如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。等同于等同于注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行尾调用优化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函数参数的默认值 1.1 用法在ES6之前是不能为...

graf 2019-08-23 17:10 评论0 收藏0
新手快速学习ES6语法,用最快的速度入门ES6就看这里

摘要：的作用域与命令相同只在声明所在的块级作用域内有效。数值和布尔值的解构赋值解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。上面代码中，数值和布尔值的包装对象都有属性，因此变量都能取到值。默认值解构赋值允许指定默认值。最近正在学习ES6,对于ES6的语法有一些自己的理解, 想写这篇文章帮助跟我一样的新手快速入门ES6而不至于连代码都看不懂. 至于开发环境的搭建什么...

vspiders 2019-08-20 16:50 评论0 收藏0