We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
作者:Dmitri Pavlutin 译者:前端小智 来源:dmitripavlutin.com
作者:Dmitri Pavlutin
译者:前端小智
来源:dmitripavlutin.com
为了保证的可读性,本文采用意译而非直译。
想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!
通常交换两个变量的方法需要一个额外的临时变量,来看看例子:
let a = 1; let b = 2; let temp; temp = a; a = b; b = temp; a; // => 2 b; // => 1
temp是一个临时变量,它先保存a的值。然后把b的值赋值给a,接着将temp值赋给 b。
temp
a
b
如果使用解构的方式会更简单,不需要什么鬼的 temp 变量。
let a = 1; let b = 2; [a, b] = [b, a]; a; // => 2 b; // => 1
[a,b] = [b,a]是解构赋值,右边,创建了一个数组[b, a],即[2,1]。这个数组2被赋值了给a,1被赋值给了b。
[a,b] = [b,a]
[b, a]
[2,1]
2
虽然这种方式也创建了临时数组,但这种方式给看起来至少更简洁,使用解构咱们还可以交换2个以上的变量。
let zero = 2; let one = 1; let two = 0; [zero, one, two] = [two, one, zero]; zero; // => 0 one; // => 1 two; // => 2
有种场景,咱们可能有一个为空的项数组。并且希望访问数组的第一个、第二个或第n个项,但如果该项不存在,则使用指定默认值。
通常会使用数组的length属性来判断
length
const colors = []; let firstColor = 'white'; if (colors.length > 0) { firstColor = colors[0]; } firstColor; // => 'white'
使用数组解构,可以更简洁的实现同样的效果:
const colors = []; const [firstColor = 'white'] = colors; firstColor; // => 'white'
const [firstColor = 'white'] = colors 解构将colors数组的第一个元素赋给firstColor变量。如果数组在索引0处没有任何元素,则分配“white”默认值。
const [firstColor = 'white'] = colors
colors
firstColor
0
white
当然还可以更灵活,如果只想访问第二个元素,可以这么做。
const colors = []; const [, secondColor = 'black'] = colors; secondColor; // => 'black'
注意解构左侧的逗号:它表示忽略第一个元素,secondColor使用colors数组中索引为1的元素进行赋值。
secondColor
1
当我开始使用React和Redux时,被迫编写了一些遵守不可变性的代码。虽然一开始有些困难,但后来我看到了它的好处:更容易处理单向数据流。
React
Redux
不变性要求不能改变原始对象。幸运的是,解构可以以不可变的方式轻松实现某些操作。
const numbers = [1, 2, 3]; const [, ...fooNumbers] = numbers; fooNumbers; // => [2, 3] numbers; // => [1, 2, 3]
解构 [, ... fooNumbers] = numbers创建一个新的数组fooNumbers,fooNumbers 包含 numbers 元素,除了第一个元素。
[, ... fooNumbers] = numbers
fooNumbers
numbers
numbers 数组没有发生变化,保持操作不变性。
以同样不可变的方式,可以从对象中删除属性,接着试着从对象big中删除foo属性:
big
foo
const big = { foo: 'value Foo', bar: 'value Bar' }; const { foo, ...small } = big; small; // => { bar: 'value Bar' } big; // => { foo: 'value Foo', bar: 'value Bar' }
在前面几个例子中,对数组使用了解构,但是咱们可以对任何实现可迭代协议( iterable protocol)的对象进行解构。
许多原生基本类型和对象都是可迭代的: array, string, typed arrays, set 和 map。
array
string
typed arrays
set
map
如果不想局限于基本类型,通过实现可迭代协议,可以定制解构逻辑。
movies包含一个movie对象列表。在解构movies时,将title作为字符串获取是非常棒的。让咱们实现一个自定义迭代器。
movies
movie
title
const movies = { list: [ { title: 'Heat' }, { title: 'Interstellar' } ], [Symbol.iterator]() { let index = 0; return { next: () => { if (index < this.list.length) { const value = this.list[index++].title; return { value, done: false }; } return { done: true }; } }; } }; const [firstMovieTitle] = movies; console.log(firstMovieTitle); // => 'Heat'
movies对象通过定义Symbol.iterator方法来实现可迭代协议,迭代器迭代title。
Symbol.iterator
遵循iterable协议允许将movies对象分解为title,具体方法是读取第一个movies的title:const [firstMovieTitle] = movies。
const [firstMovieTitle] = movies
根据经验,通过属性对对象进行解构比数组解构更常见。
对象的解构看起来很更简单:
const movie = { title: 'Heat' }; const { title } = movie; title; // => 'Heat'
const {title} = movie创建一个变量title,并将属性movie.title的值赋给它。
const {title} = movie
movie.title
到对象解构时,我有点惊讶于咱们不必静态地知道属性名,可以使用动态属性名称来解构对象。
为了了解动态解构如何工作的,编写一个greet函数:
greet
function greet(obj, nameProp) { const { [nameProp]: name = 'Unknown' } = obj; return `Hello, ${name}!`; } greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!' greet({ }, 'name'); // => 'Hello, Unknown!'
使用2个参数调用greet() 函数:对象和属性名称。
greet()
在greet()内部,解构赋值const {[nameProp]:name ='Unknown'} = obj使用方括号的形式 [nameProp]读取动态属性名称,name变量接收动态属性值。
const {[nameProp]:name ='Unknown'} = obj
[nameProp]
name
更好的做法是,如果属性不存在,可以指定默认值“Unknown”。
Unknown
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/
干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
https://github.com/qq449245884/xiaozhi
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复福利,即可看到福利,你懂的。
The text was updated successfully, but these errors were encountered:
(1). const obj = { ...args, dog, cat, }; (2). const arr = [...args, 'dog', 'cat']; (3). const {dog, ...args} = {dog, cat, func}; (4). function cat(dog, cat, ...args){ console.log(args); }
Sorry, something went wrong.
No branches or pull requests
为了保证的可读性,本文采用意译而非直译。
想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!
1. 交换变量
通常交换两个变量的方法需要一个额外的临时变量,来看看例子:
temp
是一个临时变量,它先保存a
的值。然后把b
的值赋值给a
,接着将temp
值赋给b
。如果使用解构的方式会更简单,不需要什么鬼的
temp
变量。[a,b] = [b,a]
是解构赋值,右边,创建了一个数组[b, a]
,即[2,1]
。这个数组2
被赋值了给a
,1被赋值给了b
。虽然这种方式也创建了临时数组,但这种方式给看起来至少更简洁,使用解构咱们还可以交换
2
个以上的变量。2. 访问数组中元素
有种场景,咱们可能有一个为空的项数组。并且希望访问数组的第一个、第二个或第n个项,但如果该项不存在,则使用指定默认值。
通常会使用数组的
length
属性来判断使用数组解构,可以更简洁的实现同样的效果:
const [firstColor = 'white'] = colors
解构将colors
数组的第一个元素赋给firstColor
变量。如果数组在索引0
处没有任何元素,则分配“white
”默认值。当然还可以更灵活,如果只想访问第二个元素,可以这么做。
注意解构左侧的逗号:它表示忽略第一个元素,
secondColor
使用colors
数组中索引为1
的元素进行赋值。3.不可变操作
当我开始使用
React
和Redux
时,被迫编写了一些遵守不可变性的代码。虽然一开始有些困难,但后来我看到了它的好处:更容易处理单向数据流。不变性要求不能改变原始对象。幸运的是,解构可以以不可变的方式轻松实现某些操作。
解构
[, ... fooNumbers] = numbers
创建一个新的数组fooNumbers
,fooNumbers
包含numbers
元素,除了第一个元素。numbers
数组没有发生变化,保持操作不变性。以同样不可变的方式,可以从对象中删除属性,接着试着从对象
big
中删除foo
属性:4.解构 iterables
在前面几个例子中,对数组使用了解构,但是咱们可以对任何实现可迭代协议( iterable protocol)的对象进行解构。
许多原生基本类型和对象都是可迭代的:
array
,string
,typed arrays
,set
和map
。如果不想局限于基本类型,通过实现可迭代协议,可以定制解构逻辑。
movies
包含一个movie
对象列表。在解构movies
时,将title
作为字符串获取是非常棒的。让咱们实现一个自定义迭代器。movies
对象通过定义Symbol.iterator
方法来实现可迭代协议,迭代器迭代title
。遵循iterable协议允许将
movies
对象分解为title
,具体方法是读取第一个movies
的title
:const [firstMovieTitle] = movies
。5.解构动态属性
根据经验,通过属性对对象进行解构比数组解构更常见。
对象的解构看起来很更简单:
const {title} = movie
创建一个变量title
,并将属性movie.title
的值赋给它。到对象解构时,我有点惊讶于咱们不必静态地知道属性名,可以使用动态属性名称来解构对象。
为了了解动态解构如何工作的,编写一个
greet
函数:使用
2
个参数调用greet()
函数:对象和属性名称。在
greet()
内部,解构赋值const {[nameProp]:name ='Unknown'} = obj
使用方括号的形式[nameProp]
读取动态属性名称,name
变量接收动态属性值。更好的做法是,如果属性不存在,可以指定默认值“
Unknown
”。代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/
交流
干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复福利,即可看到福利,你懂的。
The text was updated successfully, but these errors were encountered: