js 对象解构赋值,javascript给数组赋值

　　本文已经给大家带来了一些关于javascript的知识，包括对象和数组的解构和赋值，包括数组解构，对象解构，函数参数分析等等。下面就来看看吧，希望对你有帮助。

　　【相关推荐：javascript视频教程，web前端】

　　对象和数组是JavaScript中最常用的两种数据结构。它们的共同特点是可以存储大量数据。

　　问题是，我们在传递和计算参数时，可能只需要对象和数组的部分内容，而不是整个对象/数组。

　　此时，您需要使用解构赋值来解包对象/数组，并获取其内部数据的一部分。这里将用一个案例来介绍解构赋值在编程中的应用。

数组解构

　　所谓数组解构，就是获取数组中一些有用的数据。举个栗子的例子：

　　Let arr=[first ， second] let [x，y]=arr//解构console.log(x，y)代码执行结果如下：

　　代码的内容非常简单，将数组的内容赋给两个变量，然后输出。

　　数组解构也可以用split函数，优雅高端：

　　设[x，y]= helloworld 。split () console.log (x，y)代码执行结果如下：

解构不改变原数组

　　解构也可以叫“解构作业”。它的本质是把一个数组的元素复制到变量中，所以原来的数组一点都没变。

　　Let [x，y]=arr//{1} let x=arr[0]/{2} let y=arr[1]上面代码中的{ 1 }和{ 2 }是完全等价的，只是解构赋值的方式更加简洁。

忽略数组元素

　　使用解构赋值时，如果想得到数组的第1个和第3个元素，但不想得到第2个元素，该怎么办？

　　举个栗子：

　　设[x，z]=[第一，第二，第三] console.log (x，z)代码执行结果如下：

　　这样，逗号被用来避免第二个元素。

可迭代对象使用解构

　　解构赋值不一定用在数组上，但可以用在任何可迭代对象上。例如：

　　Let [x，y，z]= xyz let [a，b，c]=newset ([a ， b ， c]) console.log (x，y，z) console.log (a，b，c)代码执行结果：

　　解构迭代右边的值，然后给左边的变量赋值。

赋值给任何变量

　　可以是解构赋值中=右侧的任意和迭代对象，左侧可以是任意可以赋值的变量，不限于简单变量。

　　举个栗子：

　　let country={ }；[country.name，country.desc]= chinabeautiful 。split( )console . log(country . name，country.desc)代码执行结果：

　　注意:第一行代码的分号必须加，否则会出错！可以详细了解《JavaScript语法构成》。

与.entries()方法结合

　　 Object.entries(obj)方法将返回对象obj的属性列表。我们也可以在这里使用解构语法：

　　让country={

　　名称：中国，

　　desc:一个美丽的国家 }for(let[k，v] of Object.entries(country)){

　　Console.log(k，v)}代码执行结果：

与Map结合

　　由于地图对象本身是迭代的，您可以直接使用for.语法与解构语法的结合：

　　let map=new Map()map.set(name ， China)map.set(desc ，美丽的国家)for(let [k，v of Map){

　　Console.log(k，v)}代码执行结果：

变量交换

　　有一种著名的解构赋值的技术，它交换两个变量的值：

　　设a=1；设b=2；[a，b]=[b，a] console.log (` a=$ {a}，b=$ {b } `)代码执行结果：

多余的元素

　　在执行解构赋值的过程中，有两种情况：

　　左边的元素比右边多，左边的值用undefined填充；右边的元素与左边的元素是多余的。忽略多余的项目，也可以用.收集；左侧多于右侧：

　　Let [a，b，c]= ab console.log (a，b，c)代码执行结果：

　　可以看出，最后一个变量C被赋予了一个未定义的值。

　　我们还可以将默认值分配给冗余的左侧变量，例如：

　　设[a=0，b=0，c=0]= ab console.log (c)代码执行结果如下：

　　右侧多于左侧：

　　设[a，b]=abcdconsole.log(a，b)代码执行结果如下：

　　这里没什么好解释的。

　　但是如果想得到其他元素，应该怎么做呢？

　　例子如下：

　　让[a，b，others]= abcdefg console . log(others)代码执行结果：

　　在这里，变量others收集了所有剩余的选项。他人可以是任何合法的变量名，不限于他人本身。

对象解构

　　解构语法也用于对象，但语法略有不同：

　　设{var1，var2}={.}比如：

　　让country={

　　名称：中国，

　　desc:‘漂亮’}；让{姓名，desc}=国家；console.log(名称，desc)代码的执行结果：

　　* *注：* *此处变量的顺序没有影响。我们还可以交换姓名和desc的位置，例如：

　　让{desc，名字}=国家；代码的执行结果没有变化。

属性变量映射

　　当然，我们也可以指定变量和属性的映射，比如：

　　让country={

　　名称：中国，

　　Desc:美丽 }//对应的规则：{对象属性：目标变量} let {姓名：desc，desc:姓名}=国家；Console.log(`姓名：$ {姓名}，desc: $ {desc } `)代码执行结果：

　　就这样，我们强行交换了变量和属性之间的映射方法。也许下面的例子更直观：

　　让obj={

　　x:小明，

　　y:18}let {x:name，y:age }=obj；Console.log (` name: $ {name}，age: $ {age } `)代码执行结果：

默认值

　　和数组一样，我们也可以用=来指定变量的默认值。

　　例子如下：

　　让obj={

　　姓名：小明，

　　年龄：18}let {name=小红，年龄=19，身高=180}=obj

　　console.log(高度)代码的执行结果：

　　这样，即使对象没有对应的属性，我们也可以用默认值来代替。

　　我们还可以组合映射和默认值：

　　让obj={

　　x:小明，

　　y: 18 }设{x:name=xxx ，y:age=18，height:height=180 }=obj；Console.log(`姓名：$ {name}，年龄：$ {age}，高度：$ {height } `)代码执行结果：

多余的属性

　　像数组一样，我们可以获取对象的一些属性：

　　让obj={

　　x:x ，

　　y:y ，

　　z:z}let {x:name}=obj

　　Console.log(名称)我们也可以使用.要将剩余属性重新打包到新对象中，请执行以下操作：

　　让obj={

　　x:x ，

　　y:y ，

　　z: z }让{x，其他}=对象

　　console.log(其他)代码的执行结果：

let陷阱

　　可能童鞋已经找到了。当我们使用解构时，我们总是将一个对象赋给一个由let新定义的变量，例如：let {.}=obj。

　　如果我们使用现有的对象会发生什么？

　　设a，b，c；//定义三个变量{a，b，c}={a: a ，b: b ，c: c} console.log (a，b，c)。代码执行结果如下：

　　为什么会出现这种错误？

　　这是因为JavaScript需要{.}在主代码流中作为一个代码块，这是一个独立的代码空间，用于对语句进行分组。

　　案例如下：

　　{

　　设a=1；

　　设b=2；

　　.}上例中的{a，b，c}被误认为是这样的代码块。要告诉引擎这不是代码块，我们可以这样做：

　　设a，b，c；//定义三个变量({a，b，c}={a:a ，b:b ，c:c})//括号console.log(a，b，c)代码执行结果如下：

多层解析

　　如果对象是嵌套的，我们也可以使用相应的嵌套层次来解决它：

　　让人={

　　负责人：{

　　左眼：“乐”，

　　右眼：“热”

　　},

　　手：[左手，右手]，

　　其他：其他 }let {

　　负责人：{

　　左眼，

　　rightEye }，

　　手：[左手，右手]，

　　其他}=人；Console.log(leftEye，right_hand)代码执行结果：

函数参数解析

　　在某些情况下，一个函数需要很多参数，这不仅使程记忆困难，也使代码冗长。

　　例如：

　　函数createWin(title=Untitled ，width=100，height=200，items=[]){

　　.}这种情况下，调用函数会非常困难。更让人苦恼的是，通常情况下，这些参数只需要默认保存，我们还得花大力气重写。就像这样：

　　CreateWin (title= untitled ，width=100，height=200，items=[i ， j ， k])解构和赋值可以帮助我们解决这些问题。我们可以将对象传递给函数，函数会自动将对象解析成参数：

　　let options={

　　标题：“新赢”，

　　宽度：200，

　　身高：100，

　　Items:[items1 ， items2]}//传入的对象将被解析为以下参数样式。//相当于{title= untitled ，width=100，height=200，items=[]}=options function create win({ title= untitled ，width=100)

　　Console.log (` title: $ {title}，width: $ {width}，height: $ {height}，items:[$ { items }]`)} create win(options)//只需要传递一个对象[相关推荐：javascript视频教程，web前端]。以上是对JavaScript对象和数组的基本解构和赋值的详细说明。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。