JavaScript 解构赋值

张开发
• 2026/4/10 18:53:31 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

JavaScript 解构赋值
什么是解构赋值解构赋值是一种 JavaScript 表达式允许我们从数组或对象中提取数据并赋值给不同的变量。 解构赋值是 ES6 的强大特性可以简化代码。数组解构示例// 基本用法constarr[1,2,3];const[a,b,c]arr;console.log(a,b,c);// 1 2 3// 只解构部分元素const[first,second][10,20,30,40];console.log(first,second);// 10 20// 跳过某些元素const[x,,z][1,2,3];console.log(x,z);// 1 3// 设置默认值const[p5,q10][1];console.log(p,q);// 1 10q使用默认值// 剩余元素const[head,...tail][1,2,3,4,5];console.log(head);// 1console.log(tail);// [2, 3, 4, 5]// 变量交换经典用法letm1,n2;[m,n][n,m];console.log(m,n);// 2 1对象解构示例// 数组解构按位置const[a,b][1,2];// a1, b2// 对象解构按键名const{name,age}{name:小明,age:20};// name小明, age20嵌套解构// 嵌套数组const[first,[second,third]][1,[2,3]];console.log(first,second,third);// 1 2 3// 在函数参数中functiongetUser([id,{name,age}]){console.log(ID:${id}, 姓名:${name}, 年龄:${age});}getUser([1001,{name:小明,age:20}]);// 输出: ID: 1001, 姓名: 小明, 年龄: 20实际运用场景如一个函数返回多个值// 函数返回多个值functiongetMinMax(numbers){return[Math.min(...numbers),Math.max(...numbers)];}// 使用解构接收const[min,max]getMinMax([5,2,8,1,9]);console.log(最小值:${min}, 最大值:${max});解构赋值其实仅仅是个语法糖。它并没有为 JavaScript 添加新功能只是提供了一种更简洁、更直观的语法来实现已有的功能。

更多文章