使用结构赋值与扩展运算符,让你的代码更优雅
栏目: JavaScript · 发布时间: 5年前
内容简介:解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象类似数组的对象都有一个length对象,因此还可以对这个对象进行解构赋值
解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值
字符串的解构
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象
const [a,b,c,d,e] = hello; a //"h" b //"e" c //"l" d //"l" e //"o" 复制代码
类似数组的对象都有一个length对象,因此还可以对这个对象进行解构赋值
let {length:len} = "hello"; len //5 复制代码
变量的解构赋值
用途
(1)交换变量的值
let x = 1; let y = 2; [x,y] = [y,x]; console.log(x,y) //x=2,y=1; 复制代码
这样的写法不仅简洁,语义非常清晰。
(2)从函数返回多个值
函数只能反悔哦一个值,如果要返回多个值,只能将他们放在数组或对象中返回,有了解构赋值,取出这些值就非常方便
//返回一个数组 funlction example(){ return [1,2,3] } let [a.b,c] = example() 复制代码
(3)函数参数的定义
解构赋值可以方便的将一组参数与变量名对应起来
//参数是一组有次序的值 function f([x,y,z]){ ... } f([1,2,3]) //参数是一组无次序的值 function f({x,y,z}){ ... } f({Z:3,y:2,X:1}) 复制代码
(4)提取JSON数据
解构赋值对提取JSON中的数据尤其有用
let jsonData ={ id :42, status:"Ok", data:[874,125] } let {id,status,data:number0} = jsonData; 复制代码
(5)函数参数的默认值
JQuery.ajax = function(url,{ async = true , before = funkction(){}, cache = true }) { } 复制代码
指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || "default foo"这样的语句了
(6)遍历Map结构
任何部署了Iterator接口的对象,都可以用for..of循环遍历,Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常的方便
let map = new Map(); map.set('first','hello'); map.set('second','world'); for ( let [key,value] of map){ console.log(key,value) } 复制代码
如果只想获取键值或者键名可以写成下面这样
//获取键名 for( let [key] of map){ } //获取键值 for(let [,value] of map){ } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- C赋值运算符 – 编译器生成还是自定义?
- C/C++三元运算符实际上是否具有与赋值运算符相同的优先级?
- ES6—扩展运算符和rest运算符(6)
- Python 运算符
- Python算术运算符
- 004.Python运算符
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
CSS3 Solutions
Marco Casario / Apress / 2012-8-13 / GBP 35.50
CSS3 brings a mass of changes, additions, and improvements to CSS across a range of new modules. Web designers and developers now have a whole host of new techniques up their sleeves, from working wit......一起来看看 《CSS3 Solutions》 这本书的介绍吧!