es6 变量的解构赋值,es5实现解构赋值,ES6 解构赋值的原理及运用

es6 变量的解构赋值,es5实现解构赋值,ES6 解构赋值的原理及运用

ES6允许你按照一定的模式从数组或者对象中提取值,然后给变量赋值,这就是所谓的解构。只要等号两边的模式相同,左边的变量就会被赋予相应的值。这种写法属于“模式匹配”。统称为“解构作业”。

目录

数组解构赋值对象解构赋值应用交换变量值

从函数中返回多个值。

遍历地图结构

参数的解构和赋值

数组的解构赋值

设[a,b,c]=[1,2,3]

同时定义多个变量,A匹配1,B匹配2,C匹配3。

解构允许指定默认值,即左边的变量指定默认值,右边没有对应的值,那么会先输出默认值。

设[x,y='b']=['a'] //x='a ',y='b '

匹配字符A和Y的默认值是字符b,如果右边没有对应的字符,则默认输出字符b。

对象的解构赋值

解构不仅可以用于数组,也可以用于对象。对象解构和数组之间有一个重要的区别。数组的元素按顺序排列,变量的值由其位置决定。但是,对象的属性没有顺序,变量必须与属性同名才能获得正确的值。

让{

姓名,

年龄,

爱好:[一,二]

}={

姓名:“白马寺郎”,

年龄:21,

爱好:['骑马','动漫']

}

比如我取age的值,改成abc的值,它就是未定义的,因为它和对象中的属性名不对应,不能相应赋值。

解构赋值的应用

交换变量值

想办法正常交换变量值。

设x=1,

y=2,

温度=0

温度=x //x=1=温度

x=y //y=2=x

y=温度//温度=1=y

console.log('x=',x)

console.log('y=',y)

使用解构赋值来交换变量

设x=1;

设y=2;

[x,y]=[y,x];

console.log('x=',x)

console.log('y=',y)

这样交换变量x和y的值,不仅写法简洁,而且易读,语义非常清晰。

从函数中返回多个值。

函数只能返回一个值。如果要返回多个值,只能在数组或对象中返回。有了解构赋值,就变得更方便了。

提取爱好数组中的第二个值

函数getArray() {

返回{

姓名:' kongsam ',

年龄:21,

爱好:['骑行','动漫','羽毛球']

}

}

Console.log(getArray()。名称“likes”get array()。爱好[1]) //动漫

使用解构赋值获得爱好数组中的第二个值

让{姓名,年龄,爱好}=getArray()

Console.log(name' likes '爱好[1]) //动漫

遍历地图结构

为了.在循环遍历中,被遍历的值是一个数组,而解构赋值可以对数组进行“模式匹配”,这样可以快速取出键值。

为.具有解构赋值的循环遍历非常便于获得键值。

for (let [key,value] of map) {

console.log('key=',key)

console.log('value=',value)

}

函数参数的解构赋值

//让{ x=10,y=5 }={}

函数f({ x=10,y=5 }={}) {

return [x,y]

}

console.log(f({ x: 100,y:50 })//[100,50]

console . log(f({ x:3 })//[3,5]

console . log(f({ })//[10,5]

console.log(f()) //[10,5]

您可以将对象传递给函数的参数,并且可以为传递的对象设置默认值。会被解构成函数来使用,你也可以这么理解。

函数f(x=10,y=5) {

return [x,y]

}

console.log(f(100,50)) //[100,50]

console.log(f(3)) //[3,5]

console.log(f()) //[10,5]

上面写的不一样,结果也会不一样。

函数f({ x,y }={ x: 10,y: 5 }) {

return [x,y]

}

console.log(f({ x: 100,y:50 })//[100,50]

console . log(f({ x:3 })//[3,未定义]

console . log(f({ })//[未定义,未定义]

console.log(f()) //[10,5]

第三次和第四次打印将没有定义。这是因为传入的X或Y与object属性中的值不对应,导致匹配失败。

以上是ES6解构作业原理及应用的详细内容。更多关于ES6解构作业的信息,请关注我们的其他相关文章!

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

相关文章阅读

  • es6语法菜鸟教程,babel转换es6原理
  • es6语法菜鸟教程,babel转换es6原理,利用babel将es6语法转es5的简单示例
  • ES6箭头函数,es6新特性箭头函数
  • ES6箭头函数,es6新特性箭头函数,关于ES6中的箭头函数超详细梳理
  • es6模板字符串怎么写样式,ES6中的模板字符串改变html
  • es6模板字符串怎么写样式,ES6中的模板字符串改变html,ES6之模版字符串的具体使用
  • es6数组扩展运算符,es6展开运算符,详解ES6 扩展运算符的使用与注意事项
  • es6定义数组,es6数组添加元素
  • es6定义数组,es6数组添加元素,ES6 新增的创建数组的方法(小结)
  • es6...运算符,es6 扩展运算符 三个点(...)
  • ,,es6数组的flat(),flatMap()函数用法实例分析
  • commonjs和es6的module的区别,ES6 Modules 相对于 CommonJS 的优势是什么-
  • es6数组和对象的方法,使用es6方式实现伪数组转数组
  • es6修改数组中的某一项,es6数组添加元素
  • es6 set内部实现,es6 set原理
  • 留言与评论(共有 条评论)
       
    验证码: