JavaScript中解构的五种使用方法

读取对象属性和访问数组项是常见的操作。销毁分配使这些操作变得越来越简单。在本文中，除了基本用法之外，我还将介绍JavaScript中五种有趣的解构用法。

1.交换变量通常，交换两个变量的方法需要一个额外的临时变量。让我们看看这个例子:

设a = 1；设b = 2；let temptemp = a；a = b；b = tempa .// =>。2b；// =>。1temp是一个临时变量，它保存第一个。然后把B的值赋给a，再把temp的值赋给B..

更容易解构，也不需要该死的temp变量。

设a = 1；设b = 2；。这个数组2分配给A，1分配给b。

虽然这个方法也创建了临时数组，但看起来至少更简单，我们可以通过解构来交换两个以上的变量。

设零= 2；设一= 1；设二= 0；[零，一，二]=[二，一，零]；零；// =>。0one// =>。1two// =>。22.有一个访问数组中元素的场景。我们可能有一个空的项目数组。并且您想要访问数组的第一个、第二个或第n个项，但是如果该项不存在，则使用指定的默认值。

数组的长度属性通常用于确定

const colors =[]；让firstColor = & # 39白色& # 39；；if(colors . length & gt；0){ First COlOr = colors；} firstColor// =>。'白色& # 39；使用数组解构可以更简洁地达到同样的效果:

const colors =[]；const[First COlOr = & # 39；白色& # 39；] =颜色；firstColor// =>。'白色& # 39；const[First COlOr = & # 39；白色& # 39；] = colors解构将颜色数组的第一个元素分配给firstColor变量。如果数组在索引0处没有任何元素，则分配默认值“白色”。

当然可以更灵活。如果您只想访问第二个元素，您可以这样做。

const colors =[]；const [，secondColor = & # 39黑色& # 39；] =颜色；secondColor// =>。'黑色& # 39；注意解构左边的逗号:表示忽略第一个元素，secondColor使用colors数组中索引为1的元素赋值。

3.不变性操作当我开始使用React和Redux的时候，我被迫写一些符合不变性的代码。虽然一开始很难，但后来我看到了它的优势:处理单向数据流更容易。

不变性要求原物不能改变。幸运的是，解构可以以不可变的方式轻松实现某些操作。

const numbers = [1，2，3]；const [，...foo numbers]= numbers；fooNumbers// =>。[2，3]数字；// =>。[1，2，3]解构[，...fooNumbers] = Numbers创建一个新的数组fooNumbers，其中包含除第一个以外的numbers元素。

数字数组没有改变，操作保持不变。

以同样不可变的方式，您可以从对象中删除属性，然后尝试从对象big中删除foo属性:

const big = { foo:& # 39；价值Foo & # 39，bar:& # 39；价值栏& # 39；};const { foo，...小} =大；小；// =>。{ bar:& # 39；价值栏& # 39；}大；// =>。{ foo:& # 39；价值Foo & # 39，bar:& # 39；价值栏& # 39；}4.解构可迭代在前面的例子中，数组被解构了，但是我们可以解构任何实现可迭代协议的对象。

许多原生基本类型和对象是迭代的:数组、字符串、类型化数组、集合和映射。

如果不想局限于基本类型，可以通过实现迭代协议来定制解构逻辑。

电影包含电影对象列表。解构电影的时候，以字符串的形式得到片名是很棒的。让我们实现一个自定义迭代器。

const movies = { list:[{ title:& # 39；热度& # 39；}，{ title:& # 39；星际& # 39；} ]，[symbol . iterator](){ let index = 0；返回{ next: () =>。{ if(index & lt；this . list . length){ const value = this . list[index++]。标题；返回{ value，done:false }；}返回{ done:true }；} };}};const [firstMovieTitle] =电影；console . log(First movietitle)；// =>。'热度& # 39；电影对象通过定义符号迭代器方法来实现迭代协议，迭代器迭代标题。

遵循可迭代协议允许通过读取第一部电影的标题将电影对象分解为标题:const [firstmovietitle] = movies。

5.动态属性的解构根据经验，通过属性解构对象比数组解构更常见。

物体的解构似乎简单得多:

const movie = { title:& # 39；热度& # 39；};const { title } =电影；标题；// =>。'热度& # 39；Const {title} = movie创建一个变量title，并将属性movie.title的值赋给它。

说到对象解构，我有点惊讶，我们不用静态的知道属性名，可以用动态的属性名来解构对象。

为了理解动态解构是如何工作的，写一个问候函数:

函数greet(obj，NameProp){ const {[NameProp]:name = & # 39；未知& # 39；} = obj返回“您好，${name}！`;}问候({ name:& # 39；蝙蝠侠& # 39；}, '名称& # 39；);// =>。'你好，蝙蝠侠！'问候({ }，& # 39；名称& # 39；);// =>。'你好，无名！'用两个参数调用greet()函数:对象名和属性名。

在greet()内，解构赋值常量{[name prop]:name = & # 39；未知& # 39；} = obj读取方括号中的动态属性名，name变量接收动态属性值。

更好的是，如果属性不存在，可以指定默认值“未知”。

6.结论如果要访问对象属性和数组项，那么解构是很有用的。

除了基本用法，数组析构函数还可以方便地交换变量，访问数组项，执行一些不可变的操作。

JavaScript提供了更大的可能性，因为您可以使用迭代器来定义自定义析构器逻辑。

原地址:https://dmitravlutin . com/5-有趣-用途-JavaScript-析构/

有关编程的更多知识，请访问:编程学习！！以上是JavaScript中五种解构方法的细节，还有更多