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);

相关推荐
云飞云共享云桌面几秒前
SolidWorks如何实现多人共享
服务器·前端·数据库·人工智能·3d
晚霞的不甘1 分钟前
Flutter for OpenHarmony《智慧字典》 App 底部导航栏深度解析:构建多页面应用的核心骨架
前端·经验分享·flutter·ui·前端框架·知识图谱
h7ml2 分钟前
电商返利系统中佣金计算的幂等性保障与对账补偿机制实现
服务器·前端·php
EndingCoder3 分钟前
高级项目:构建一个 CLI 工具
大数据·开发语言·前端·javascript·elasticsearch·搜索引擎·typescript
RFCEO7 分钟前
HTML元素+网页布局区块概念汇总表
前端·html·html编程基础课·html元素汇总表·html元素位置展示
Dawndddddd16 分钟前
XSS知识点总结
前端·xss
风之舞_yjf21 分钟前
Vue基础(26)_单文件组件
前端·vue.js
weixin_4222013022 分钟前
Element Plus中el-tree组件默认选中第一个节点的实现方法
前端·javascript·vue.js
_OP_CHEN22 分钟前
【前端开发之CSS】(六)CSS 弹性布局(Flex)完全指南:从入门到精通,搞定所有布局需求
前端·css·html·flex布局·弹性布局·界面美化·页面开发
雄狮少年24 分钟前
简单react agent(没有抽象成基类、子类,直接用)--- langgraph workflow版 ------demo1
前端·python·react.js