JavaScript-解构

psychola 发布于2019-08-20 17:49 / 928人阅读

摘要：访问和使用对象的多个属性时，使用对象解构。为什么结构可以帮助您避免为这些属性创建临时引用。为什么你可以增加新的属性或改变事物的秩序而不破坏调用点。扫码申请加入全栈部落

访问和使用对象的多个属性时，使用对象解构。

为什么? 结构可以帮助您避免为这些属性创建临时引用。

// bad
function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;

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

// good
function getFullName(user) {
    const {
        firstName,
        lastName
    } = user;
    return `${firstName} ${lastName}`;
}

// best
function getFullName({firstName,lastName}) {
    return `${firstName} ${lastName}`;
}

使用数组解构

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

对多个返回值使用对象解析，而不是数组解构。

为什么? 你可以增加新的属性或改变事物的秩序而不破坏调用点。

// bad
function processInput(input) {
    // then a miracle occurs
    return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);

// good
function processInput(input) {
    // then a miracle occurs
    return {
        left,
        right,
        top,
        bottom
    };
}

// the caller selects only the data they need
const {
    left,
    right
} = processInput(input);

扫码申请加入全栈部落

GPU云服务器云服务器对象解构解构函数解构赋值 javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83897.html

javascript解构赋值

摘要：此文章为意译并非直译，可参考具体原文解构赋值具体干什么解构赋值是中的一个表达式语法糖，帮助开发者将数组，对象属性解构出来并且直接赋值到具体变量上面。此文章为意译并非直译，可参考具体原文解构赋值具体干什么？解构赋值是javascript中的一个表达式语法糖，帮助开发者将数组，对象属性解构出来并且直接赋值到具体变量上面。直接来段代码感受下 let a,b,rest; [a,b] =...

canopus4u 2019-08-22 13:58 评论0 收藏0
ECMASCRIPT 6 实战之解构赋值

摘要：相信解构赋值自以下简称面世以来被大家快速地熟悉并运用到实际开发中了这是一种能有效减少代码量，使代码逻辑更简单优雅的技术下面我们就再来回顾总结一下解构赋值的种种用法吧基本用法从对象解构假设有一个对象，它的结构为以对称的形式从从边的对象中匹配与相信解构赋值(Destructuring)自 ECMASCRIPT 6(以下简称 ES 6) 面世以来被大家快速地熟悉并运用到实际开发中了, 这是...

yangrd 2019-08-26 13:54 评论0 收藏0
ES6：解构——JavaScript 从数组和对象中提取数据的优雅方法

摘要：跳过数组中的元素学会了如何按顺序从数组中提取数据。解构方法中提供了很好的解决方案。从对象中提取数据依然从最基本的开始，提取从中提取和。本文编译：胡子大哈翻译原文：http://huziketang.com/blog/posts/detail?postId=58f41a06a58c240ae35bb8e6 英文连接：ES6: Destructuring — an elegant...

GraphQuery 2019-08-20 16:02 评论0 收藏0
JavaScript中的解构赋值

摘要：是这样描述解构赋值的解构赋值语法是一种表达式用来将数组中的值或对象中的属性取出来区分为不同变量。现在让我们将坐标点放进一个数组中现在要对这些点进行处理，传统可以想到的方法是这样的借助解构赋值，能变得这样简洁使用箭头函数更简洁 JavaScript是一种很有趣的语言，我个人很喜欢它，虽然仍还有些人不大喜欢它。在ECMAScript6（ES6）中，有许多有用的特性来使JavaScript开...

Panda 2019-08-23 18:07 评论0 收藏0
[译]JavaScript ES6解构赋值指南

摘要：解构赋值允许我们将右边的表达式看起来也像变量声明一般，然后在左边将值一一提取。数组的解构赋值现在假设我们有一个变量，其值为。通过，这会看上去更清晰简洁最后的解构赋值给的语法带来了更多的现代化。前言让我们来仔细地看看ES6所带来的更清晰的变量声明与赋值语法。现今的变量声明语法十分的直接：左边是一个变量名，右边可以是一个数组：[]的表达式或一个对象：{}的表达式，等等。解构赋值允许我...

Jeff 2019-08-21 10:33 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0