使用解构存取和使用多属性对象(为什么？因为解构能减少临时引用属性)

最新推荐文章于 2021-11-19 10:28:46 发布

catherinawwww

最新推荐文章于 2021-11-19 10:28:46 发布

阅读量632

点赞数

CC 4.0 BY-SA版权

分类专栏：技术资料文章标签：解构

本文链接：https://blog.youkuaiyun.com/weixin_38747509/article/details/80651999

技术资料专栏收录该内容

188 篇文章

订阅专栏

本文通过三个示例对比展示了如何利用JavaScript中的对象解构语法来简化代码并提高可读性和效率。从基本的函数到最佳实践，文章详细解释了不同方式之间的差异，并强调了最优秀的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// bad

function getFullName(user) {

const firstName = user.firstName;

const lastName = user.lastName;

return `${firstName} ${lastName}`;

}

// good

function getFullName(obj) {

const { firstName, lastName } = obj;

return `${firstName} ${lastName}`;

}

// best

function getFullName({ firstName, lastName }) {

return `${firstName} ${lastName}`;

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

catherinawwww

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

每日一题：1.function Person(firstName, lastName) { this.firstName = firstName； this.lastName = lastNa

卡卡西：一个擅长拷贝的前端程序员

05-14

1124

Question：如下输出什么？ function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } const member = new Person('Lydia', 'Hallie'); Person.getFullName = function() { return `${this.firstName} ${this.lastName}`; }; consol

js 代码规范

不可云

04-04

3963

1、变量声明（1）使用let或const替换var声明变量。（2）变量声明前，需要考虑该变量是常量还是一个可变化的，选用合适的方式声明。原因：var没有块作用域的概念，存在变量声明提升，并可以跨块级作用访问。 // bad var a = 1; // good let b = 1; const c = 1; （3）字符串属性值必须通过单引号括起来，不能用双引号；如果字符串属性值太长，注意换行，用注意需要通过+连接。 // bad let a = "a"; // good let a = 'a';

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

JavaScript-解构

weixin_33841722的博客

07-06

137

访问和使用对象的多个属性时，使用对象解构。 为什么? 结构可以帮助您避免为这些属性创建临时引用。 // bad function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return...

js解构出来的值与原值具有相同的引用地址

jsyxiaoba的博客

04-20

487

const obj = { a:[ {a1:1}, {a2:2} ] }; const { a } = obj; a.splice(0,1) console.log(obj, a, a === obj.a) // {a: Array(1)} [{…}] true 正因为 a 与 obj.a 有相同的引用地址，修改 a 才会导致 obj.a 也跟着变化，用 === 符号判断也证明了这个问题 ...

JavaScript编码规范

SwingDance的博客

11-03

296

类型基本类型: 直接存取基本类型。字符串数值布尔类型 null undefined… const foo = 1; let bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 复杂类型: 通过引用的方式存取复杂类型。对象数组函数… const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9,

前端开发之JS规范

m0_58371965的博客

11-19

193

一般规范使用严格等=== 总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。 this关键字只在对象构造器、方法和在设定的闭包中使用 this 关键字。 this 的语义常容易被误导。它时前端培训而指向全局对象（大多数时），时而指向调用者的定义域（在 eval 中），时而指向 DOM 树中的某一节点（当用事件处理绑定到 HTML 属性上时），时而指向一个新创建的对象（在构造器中），还时而指向其它的一些对象（如果函数被 call() 和

es6 解构

YE13209930025的博客

09-17

190

使用解构存取和使用多属性对象，解构能减少临时引用属性。 // bad function getFullName(user) { const firstName = user.firstName const lastName = user.lastName return `${firstName} ${lastName}` } // goo...

JavaScript 风格指导（Airbnb版）

weixin_30677073的博客

12-19

457

JavaScript 风格指导（Airbnb版）用更合理的方式写 JavaScript 原文翻译自 Airbnb JavaScript Style Guide 。目录类型引用对象数组解构字符串函数箭头函数构造函数模块 Iterators & Generators 属性变量提升比较运算符 & 等号代码块注释空白逗号分号类型转换...

Airbnb JavaScript 代码规范（ES6）

好女绪的博客

03-14

1576

Airbnb JavaScript 代码规范（ES6） 1. 类型 1.1 基本类型: 直接存取基本类型（字符串、数值、布尔类型、null、undefined）。 1.2 复杂类型: 通过引用的方式存取复杂类型（对象、数组、函数）。 2. 引用 2.1 对所有的引用使用 const ；避免使用 var。确保你无法对引用重新赋值，也不会导致出现 bug 或难以理解。 2.2 如果...

ES6中对象的解构赋值多重情况详解

qq_43241161的博客

08-05

2543

代码如下 // (1) 左侧简写形式 let obj={ title:'xc', height:'180cm', bodyWeight:'70kg' } let {title,height,bodyWeight}=obj //左侧简写的形式和obj中定义的属性要一样 ,如果不一样为该变量为undefined console.log(title,height,bodyWeight) // (2) 左侧不简写形式 let obj={ title:'xc', height:'180cm',

【微信小程序+ES6新特性应用】使用解构数组优化变量格式

FutrueJet的博客

10-26

1746

【微信小程序+ES6新特性应用】使用解构数组优化变量格式

ES6知识点归纳（二）——对象解构、数组解构、for of循环、新增的方法、剩余参数、扩展运算符

就是说，有点不想敲代码了

10-06

1070

参考书籍：http://es6.ruanyifeng.com/ 参考视频：https://www.bilibili.com/video/av47304735 全部篇章： ES6知识点归纳（一）——var、let、const、箭头函数、函数参数的默认值、ES6模版字符串 ES6知识点归纳（二）——对象解构、数组解构、for of循环、新增的方法、剩余参数、扩展运算符 ES6知识点归纳（三）—— 文章...

封装axios，这篇博客一定很有用？

大豆博文

07-10

3606

axios都知道是vue2的ajax，有点不专业，但你是可以理解的；但是只知道单纯的和ajax使用，那就未免太浅了，更别说自己都工作这么些年份了；目录结构吗？ src -api --api.js --http.js只要你熟悉vue这个还用说，可以看着axios和vuex的官方文档自己动手封装下哈；以下是api.js的内容，这里填写的是项目的URL字段请求地址；...

自学-ES6篇-对象的扩展

热门推荐

故事的小洋葱

10-07

1万+

1、属性的简洁表示法 ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 var foo = 'bar'; var baz = {foo}; baz // {foo: "bar"} // 等同于 var baz = {foo: foo}; 上面代码表明，ES6允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量。下面是另一个例子。

11-8 对象解构赋值之后，不可再通过赋值改变原有对象对应属性的值

まどか

11-09

1585

对象解构赋值之后，不可再通过赋值改变这个属性的值因为这是对象解构而不是属性解构 // 测试对象的解构赋值之后，能否改变原有对象对应属性的值 let obj={ a:22 } let {a}=obj; a=33; console.log(obj); // { a: 22 } 项目中异步操作的规范参考阮一峰的es6教程 1.错误处理的规范一般来说，不要在then方法里面定义 Rejec...

使用解构赋值时遇到的一点小问题

随风丶逆风的博客

06-04

1045

今天做题，思路有了，唰唰唰写完，然后样例测试，嗯！？结果不对啊。function findRepeat(array){ if(array instanceof Array){ let i=0, len=array.length; while(i<len){ if(array[i] !== i){ ...

对象的解构赋值

歪脖先生的博客

01-15

1772

对象的解构赋值解构不仅可以用于数组，还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb" 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。 let { bar, foo } =

在Vue中，this和object如何解构赋值

zz_LXW的博客

03-02

6956

我们经常会碰到在vue中需要把一个传进来的对象赋值到当前组件上，例如 this.date= res.date; this.avatar=res.avatar; this.userID=res.userID this.username=res.username; 第一种解决办法是先声明一个容器，然后把接收对象直接挂到容器上 data(){ res:{} } mounted(){ axios.g...

深入浅出ES6（六）：解构 Destructuring

lgh1117的专栏

04-28

2545

什么是解构赋值？解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。通常来说，你很可能这样访问数组中的前三个元素： var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; 如果使用

使用解构存取和使用多属性对象

06-06

在 JavaScript 中，可以使用解构来存取多属性对象。多属性对象指的是一个对象具有多个属性，每个属性都包含一个键值对。例如： ``` const myObj = { name: 'Alice', age: 30, gender: 'female' }; ``` 要使用解构来存取这个对象，可以将对象的属性解构到变量中，如下所示： ``` const { name, age, gender } = myObj; console.log(name); // Alice console.log(age); // 30 console.log(gender); // female ``` 在上面的例子中，我们使用解构将 myObj 对象的 name、age 和 gender 属性分别存储在变量 name、age 和 gender 中。这样，我们就可以像使用普通变量一样使用这些属性。需要注意的是，当使用解构存取多属性对象时，变量名必须与对象中的键名相同。否则，变量的值将为 undefined。此外，如果对象中不存在预期的属性，解构也会失败并返回 undefined。在使用多属性对象时，如果需要访问其中的属性，可以使用点号或方括号语法。例如： ``` console.log(myObj.name); // Alice console.log(myObj['age']); // 30 ``` 在上面的例子中，我们通过点号和方括号语法分别访问了 myObj 对象的 name 和 age 属性。需要注意的是，如果属性名中包含特殊字符，例如空格或连字符，必须使用方括号语法来访问该属性。