es6解构赋值重命名

.calin.

已于 2022-03-29 00:00:39 修改

阅读量1.8k

点赞数

分类专栏： vue，JavaScript 文章标签： javascript

于 2021-10-03 17:15:52 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45104740/article/details/120596418

版权

vue，JavaScript 专栏收录该内容

14 篇文章

订阅专栏

var a = {
   te: “hao”,
};
var { te } = a;
var { te: bb } = a;

console.log(te);   // hao
console.log(bb);  // hao

可用于简化命名和避免命名重复

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

.calin.

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ES6中的导出和重命名使用方法

ByteJolt的博客

10-04

247

导出（Exporting）是指将模块中的函数、类、变量等内容暴露给其他模块使用。而重命名（Renaming）允许我们在导出时给内容起一个新的名称，这在避免命名冲突或提供更直观的接口时非常有用。通过使用这些语法，我们可以更好地组织和管理模块化的JavaScript代码，并且在模块之间传递需要的函数、变量和对象。在上面的例子中，我们分别使用默认导出导出了一个函数和一个对象。在其他模块中导入这些默认导出的内容时，可以使用任意的名称。这使得在模块化的JavaScript应用程序中，我们可以更好地组织和管理代码。

ES6连续解构赋值重命名

yidianyuanzhidong的博客

06-09

696

es6支持连续解构赋值且重命名 let person={stu1:{stu2:{ name:"小三"}}} let {person:{stu1:{stu2}}}=obj console.log(stu2) //小三 //改变属性名 let {person:{stu1:{stu2:stu3}}}=obj console.log(stu3) //小三多重对象嵌套即可使用，简写书写 ...

参与评论您还未登录，请先登录后发表或查看评论

Es6连续解构赋值+重命名

小怪獸丶的糖的专栏

11-28

954

let obj={a:{b:'土豆'}} const{a:{b:name}}=obj console.log(name) //这个name即为重命名以后的值

ES6中的解构赋值+重命名

qq_44850230的博客

07-04

1271

es6解析结构赋值+重命名

es6之解构赋值详解

weixin_45031595的博客

08-17

315

一、数组的解构赋值 //ES6方法：结构一致，一一对应 let [name,age] = ["zhangsan", 18]; console.log(name,age); let [x,[y,z]] = [7, [8, 9]]; console.log(l,m,n); //不完全提取 let [,,height] = ["zhangsan", 18,180]; 二、字符串的解构赋值 let [a...

ES6 解构赋值详解

修己xj的博客

06-22

758

ES6的解构赋值为JavaScript带来了更多的灵活性和可读性，使得我们能够更优雅地处理数据。无论是处理数组、对象，还是在函数参数中使用，解构赋值都能让我们的代码更加简洁和易于维护。掌握好这一特性，对于提升JavaScript编程能力是非常重要的一步。

ES6+ 解构赋值

很酷的站长的博客

01-03

286

本节我们会学习到 ES6 中的解构赋值语法，它是 JavaScript 中的一种表达式。什么是解构赋值数组的解构赋值对象的解构赋值如何解构嵌套对象和数组解构赋值就是分解一个数据的结构，并从这数据解构中提取数据的过程，它可以从数组中取出值赋给变量或是将对象中的属性提取出来赋给另一个对象的属性。解构的目的是为了简化提取数据的过程，增强代码的可读性。把变量放在[]或者{}中来获取目标对象上的对应的值。

ES6知识点整理之对象解构赋值应用示例

12-10

本文实例讲述了ES6知识点整理之对象解构赋值应用。分享给大家供大家参考，具体如下： ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）, 在对象的解构赋值中有一些需要...

07 ES6的解构赋值

gt8011的博客

07-21

522

ES6（ECMAScript 2015）引入了解构赋值（Destructuring assignment）的概念，它允许我们以一种简洁的方式从数组或对象中提取值，并赋值给变量。

详解ES6 export default 和 import语句中的解构赋值

10-16

在ES6中，`export default` 和 `import` 语句中的解构赋值是现代JavaScript模块系统的重要组成部分。它们允许我们更简洁、更灵活地组织和使用代码。以下是关于这些概念的详细解释： 1. **`export default`**： - ...

ES6-解构赋值

weixin_47745553的博客

12-10

521

结论：上面说到如果参数多值少，那就没有值与之对应返回undefined，那我们就可以给他设置一个默认值，返回的就是默认的值，当有值与之对应的时候就返回解构的值。解构赋值就说照葫芦画瓢，右侧的数据是什么样的结构，左侧就是同样的结构，拿对应位置上的数据。当我们两个对象中有同样的属性名，我们都需要对其进行解构那变量名就撞了需要给他们命其他名。结论：没有位置与之对应，声明变量，没有赋值，默认值undefined。2、如果获取不存在属性名，没有解构成功，变量是undefined。结论：不需要数据可以跳过忽略的！

ES6新特性：变量的解构赋值

孙悟空

10-27

2516

介绍了ES6新特性之变量的解构赋值，包括数组的解构赋值和对象的解构赋值。

ES6-新特性详解 - 解构赋值

yuanfgbb的博客

08-20

227

学习 es6 的解构语法，了解其中的技术细节

es6对象解构赋值重命名及函数解构

qq_37734787的博客

11-14

9502

var cc = { te: “ni”, }; var { te } = cc; var { te: bb } = cc; console.log(te);//ni console.log(bb);//ni

{}解构赋值以及重命名使用

jieweiwujie的博客

10-11

306

【代码】{}解构赋值以及重命名使用。

ES6 对象的解构赋值

m0_64355119的博客

04-21

634

【代码】ES6-03 对象的解构赋值。

ES6 let注意点、解构（重命名、默认值、解构给已有变量、多层解构）、模块化（注意点、导入导出语法）、对象属性扩展写法

AIWWY的博客

07-01

2914

目录 let注意点解构 重命名 默认值解构给已有变量模块化模块化注意点 export、export default语法 import语法对象属性扩展写法 let注意点 1.不存在变量提升。 2.不允许重复声明。 3.暂时性死区。只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。例如下面代码： var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError..

【JavaScript】解构时重命名

allanGold

02-18

1965

js对象解构时重命名

利用ES6解构赋值处理对象：提取/删除属性、修改键名/重命名、拷贝对象……

shawxlee的优快云博客

02-05

1414

解构赋值的过程：声明变量（新键名）及原键名 → 在对象内搜索原键名 → 提取属性值赋给变量。解构赋值的过程：声明变量（新对象） → 排除已提取的属性 → 将剩余属性拷贝为新对象。解构赋值的过程：声明变量 → 在对象内搜索同名属性 → 提取属性值赋给变量。

es6 结构赋值的底层原来

最新发布

03-29

### ES6 解构赋值的底层实现原理 #### 数组解构数组解构是一种简洁的方式来提取数组中的元素并将其分配给变量。其实现基于迭代器协议（Iterator Protocol）。当执行数组解构时，JavaScript 引擎会调用目标数组的 `Symbol.iterator` 方法来获取其内部迭代器对象[^4]。以下是数组解构的一个简单示例及其背后的机制： ```javascript let [a, b] = [10, 20]; console.log(a); // 输出: 10 console.log(b); // 输出: 20 ``` 在此过程中，右侧的数组 `[10, 20]` 被视为可迭代对象，引擎依次访问该数组的第一个和第二个元素，并分别将它们赋值给左侧声明的变量 `a` 和 `b`。如果存在默认值，则会在无法匹配到对应位置的值时使用默认值： ```javascript let [c = 5, d = 6] = [undefined, null]; console.log(c); // 输出: 5 (因为 c 对应的位置为 undefined) console.log(d); // 输出: null (null 不触发默认值逻辑) ``` 这种行为表明，默认值仅在对应的槽位为空或未定义的情况下生效。 #### 对象解构对象解构的核心在于键名映射而非顺序关系。与数组不同的是，对象解构依赖于属性名称的一一对应。具体而言，在运行时，JavaScript 将右侧行对象上的指定键与其左端的目标变量绑定在一起[^1]。下面是一个典型的对象解构案例以及它的工作方式： ```javascript const obj = { name: "Alice", age: 25 }; let { name, age } = obj; console.log(name); // 输出: Alice console.log(age); // 输出: 25 ``` 这里的关键点是 `{name}` 实际上代表了一种隐式的映射操作：即寻找名为 `"name"` 的字段并将之赋予局部作用域内的同名变量 `name`。如果没有找到相应的键或者提供了别名，则可以通过冒号完成重命名过程: ```javascript let { name: fullName, age } = obj; console.log(fullName); // 输出: Alice console.log(age); // 输出: 25 ``` 上述代码片段展示了如何利用冒号改变原始数据结构中某个特定项所关联的新标识符名字。 #### 底层细节补充无论是数组还是对象形式下的解构表达式，最终都转换成一系列独立的操作语句。例如对于如下一段程序： ```javascript let [firstElement, secondElement] = someArray; ``` 实际上相当于做了这样的事情(伪代码表示)： ```pseudo-code var iteratorResult = someArray[Symbol.iterator](); var firstElement = iteratorResult.next().value; var secondElement = iteratorResult.next().value; if (!iteratorResult.done){ throw new TypeError('Too many initializers'); } ``` 这意味着每次从源集合里取出下一个成员直到满足所有待初始化的需求为止；如果有剩余而没有地方存储的话就会抛出异常提示错误情况发生。另外值得注意的地方还包括嵌套模式的支持能力——允许我们进一步深入复杂的数据层次去抓取所需部分的信息而不必手动一层层拆包处理[^3]： ```javascript // 嵌套数组解构 let [[e], f] = [[1, 2], [3, 4]]; console.log(e); // 输出: 1 console.log(f); // 输出: [3, 4] // 嵌套对象解构 let { user: { id }, settings: { theme }} = { user: { id: 42 }, settings: { theme: 'dark' } }; console.log(id); // 输出: 42 console.log(theme); // 输出: dark ``` 以上例子说明即使面对多级组合型别的资料也可以轻松达成精准定位的效果。综上所述，ES6 中引入的解构赋值不仅极大地简化了日常编码任务里的常见场景需求，而且背后隐藏着一套严谨且高效的运作流程保障整个功能正常运转的同时还兼顾灵活性考虑各种边界状况妥善应对可能出现的各种意外情形[^3].