js解构

前言

js中的解构,用起来非常舒服,实际上其也是js给我们做了转化的,实际上原理也非常的简单,系统自动给我们翻译了,相当于一个语法糖了

下面我们看看我们常使用的对象、数组是怎么翻译的吧

对象的解构

对象的解构,世界实际上就是直接调用对应的属性

js 复制代码
//解构对象
const person = {
  name: "帅哥",
  age: 20,
};
const { name, age } = person;
//相当于
const name = person.name
const age = person.age

上面代码也可以看出为啥解构一个空会报错了吧

数组的解构

数组的解构,则是通过迭代器,依次给对应位置的,如果不是可迭代对象,那么可想而知会报错了

js 复制代码
//解构数组
const names = ["person1", "person2"];
const [p1, p2] = names
//相当于
const iter = names[Symbol.iterator]() //获取迭代器对象
const p1 = iter.next().value //迭代第一个对象
const p2 = iter.next().value //迭代第二个参数

解构别名

对象解构别名自然就相当于通过key取值,将结果赋值给别名了,如果没别名,那就是原来的默认名字了

js 复制代码
//解构对象
const person = {
  name: "帅哥",
  age: 20,
};
const { name: name1 } = person;
//相当于
const name1 = person.name

数组则对key没有额外要求,就不多介绍了

总结

解构成对象,相当于取对应的key,解构成数组,则是对被解构对象进行迭代取值

显而易见,如果对数组解构成对象,那么可能为undefined,对象解构成数组,则可能直接报错,因为这个对象可能不是可迭代对象

举例:如果将一个字符串解构呢,会出现什么结果?

答:字符串属于可迭代对象,那么解构成数组,则正常解构,如果解构成对象,除非是字符串的属性,例如:length,否则可能返回函数、undefined等

那么如果解析数字 number 呢,相信你已经有了答案,只要跟着要解构成的类型走,则可以明显推理出结果,不能正常迭代或者返回undefined

最后

就介绍到这里了,一个小知识,仍然趣味无穷

相关推荐
子兮曰4 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰4 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万4 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝4 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95274 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大4 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师4 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学4 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端