您现在的位置是:首页 > Javascript
当前栏目
Javascript 中的解构赋值语法
2023-03-09 22:12:11 时间
首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难,但实际上很容易学习和使用。
数组解构
数组解构非常简单。你所要做的就是为数组中的每个值声明一个变量。你可以定义更少的变量,而不是数组中的索引(即,如果你只想解处理前几个值),请跳过某些索引或甚至使用 REST 模式将所有剩余的值放到新数组中。
- const nums = [ 3, 6, 9, 12, 15 ];
- const [
- k, // k = 3
- l, // l = 6
- , // Skip a value (12)
- ...n // n = [12, 15]
- ] = nums;
对象解构
对象解构与数组解构非常相似,主要区别是可以按名称引用对象中的每个key,从而创建一个有相同名称的变量。此外还可以将键解构为新的变量名,只解构所需的 key,然后用 rest 模式将剩余的 key 解构为新对象。
- const obj = { a: 1, b: 2, c: 3, d: 4 };
- const {
- a, // a = 1
- c: d, // d = 3
- ...rest // rest = { b: 2, d: 4 }
- } = obj;
嵌套解构
嵌套对象和数组可以通过相同的规则来进行解构。区别在于可以将嵌套 key 或值直接解构为变量,而不必将父对象存储在变量本身中。
- const nested = { a: { b: 1, c: 2 }, d: [1, 2]};
- const {
- a: {
- b: f, // f = 1
- ...g // g = { c: 2 }
- },
- ...h // h = { d: [1, 2]}
- } = nested;
高级解构
由于数组的行为与对象相似,所以可以通过使用索引作为对象解构分配中的 key,用解构分配语法从数组中获取特定值。用这种方法还可以得到数组的其他属性(例如数组的 length)。最后,如果解构后的值是 undefined,则还可以为解构过程中的变量定义默认值。
- const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];
- const {
- 6: x, // x = 2
- 0: y, // y = 5
- 2: z, // z = 4
- length: count, // count = 7
- name = 'array', // name = 'array' (not present in arr)
- ...restData // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }
- } = arr;
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?