使用结构赋值与扩展运算符,让你的代码更优雅

栏目: 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){
    
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

锦绣蓝图

锦绣蓝图

[美] 沃德科 (Christina Wodtke)、[美] 戈夫拉 (Austin Govella) / 蔡芳 / 人民邮电出版社 / 2009-11-01 / 59.00

Web 2.0和社会化大趋势下,你的网站发展喜人,但是问题也接踵而来:信息变得越来越庞杂无序,业务流程愈加复杂,搜索和导航越来越难,用户对使用体验的要求也越来越高……怎么办? 作者非常通俗易懂地讲述了如何规划易用的网站及其背后的信息架构原理。首先介绍了建立信息架构的八项基本原则,然后重点强调了组织系统和元数据在信息架构中的作用,并指出设计搜索和导航需要考虑的问题和方法,另外还补充了当今热门的......一起来看看 《锦绣蓝图》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换