es6基础0x008：解构赋值

xiaoxiaozi 发布于2019-08-23 13:07 / 1378人阅读

摘要：概述实不相瞒，解构赋值非常叼，特别是和其他一起使用的时候，那如何简单的说解构赋值呢，打个比方解构赋值就是一个硬币拆分机，将所有的一毛五毛一块硬币投入硬币拆分机，他就自动将所有的硬币分好了，拿出你要的就行了解构数组可以从一个数组从取出你想要的

0x000 概述

实不相瞒，解构赋值非常叼，特别是和其他es6一起使用的时候，那如何简单的说解构赋值呢，打个比方：解构赋值就是一个硬币拆分机，将所有的一毛、五毛、一块硬币投入硬币拆分机，他就自动将所有的硬币分好了，拿出你要的就行了！

0x001 解构数组

可以从一个数组从取出你想要的一个数据或者一组数据

普通

let [a, b, c]=[1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

和剩余参数一起用

let [a, b, ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5]

省略一些参数

let [a, , ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(c) // [3,4,5]

参数不够

let [a, b, c]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

参数不够又不想要undefined，可以使用默认参数

let [a, b, c=3]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

对已有变量解构赋值

let a, b
[a, b]=[1,2]
console.log(a, b)// 1,2

0x002 有趣的数组解构栗子

交换两个变量

let a=1,b=2
[a, b]=[b, a]
console.log(a) // 2
console.log(b) // 1

获取一个正则匹配的结果

let [,match]="hello world".match(/h(e)/) 
// 匹配的结果是 ["he", "e", index: 0, input: "hello world", groups: undefined]

console.log(match) // "e"

0x003 解构对象

可以从对象中取出对象的一个属性值，或者一个子对象

普通

let {a, b}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2

剩余属性

let {a,...b}={a:1,b:2,c:3}
console.log(a) // 1
console.log(b) // {b:2,c:3}

属性不够

let {a, b, c}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

属性不够可以使用默认参数

let {a, b, c=3}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

给新的变量赋值

let {a:aa, b:bb}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2

给新的变量赋值并提供默认值

let {a:aa, b:bb, c:cc=3}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2
console.log(cc) // 3

很深的对象也可以解构

let {name, books:[book]}={name:"haha",books:["book1"]}
console.log(name) // "haha"
console.log(book) // "book1"

迭代中的解构

for(let {name} of [{name:1},{name:2}]){
    console.log(name) // 1 2
}

解构函数形参

let register({name, pwd}){
    console.log(name, pwd)
}
register({name:"1",pwd:"2"}) //1,2

给已有变量赋值，比较特殊

let a,b
({a, b}={a:1,b:2}) // 需要提升优先级，否则 {a, b} 会被解析成代码块
console.log(a, b)// 1, 2

GPU云服务器云服务器解构赋值对象解构解构函数 ES6

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

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

JavaScript基础之ES6对象解构赋值

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

sutaking 2019-08-22 15:31 评论0 收藏0
ES6基础知识01(let,const,解构赋值)

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值对象的属性没有次序，变量必须与属性同名。 ES6 新增特性整理讲解新增命令 1.let命令 ES6新增了let命令，用来声明变量。它的用法类似于var，但是也存在新的特性。 - **let所声明的变量，只在le...

MSchumi 2019-08-22 17:36 评论0 收藏0
ES6基础知识01(let,const,解构赋值)

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值对象的属性没有次序，变量必须与属性同名。 ES6 新增特性整理讲解新增命令 1.let命令 ES6新增了let命令，用来声明变量。它的用法类似于var，但是也存在新的特性。 - **let所声明的变量，只在le...

Gilbertat 2019-08-02 10:34 评论0 收藏0
ES6基础

一、块级作用域 1. var 首先看看ES5中得变量声明方式 if (true) { var a = 2 } console.log(a) // 2 以上代码等同于 var a if (true) { a = 2 } console.log(a) 以上可知：在块内部定义变量变量提升，到函数最顶部通过var声明的变量，无论在何处声明，均为全局作用域 2.let 和 ...

BigTomato 2019-08-23 16:57 评论0 收藏0