《深入理解ES6》笔记——解构:使数据访问更便捷(5)
解构,一种黑魔法
解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。
下面的代码你可能无法在浏览器上实时测试,推荐在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 <h1>{a}-{b}</h1>
}
}
ReactDOM.render(
<Parent a="1" b="2" />,
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
总结
本章讲解了对象解构赋值和数组解构赋值,以及对象和数组混合情况下的解构赋值操作,最后一个知识点是解构函数的参数。每一个都是重点,特别是最后一个,解构参数恐怕你经常在用了,只是通常你没发现。
原文地址:https://www.cnblogs.com/jlfw/p/12877862.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 2-14 |“特殊”的日子,多学一种表达爱的方式
- 盘一盘Tidyverse| 只要你要只要我有-filter 筛选行
- RNA相互作用神器——ENCORI
- R|tableone 快速绘制文章“表一”-基线特征三线表
- R-apply| 基因表达量批量二分类,Get!(修正版)
- TCGAbiolinks获取癌症临床信息
- R-rbind.fill|列数不一致的多个数据集“智能”合并,Get!
- R-ggpmisc|回归曲线添加回归方程,R2,方差表,香不香?
- 靶场测试Writeup编写框架
- 搭建本地 HTTPS 环境
- JavaScript时钟
- 网址导航
- Ceph CSI 3.0.0 发布了!
- 自然语言处理——词频统计
- 如何让两个线程“系鞋带"