ES6数据解构

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,解构的本质属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。

1.数组解构

等号左边的变量放到中括号内部,匹配右侧数组中的元素。

1.let a,b,c=1,2,3;

console.log(a,b,c);

2.let a,b,c,d,e=1,2,3,\[4,5,6];

console.log(a,b,c,d,e);

3.不完全解构

let a,b,c,\[d,e]=1,2,3,\[4,5,6,7];

console.log(a,b,c,d,e);

4.集合解构 ...扩展运算符

let a,...b=1,2,3,4,5;

console.log(a,b);

5.默认值解构(当匹配值严格等于undefined时,默认值生效)

let a=1,b=2,c=3=4,5,6;

console.log(a,b,c);

let a=1,b=2,c=3=\[\];

console.log(a,b,c);

6.默认值也可以是函数

function test(){console.log('hello')}

let a=test()=1;

console.log(a);

let a=test()=\[\];

console.log(a);

7.let arr=1,2,3,4;

let ...a=arr;

console.log(a===arr);//false

2.对象解构

等号左边的变量放到大括号内部,匹配右侧对象中的元素。对象的属性没有次序,变量必须与属性同名,才能取到正确的值

1.let {foo,bar}={foo:'hello',bar:"world"};

console.log(foo,bar);

2.如果变量名和属性名不一致,需要重命名

let {foo:baz}={foo:"hello",bar:"world"}; baz:hello

3.对象的解构赋值是下面形式的简写 前面属性名后边变量名

let {foo:foo,bar:bar}={foo:'hello',bar:"world"};

4.嵌套结构

let obj={p:'hello',{y:"world"}};

let {p:a,{y:b}}=obj;

console.log(a,b);hello world

5.默认值结构

let {x:y=3}={};

console.log(y);3

经典面试题:

const a, b, c, ...d = 1, 2, 3, 11, 999;

const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };

console.log(a, b, c, d, e, f1, g, h);

3.字符串解构

1.可以使用对象解构或者是数组解构,使用数组结构可以获取指定字符;使用对象结构可以获取实例属性方法;

let a,b,c='hello';

console.log(a,b,c);h e l

2.也可以将string字符串转换为数组

let ...arr='hello';

console.log(arr);

3.使用对象解构

let {toString,valueOf,length}='hello';//相当于把'hello'当成String基本包装器类型

console.log(toString,valueOf,length)

4.数值解构 可以获取到数值包装器构造函数原型中指定的方法。

let {toString,valueOf}=10;

console.log(toString,valueOf)

5.布尔值解构

let {toString,valueOf}=true;

console.log(toString,valueOf);

相关推荐
Csvn7 分钟前
微前端架构
前端
Linux-lucky2 小时前
45-Linux学习之旅之防火墙与WEB加固
linux·前端·网络·学习·ubuntu
风骏时光牛马4 小时前
生成一个移动端标题,只需要一个标题,不需要其他的任何文本。
前端
IT_陈寒4 小时前
Redis雪崩把我坑惨了,这是5年经验的教训
前端·人工智能·后端
SameX4 小时前
HarmonyOS ArkUI List 的侧滑删除 用 ListItem 的 swipeAction + endIcon 的做法
前端
usdoc文档预览7 小时前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
用户2705077725247 小时前
Agent 调工具卡住?3 种超时与取消策略实测对比
前端
LuHang8 小时前
我一行代码没写,把领导派的活做成了公司内部系统😭
前端
明月_清风8 小时前
Meta 开源了一个 AI Native 组件库:Astryx,150+ React 组件,专为 AI Agent 而设计
前端·人工智能·ai编程
用户850869276158 小时前
秒杀系统中 Shell 脚本并发控制 Bug:究竟哪里出了
前端