ES6指北【6】——详谈解构赋值【附赠练习题】

sorra 发布于2019-08-23 11:33 / 1570人阅读

摘要：指北详谈解构赋值附赠练习题一何谓解构赋值基本概念首先我们看一下给的定义解构赋值语法是一个表达式，这使得可以将值从数组或属性从对象提取到不同的变量中从定义中，我们可以发现解构赋值的作用是对变量进行赋值主要通过两个方面实现这个作用数组将数组中的

ES6指北【6】——详谈解构赋值【附赠练习题】 一、何谓解构赋值？ 1. 基本概念

首先我们看一下MDN给的定义

解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中

从定义中，我们可以发现：
解构赋值的作用是对变量进行赋值
主要通过两个方面实现这个作用

数组【将数组中的值赋给变量】

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

对象【将对象中属性的值赋给变量】

let obj = {a: 0, b: 1, c: 2}
// es5我们想把obj的值给取出来非常麻烦，而且obj的属性过多的话，还要进行遍历
let a = obj.a
let b = obj.b
let c = obj.c
// es6通过解构赋值就会非常简单
let {a: a, b: b, c: c} = obj
// 对象键值相同，可以只写一个【ES6提供的语法糖】，所以我们还可以简写成下面这个样子
let {a, b, c} = obj
console.log(a, b, c) // 0 1 2

2. 模式匹配

很多初学者都很难理解的问题是左边是数组/对象，右边也是数组/对象，是怎么进行匹配的呢？

其实这是对解构赋值一个非常大的误解。解构赋值的本质是模式匹配——只要等号两边的模式相同，左边的变量就会被赋予对应的值
所以表达式的左边并不是数组/对象，而是变量的集合，只不过它的模式要与数组/对象相对应，这里要特别强调的是对象的模式匹配还要保持键名【key】相同

那么现在我们就可以重新定义一下解构赋值了：把一些东西解放出来【解构】，按照模式匹配对应地赋值给其它变量

当然，上述示例适合于普通的变量声明，工作中我们会遇到许多特殊情况，这就需要解构赋值的特殊用法了

二、解构赋值的常见特殊用法 1. 给部分变量赋值

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

// 不适用于对象

2. 设置默认值

这里类似于函数默认参数值【ES6指北4有讲解，感兴趣的朋友可以去看看】，先看个例子

// 数组
let [a, b, c, d] = [1, 2, 3]
console.log(d) // undefined
// 这里的d未被赋值，所以值为undefined
// 在这种情况我们可以像对函数参数设置默认值一样，对d也设置默认值
let [a, b, c, d = 4] = [1, 2, 3]
console.log(d) // 4

// 对象
let {a = {}, b = 1} = {a: undefined, b: 10}
console.log(a, b) // {} 10

3. 与函数返回值结合

// 数组
let f = () => [1, 2, 3]
let [a, b] = f()
console.log(a, b)

// 对象
let f = () => {
  return {a: 0, b: 1, c: 2}
}
let {a, b} = f()
console.log(a, b) // 0 1

4. 与rest参数结合

// 数组
let [a, ...args] = [10, 2, 3, 4, 5]
console.log(args) // [2, 3, 4, 5]
// 对象
let {a, ...args} = {a: 10, b: 5, c: 3}
console.log(args) // {b: 5, c: 3}

5. 与函数参数结合

// 对象
function test({x: y = 2}) {
  console.log(y)
}
// 等价于下面的形式
function test() {
  let {x: y = 2} = arguments[0]
  console.log(y)
}
// 这个时候你会发现，如果参数与结构赋值结合的话，等于对参数做出了数据类型【对象】的约束
// 比如，如果你传递的参数为字符串
test("asdf")
// 那么代码的逻辑是这样的
let {x: y = 2} = "asdf" // 模式不匹配，解构失败
// 那么自然会报错了

// 如果你希望传递其它数据类型不报错的话，也很简单，为参数添加默认值就行【默认值为对象】
function test({x: y = 2} = {}) {
  console.log(y)
}

// 数组
function test([a = 1, b = 2]) {
  console.log(a, b)
}

三、练习题 练习一

let obj = {a: 1, b: 2, c: {d: {e: 5}}}
let {a, b, c: {d}} = obj
console.log(d) // ?

练习二

function drawES2015Chart({size = "big", cords = {x: 0, y: 0}, radius = 25} = {}) {
  console.log(size, cords, radius);
}

drawES2015Chart() // ?
drawES2015Chart({size: "small", cords: {a: 1}, radius: {b: 1}}) // ?

GPU云服务器云服务器解构赋值 es6-系列指北入坑指北

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

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

ES6指北【1】——let、const

摘要：如何学习的学习顺序以此类推没学好就别想学好边学边用学了就要用变量声明的方式上面两个是的语法，下面两个是的语法块级作用域看会声明一个全局变量吗显然当声明了全局变量后，是无法再声明全局变量的，只能对其赋值结论含义不明的问题下面的代码不会执 1.如何学习ES6 1.1 js的学习顺序 ES5 -> ES6 -> ES7 -> ES8 以此类推 ES5没学好就别想学好ES6 1.2 边学边用 ...

张春雷 2019-08-26 11:45 评论0 收藏0
ES6指北【1】——let、const

摘要：如何学习的学习顺序以此类推没学好就别想学好边学边用学了就要用变量声明的方式上面两个是的语法，下面两个是的语法块级作用域看会声明一个全局变量吗显然当声明了全局变量后，是无法再声明全局变量的，只能对其赋值结论含义不明的问题下面的代码不会执 1.如何学习ES6 1.1 js的学习顺序 ES5 -> ES6 -> ES7 -> ES8 以此类推 ES5没学好就别想学好ES6 1.2 边学边用 ...

tain335 2019-08-01 18:35 评论0 收藏0
ES6指北【2】—— 箭头函数

摘要：箭头函数基本语法函数语法具名函数匿名函数三句话第一句话声明第二句话声明匿名函数第三句话把匿名函数赋值给箭头函数语法特点只能做赋值，不能做声明第一种写法完全写法不省略参数个数，不省略函数体花括号参数个数函数体内语句个数第二种写法省略参数括号参 1.箭头函数基本语法 1.1 ES3 函数语法 // 具名函数 function xxx(arg1, arg2) { console.lo...

DobbyKim 2019-08-22 14:57 评论0 收藏0
ES6，你不得不学！

摘要：但是，的本质仍然是函数，是构造函数的另外一种写法。报错原生构造函数的继承对于一些原生的构造函数，比如，，，等，在是无法通过方法实现原生函数的内部属性，原生函数内部的无法绑定，内部属性获得不了。在没有学习 ES6 之前，学习 React，真的是一件非常痛苦的事情。即使之前你对 ES5 有着很好的基础，包括闭包、函数、原型链和继承，但是 React 中已经普遍使用 ES6 的语法，包括 ...

CKJOKER 2019-08-21 11:16 评论0 收藏0
ES6常用知识点概述

摘要：那之前的例子来使用一下的话，你会发现浏览器报错了，如图定义的变量不允许二次修改。如图箭头函数没有它自己的值，箭头函数内的值继承自外围作用域。如图这里两边的结构没有一致，如果是的话，是可以正常解构的。前言国庆假期已过一半，来篇干货压压惊。 ES6，并不是一个新鲜的东西，ES7、ES8已经赶脚了。但是，东西不在于新，而在于总结。每个学前端的人，身边也必定有本阮老师的《ES6标准入门》或...

keithyau 2019-08-21 16:53 评论0 收藏0