当前位置: 首页 > 科技观察

JavaScript中解构的5个有趣用法

时间:2023-03-15 14:05:21 科技观察

1.交换变量通常交换两个变量的方法需要额外的临时变量,我们来看例子:temp是一个临时变量,它首先保存了a的值。然后把b的值赋给a,再把temp的值赋给b。使用解构而不是一些该死的临时变量会更容易。[a,b]=[b,a]是一个解构赋值,右边创建了一个数组[b,a],即[2,1]。这个数组2赋给a,1赋给b。虽然这个方法也创建了一个临时数组,但是这个方法至少看起来更简洁,我们可以使用解构来交换两个以上的变量。2.有一个访问数组中元素的场景。我们可能有一个空的项目数组。并希望访问数组的第一个、第二个或第n个项目,但如果该项目不存在,则使用指定的默认值。通常使用数组的length属性来判断使用数组解构,可以更简洁的实现同样的效果:const[firstColor='white']=colorsdeconstruction将colors数组的第一个元素赋值给firstColor变量.如果数组在索引0处没有任何元素,则分配默认值“white”。当然,它可以更灵活。如果你只想访问第二个元素,你可以这样做。注意解构左边的逗号:表示忽略第一个元素,secondColor使用colors数组中索引为1的元素进行赋值。3.不可变操作当我开始使用React和Redux时,我被迫编写一些尊重不可变性的代码。一开始有点难,但后来我看到了好处:更容易处理单向数据流。不变性要求原始对象不能更改。幸运的是,解构使得以不可变的方式实现一些操作变得容易。解构[,...fooNumbers]=numbers创建一个新数组fooNumbers,fooNumbers包含numbers元素,除了第一个元素。numbers数组没有变化,保持了运算的不变性。同样不可变的方式,你可以从一个对象中删除一个属性,然后尝试从对象中删除foo属性big:4.解构可迭代对象在前面的几个例子中,我们对数组使用解构,但我们可以为任何实施。协议对象(可迭代协议)被解构。许多基本类型和对象都是可迭代的:数组、字符串、类型化数组、集合和映射。如果不想局限于原始类型,可以通过实现可迭代协议来自定义解构逻辑。电影包含电影对象列表。解构电影时,将标题作为字符串获取非常有用。让我们实现一个自定义迭代器。电影对象通过定义Symbol.iterator方法实现可迭代协议,迭代器迭代标题。遵循可迭代协议允许通过读取第一部电影的标题将电影对象分解为标题:const[firstMovieTitle]=movies。5.解构动态属性根据经验,通过属性解构对象比解构数组更常见。对象的解构看起来简单得多:const{title}=movie创建一个变量title并为其分配属性movie.title的值。说到对象解构,我有点惊讶我们不必静态地知道属性名,我们可以使用动态属性名来解构对象。要了解动态解构的工作原理,请编写一个greet函数:使用2个参数调用greet()函数:对象和属性名称。在greet()内部,解构赋值const{[nameProp]:name='Unknown'}=obj使用方括号[nameProp]读取动态属性名,name变量接收动态属性值。更好的是,如果属性不存在,您可以指定默认值“Unknown”。