《深入理解ES6》笔记——解构：使数据访问更便捷（5）

cheukyin 发布于2019-08-05 11:38 / 2240人阅读

摘要：解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。总结本章讲解了对象解构赋值和数组解构赋值，以及对象和数组混合情况下的解构赋值操作，最后一个知识点是解构函数的参数。

解构，一种黑魔法

解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。

下面的代码你可能无法在浏览器上实时测试，推荐在babel官网在线测试代码：在线测试ES6代码网址

解构的分类

1、对象解构

2、数组解构

3、混合解构

4、解构参数

对象解构

对象解构简单的例子

let obj = {
  a: 1,
  b: [1, 2]
}
// 对象解构
const { a, b } = obj
console.log(a, b) //1  [1, 2]

在函数中使用解构赋值

解构是将对象或者数组的元素一个个提取出来，而赋值是给元素赋值，解构赋值的作用就是给对象或者数组的元素赋值。

在调用test()函数的时候，我们给参数设置了默认值3，如果不重新赋值，则打印出3,3，但是进行解构赋值后，将props对象的参数解构赋值给a和b，所以打印结果是{a: 1, b: 2}

let props = {
  a: 1,
  b: 2
}
function test(value) {
  console.log(value)
}
test({a=3, b=3} = props) // {a: 1, b: 2}

下面这个例子定义了a = 3,b = 3两个变量，现在我们想修改这2个变量的值，采用解构赋值的方式可以这样做：定义一个props对象，该对象包含2个属性a和b，然后进行解构赋值，这时就能更新变量a和b的value。

let props = {
  a: 1,
  b: 2
},
a = 3,
b = 3;
//解构赋值
({ a, b } = props)
console.log(a, b) // 1, 2

在react的父子组件传递参数过程中，也使用到了解构赋值。react demo在线测试

class Parent extends React.Component {
  render() {
    const {a = 3, b = 3} = this.props
    return {a}-{b}
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
);
//在浏览器渲染 1-2，默认值是 3-3，但是因为传递了新的props进来，执行了解构赋值之后a和b更新了。

嵌套对象解构

当对象层次较深时，你也可以解构出来。

let obj = {
  a: {
    b: {
      c: 5
    }
  }
}
const {a: {b}} = obj
console.log(b.c) // 5

数组解构

数组解构比对象解构简单，因为数组只有数组字面量，不需要像对象一个使用key属性。

数组解构
你可以选择性的解构元素，不需要解构的元素就使用逗号代替。

let arr = [1, 2, 3]

//解构前2个元素
const [a, b] = arr
console.log(a,b) //1 2

//解构中间的元素
const [, b,] = arr
console.log(b) // 2

解构赋值
如果你没有看明白上面说到的对象解构赋值的含义，那么看完下面的数组解构赋值，或许你会有比较清晰的理解。

这个例子中，正常情况下打印a的值是haha，但是将数组arr的第一个元素解构赋值给a，a的值就变成了1。

//初始化一个变量a
let a = "haha";
//定义一个数组
let arr = [1, 2, 3];
//解构赋值a，将arr数组的第一个元素解构赋值给a，
[a] = arr;
console.log(a); // 1

使用解构赋值，还可以调换2个变量的值。

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

嵌套数组解构

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

//实际解构过程，左边的变量和右边的数组元素一一对应下标。
var a = arr[0],
_arr$ = arr[1],
b = _arr$[1];

不定元素解构
三个点的解构赋值必须放在所有解构元素的最末尾，否则报错。

let arr = [1, 2, 3, 4];
let [...a] = arr;
console.log(a) //[1,2,3,4] 这种做法就是克隆arr数组。

混合解构

混合解构指的是对象和数组混合起来，执行解构操作，没什么难度。

let obj = {
  a: {
    id: 1
  },
  b: [2, 3]
}

const {
  a: {id},
  b:[...arr]
} = obj;
console.log(id, arr) //id = 1, arr = [2, 3]

解构参数

当给函数传递参数时，我们可以对每个参数进行解构，我给option的参数设置了默认值，这样可以防止没有给option传参导致的报错情况。

function Ajax(url, options) {
  const {timeout = 0, jsonp = true} = options
  console.log(url, timeout, jsonp)
};
Ajax("baidu.com", {
  timeout: 1000,
  jsonp: false
}) // "baidu.com" 1000 false

总结

本章讲解了对象解构赋值和数组解构赋值，以及对象和数组混合情况下的解构赋值操作，最后一个知识点是解构函数的参数。每一个都是重点，特别是最后一个，解构参数恐怕你经常在用了，只是通常你没发现。

=> 返回文章目录

服务器托管 idc机房托管深入理解系列深入理解linux 深入理解webrtc 深入理解python

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

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

《深入理解ES6》笔记——解构：使数据访问更便捷（5）

摘要：解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。总结本章讲解了对象解构赋值和数组解构赋值，以及对象和数组混合情况下的解构赋值操作，最后一个知识点是解构函数的参数。解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。下面的代码你可能无法在浏览器上实时测试，推荐在babel官网在线测试代码：在线测试ES6代码...

Drinkey 2019-08-20 18:06 评论0 收藏0
深入理解ES6笔记（五）解构：使访问数据更便捷

摘要：当冒号右侧存在花括号时，表示目标被嵌套在对象的更深一层中。在对象的嵌套解构中同样能为本地变量使用不同的名称提取数组解构结构赋值基本忽略一些选项重新赋值默认值数组解构赋值同样允许在数组任意位置指定默认值。主要知识点：对象解构、数组解构、混合解构以及参数解构showImg(https://segmentfault.com/img/bVbfWgH?w=1020&h=585); 《深入理解...

_DangJin 2019-08-26 12:19 评论0 收藏0
《深入理解ES6》笔记——导读

摘要：最近买了深入理解的书籍来看，为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序，作为一个粉丝，还是挺看好这本书能给我带来一个新的升华，而且本书的作者也非常厉害。使用ES6开发已经有1年多了，以前看的是阮一峰老师的ES6教程，也看过MDN文档的ES6语法介绍。最近买了《深入理解ES6》的书籍来看，为什么学习ES6这么久还要买这本书呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 评论0 收藏0
《深入理解ES6》笔记——导读

摘要：最近买了深入理解的书籍来看，为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序，作为一个粉丝，还是挺看好这本书能给我带来一个新的升华，而且本书的作者也非常厉害。使用ES6开发已经有1年多了，以前看的是阮一峰老师的ES6教程，也看过MDN文档的ES6语法介绍。最近买了《深入理解ES6》的书籍来看，为什么学习ES6这么久还要买这本书呢？主要是看到Daniel A...

wupengyu 2019-08-05 11:37 评论0 收藏0
ES6学习之 -- 解构（使数据访问更便捷）

摘要：数组的解构赋值规定允许按照一定模式，从数组和对象中提取值对变量进行赋值，我们称之为解构。的规则是，只要有可能导致解构的歧义，就不得使用圆括号。数组的解构赋值 ES6规定：允许按照一定模式，从数组和对象中提取值对变量进行赋值，我们称之为解构。以前赋值只能直接指定值 let a = 1; let b = 2; let c = 3; ES6允许以下这种做法 let [a, b, c] = ...

mrcode 2019-08-21 18:32 评论0 收藏0