🍉十分钟搞定解构赋值,你确定不来看看嘛~

简介: 🍉十分钟搞定解构赋值,你确定不来看看嘛~

本文主要是介绍了结构赋值的内容,每每看到解构赋值的内容,都会略有了解,但是很少有机会去学习解构赋值的所有知识,那么就让我带你把解构赋值的知识一网打尽(我全都要~)


一、数组的解构赋值


基本用法


// 为变量赋值
let [a,b,c] = [1,2,3];
a // 1
b // 2
c // 3
————————————————————————————
// 使用嵌套数组进行解构赋值
let [foo,[[bar],baz]] = [1,[[2],3]];
foo // 1
bar // 2
baz // 3
————————————————————————————
// 结构不成功的情况
let [foo] = [];
let [bar,foo] = [1];
// 以上两种情况foo的值都会等于undefined
复制代码


不完全解构


即等号左边的模式只匹配等号右边数组的一部分。这种情况下,解构依然可以成功。


// 不完全解构
let [x,y,z] = [1,2,3];
x // 1
y // 2
复制代码


报错的情况


如果等号的右边不是数组(或者严格地说,不是可遍历的结构,那么将会报错)


// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
// 报错的原因是因为等号右边的值,本身或者转为对象后不具备Iterator接口
复制代码


事实上,只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值,如Set结构,Generator函数等。


默认值


// 解构赋值允许指定默认值
let [foo = true] = [];
foo // true
[x,y = 'b'] = ['a'];
// x= 'a',y = 'b'
——————————————————————————————————————
/* ES6内部判断一个位置是否有值是根据‘===’判断的,如果一个数组成员不严格等于undefined
,默认值是不会生效的。*/
let [x=1]=[null];
x // null
// 如果一个数组成员是null,默认值就不会生效。
——————————————————————————————————————
// 默认值可以引用解构赋值的其他变量,但变量必须已经声明。
let [x = 1, y = x] = []; // x=1;y=1
let [x = 1, y = x] = [2]; // x=2;y=2
复制代码


二、 对象的解构赋值


基本用法


let {x , y} = {x:"aaa",y:"bbb"};
x // "aaa"
y // "bbb"
复制代码


对象的解构与数组有一个重要的不同。在数组中,变量的取值由它的位置决定,在对象中,变量必须与属性同名。


// 如果变量名与属性名不一致,必须写成下面这样。
let {x:z} = {x:"aaa",y:"bbb"};
z // "aaa"
/* 这种写法要注意:变量的声明和赋值是一体的,对于let和const而言,变量不能重新声明,
所以一旦复制的变量以前声明过,就会报错*/
let foo;
let {foo}={foo:1};
/* 因为JavaScript引擎会将{foo}理解成一个代码块从而发生语法错误,故报错,解决方法
就是不讲大括号写在行首*/
({foo}={foo:1})
复制代码


41b474abd7054bfeaf51daacd5a78571_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


默认值


// 对象的解构也可以指定默认值
let {x = 3} = {};
x // 3
let {x,y =5} = {x:1};
x // 1
y // 5
复制代码


三、 字符串的解构赋值


字符串也可以解构赋值,这是因为字符串被转换成了一个类似数组的对象。


基本用法


const [a,b,c,d,e,f] = 'juejin';
a // 'j'
b // 'u'
c // 'e'
d // 'j'
e // 'i'
f // 'n'
————————————————————————————————————
// 还可以对字符串的length进行解构赋值
let {length: len} = 'juejin';
len // 6
复制代码


四 、 数值和布尔值的解构赋值


解构赋值时,如果等号右边是数值或布尔值,则会先转为对象。


基本用法


let {toString:s} = 123;
s === Number.prototyupe.toString // true
/* 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象
由于undefined和null无法转为对象,所以会报错。*/
复制代码


五、 函数参数的解构赋值


函数的参数也可以解构赋值。


基本用法


function add([x,y]){
    return x + y;
}
add([1,2]) // 3
// 上面的代码中,函数add的参数实际上不是一个数组,而是通过解构赋值得到的变量x和y。
复制代码


默认值


函数参数的解构也可以使用默认值。


function move({x = 0, y = 0}) = {
        return [x,y];
}
move({x:3,y:8}); // [3,8]
move(); // [0,0]
// 如果解构赋值失败,则x和y等于默认值。
复制代码


六、 解构赋值的用途


敲黑板啦~学会的知识要会用才行哦。变量的解构赋值用途有很多,下面列举几个主要的。


交换变量的值


[x,y] = [y,x]
// 相比之前的写法,不用写临时变量啦,确实方便不少~
复制代码


从函数返回多个值


// 返回一个数组
function example() {
    return [1,2,3];
}
let [a,b,c] = example();
复制代码


提取JSON数据


解构赋值对提取JSON对象中的数据尤其有用。


let jsonData = {
    id:43,
    status:"OK",
    data:["loveyou","juejin"]
}
let {id,status,data:string} = jsonData;
console.log(id,status,string);
// 43 "OK"  ["loveyou", "juejin"]
复制代码


遍历Map结构


Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值非常方便。


let map = new Map();
map.set('first','loveyou')
map.set('first','juejin')
// 获取键名
for (let [key] of map){
    //...
}
// 获取键值
for (let [,value] of map){
    //...
}
复制代码


最后


⚽本文总结了解构赋值的语法以及用途~

⚾如果这篇文章对你有帮助的话,麻烦点赞收藏哟~

相关文章
|
JavaScript 开发者
Vue状态管理: 在Vuex中,什么是mutation?它们应该如何使用?
Vue状态管理: 在Vuex中,什么是mutation?它们应该如何使用?
860 4
|
Web App开发 前端开发
【前端异常】Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
【前端异常】Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
3125 0
|
人工智能 自然语言处理 Cloud Native
Bolt.diy 评测方案:从部署到创意实践的全方位探索
Bolt.diy 是阿里云推出的低代码开发平台,基于函数计算(FC)与百炼大模型服务构建。它通过自然语言交互、全栈开发支持及快速云端部署,让开发者和非技术人员能轻松实现创意落地。本文详细解析了 Bolt.diy 的部署流程、功能实践与应用场景,并结合测试案例探讨其价值与优化方向。无论是在教育、企业内部工具定制还是个人兴趣开发中,Bolt.diy 均展现出高效便捷的优势,但复杂业务需求仍需传统工具补充。未来,随着大模型能力升级,Bolt.diy 将进一步推动 AI 辅助开发的发展。
|
8月前
|
自然语言处理 前端开发 Windows
推荐一款很好用的VSCode变量翻译插件
本文介绍VSCode插件“var-translate-en”,可一键将中文翻译为英文并转为小驼峰等命名格式,支持百度、腾讯、阿里等翻译服务。通过简单配置与快捷键设置,提升变量命名效率,解决命名难题。
2434 0
|
10月前
|
人工智能 JSON 测试技术
告别重复“点点点”!基于Dify工作流,打造能思考、会决策的自主测试智能体
在敏捷与DevOps时代,传统测试难以跟上节奏。本文基于Dify.ai工作流,构建具备感知、决策与执行能力的自主测试智能体,突破脚本脆弱、路径僵化等瓶颈,实现AI驱动的智能化测试闭环,让测试从重复劳动升级为持续守护质量的智能探索。
|
JavaScript 小程序
微信小程序 - 调用自定义组件内部方法
微信小程序 - 调用自定义组件内部方法
1024 0
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
2002 1
|
SQL 监控 物联网
ClickHouse在物联网(IoT)中的应用:实时监控与分析
【10月更文挑战第27天】随着物联网(IoT)技术的快速发展,越来越多的设备被连接到互联网上,产生了海量的数据。这些数据不仅包含了设备的状态信息,还包括用户的使用习惯、环境参数等。如何高效地处理和分析这些数据,成为了一个重要的挑战。作为一位数据工程师,我在一个物联网项目中深入使用了ClickHouse,以下是我的经验和思考。
1199 0

热门文章

最新文章