脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS ES6中的解构

聊聊JS ES6中的解构

 更新时间：2021年04月29日 10:51:02   作者：浅笑·  
这篇文章主要介绍了JS ES6中的解构，对解构感兴趣的同学，可以参考下

概述

es6新增了一种从数组或者对象中获取指定元素的方式，这种方式就是我们今天要说的解构。

先来说说数组的解构

在有解构之前呢，我们获取数组中的指定元素通常是根据索引去做的：

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

有了解构之后呢，我们便可以使用如下方式快速的去获取数组中的某个元素：

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a);
console.log(b);
console.log(c);

这样打印出a, b, c的值分别是：

1

2

3

如果我们只想获取前两个元素呢，那么我们可以这样写：

const arr = [1, 2, 3];
const [a, b] = arr;

console.log(a);
console.log(b);

我们也可以结合扩展运算符获取数组中指定的多个元素，比如：

const arr = [1, 2, 3];
const [a, ...brr] = arr;

console.log(a);
console.log(brr);

这样brr就是除了1以外的其他元素组成的数组，打印出a, brr的值分别是：

1

[2, 3]

那如果我们只想获取数组中的某一个元素呢？比如我只想获取数组中的2，又该如何去写呢？

const arr = [1, 2, 3];
const [, a] = arr;
console.log(a);

以上我们通过一个逗号占位确保我们解构和数组本身的位置是一致的来获取到特定位置的某个元素。
可以看到，解构的出现方便了我们去获取数组指定位置的一个或多个元素。这也是他在代码中的一个重要的应用。

说完数组的解构，我们再来聊聊

对象的解构

与数组解构不同的是，对象的解构是根据属性名去匹配的，因为对象不像数组下标那样有顺序，因此它不能用下标去提取。
就比如我们定义一个对象obj，我们想获取他的name属性值就可以这样写：

const obj = {
    name: 'wudixiaodoujie',
    age : 18
};
const { name } = obj;
console.log(name);
wudixiaodoujie

const age = 0;
const { age: perAge } = obj;
console.log(perAge);
18

对象的解构应用还是比较广的，比如我们需要频繁的调用对象的某个属性或方法就可以通过解构将其赋值给一个变量，通过一个变量去调用可以在一定程度上减少代码量。

以上就是JS ES6中的解构的详细内容，更多关于JS ES6中的解构的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JS实现简单留言板功能

    JS实现简单留言板功能

    这篇文章主要为大家详细介绍了JS实现简单留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • ES6 javascript的异步操作实例详解

    ES6 javascript的异步操作实例详解

    这篇文章主要介绍了ES6 javascript的异步操作,结合实例形式分析了ES5中异步操作的概念、原理、使用方法及相关注意事项,需要的朋友可以参考下
    2017-10-10
  • JavaScript实现表单验证功能

    JavaScript实现表单验证功能

    这篇文章主要为大家详细介绍了JavaScript实现表单验证功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JS中使用sort结合localeCompare实现中文排序实例

    JS中使用sort结合localeCompare实现中文排序实例

    这篇文章主要介绍了JS中使用sort结合localeCompare实现中文排序实例,重点介绍localeCompare函数,需要的朋友可以参考下
    2014-07-07
  • CocosCreator Typescript制作俄罗斯方块游戏

    CocosCreator Typescript制作俄罗斯方块游戏

    目前关于cocos开发俄罗斯方块的文章几乎寥寥无几，因此本文将主要介绍如何通过CocosCreator Typescript制作简单的俄罗斯方块游戏，代码具有一定价值，感兴趣的同学可以学习一下
    2021-11-11
  • JS中的一些常用的函数式编程术语

    JS中的一些常用的函数式编程术语

    这篇文章主要介绍了JS中的一些常用的函数式编程术语,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，
    2019-06-06
  • js字符串去重复id的实现代码

    js字符串去重复id的实现代码

    最近由于需要我们将相关id的重复的去掉，一个是客户端一个后台程序把关，这里分享下js的去重复id的实现代码
    2013-07-07
  • js 作用域和变量详解

    js 作用域和变量详解

    本文主要介绍了js 的作用域和变量的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 10 种最常见的 Javascript 错误(频率最高)

    10 种最常见的 Javascript 错误(频率最高)

    本文是小编给大家收藏的JavaScript 中频度最高的 10 种错误，我们会告诉你什么原因导致了这些错误，以及如何防止这些错误发生。需要的朋友参考下
    2018-02-02
  • JavaScript实现存储HTML字符串示例

    JavaScript实现存储HTML字符串示例

    这篇文章主要介绍了JavaScript存储HTML字符串的具体实现,需要的朋友可以参考下
    2014-04-04

最新评论