ES6解析赋值
创始人
2024-02-17 18:36:31

ES6中新增了一种数据处理方式,可以将数组和对象的值提取出来对变量进行赋值,这个过程时将一个数据结构分解成更小的部分,称之为解析。

1.对象解析赋值:

在ES5中,要将一个对象的属性提取出来,需要经过一下几个过程。

        const user={name:'Zhangsan',age:30}const name=user.name;const age=user.age;console.log(name+'-'+age);

先定义一个user对象,并为其name属性和age属性赋予初值,然后分别定义name和age两个变量,从user对象中获取对应的属性值给变量赋值,最后将变量name和age的值从控制台中输出。这样做法在ES5中是一种非常普通的做法,但在ES6中,还可以将其进行进一步简化为下面这段代码:

        const user={name:'Zhangsan',age:30}//改进const {name,age}=user;console.log(name+'-'+age);

执行结果:

 将变量声明在大括号中,直接将对象渎职给这个声明变量,ES6会很根据对象的属性名与变量名进行匹配,只有变量和属性同名,才能正确赋值。如果将变量name修改成Name,例如下面这段代码:

const {Name,age}=user;

这样ES6将无法获取到对应的属性name的值,因为属性名与变量名的首字母不同,此时的Name应该是undefined。

2.数组解析赋值

解构另一个常用的地方是数组,利用解构可以非常方便地将数组中地值依次赋值给多个变量。例如下面这段代码:

let fn=()=>["张三",30,'北京'];
let [name,age,address]=fn();
console.log(`${name}-${age}-${address}`);

这段代码首先先声明一个箭头函数,该函数用来返回一个数组,数组中有三个值,然后声明三个变量,并将其放置在一个数组中,用于接收箭头函数地返回值。执行这段代码后,控制台中输出“张三-30-北京”,也就是说,函数返回值依次赋给对应地变量。

数组地解构与对象地解构模式不同,对象解构过程中,只要变量名和属性名相同就可以解构成功,而数组解构过程中,是根据变量地顺序依次解构数组中地值。如果等号左边的数组中变量的个数大于等号右边数组的个数,那么左边多余的变量会被解构成undefined。例如下面这段代码:

 let fn=()=>["张三",30];let [name,age,address]=fn();console.log(`${name}-${age}-${address}`);

执行结果如下:

 另一种就是,如果等号左边的数组中的变量个数少于右边数组中值的个数,那么所有的变量会依次赋值。例如下面代码:

let fn=()=>["张三",30,'北京'];
let [name,age]=fn();
console.log(`${name}-${age}`);

执行结果如下:

 3.字符串解构赋值

因为字符串是由一个个字符组成类似数组的对象,所以可以对字符串进行解构赋值。例如下面这段代码:

 const [a,b,c,d,e]='hello';console.log(`${a}-${b}-${c}-${d}-${e}`);

执行结果如下:

 执行这段代码后,字符串hello被分解成5个单独的字符,并分别赋值给变量a,b,c,d,e。

另外还有一个特殊的解构方式,是对字符串的长度属性进行解构。例如下面这段代码:

let {length:len}="hello";
console.log(len);

控制台输出的结果如下:

 

相关内容

热门资讯

埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...