首页 web前端 js教程 ES6学习之解构赋值实例详解

ES6学习之解构赋值实例详解

Jun 26, 2017 pm 02:51 PM
学习 系列 赋值

一、解构赋值的定义

  简单的理解就是赋值=号左右两侧具有相同的结构,来进行一一对应的赋值的语句

二、解构赋值的分类

  数组解构赋值  对象解构赋值  字符串解构赋值  布尔值解构赋值  函数参数解构赋值  数值解构赋值 (重点理解前两个就可以了

三、对于每个分类单独解释

  1、数组解构赋值(下面进行代码展示,并添加必要的注释便于理解)

{
  let a,b,rest;
  [a,b]=[1,2];
  console.log(a,b);//输出1,2 直接将1和2解构到a和b}
登录后复制

  也可以对变量设置默认值例如下面代码的c 就是默认为3  如果解构例如[a,b,c]=[1,2] 没有对c进行解构  则c为undefined

{
  let a,b,c,rest;
  [a,b,c=3]=[1,2];
  console.log(a,b);}
登录后复制

  使用场景1

    ①、变量交换   

{
  let a=1;
  let b=2;
  [a,b]=[b,a];
  console.log(a,b);
}
登录后复制

    ②、对函数返回值直接提取(没有解构赋值 需要先取出结果 然后通过索引来进行取出) 

{  function f(){return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);
}
登录后复制

    ③、只取出返回结果的某些需要的值

{  function f(){return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b); // 输出1 4
}
登录后复制

    ④、不关心数组的内容长度

{  function f(){return [1,2,3,4,5]
  }
  let a,b,c;
  [a,...b]=f();
  console.log(a,b);//输出1,[2,3,4,5]
}
登录后复制

  2、对象解构赋值

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);
}
登录后复制

   对象解构赋值设置默认值

{
  let {a=10,b=5}={a:3};
  console.log(a,b);//输出3 5
}
登录后复制

   稍微复杂的对象的解构赋值   

{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'}]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);//abc test (相当于esTitle和cnTitle分别对应metaData里面的abc和test)
}
登录后复制

 

以上是ES6学习之解构赋值实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何为VMware虚拟机启用复制和粘贴 如何为VMware虚拟机启用复制和粘贴 Feb 21, 2024 am 10:09 AM

您可以轻松地在VMware虚拟机(VM)和物理系统之间复制和粘贴文本和文件。这种功能让您可以方便地在虚拟机和主机系统之间传输图像、格式化和非格式化文本,甚至电子邮件附件。本文将向您展示如何启用这一功能,并演示复制数据、文件和文件夹的方法。如何在VMware中启用复制/粘贴VMware提供了三种不同的方式将数据、文件或文件夹从虚拟机复制到物理计算机,反之亦然,如下所述:复制和粘贴要素拖放功能文件夹共享1]使用VMware工具启用复制粘贴如果您的VMWare安装和来宾操作系统满足要求,则可以使用键盘

如何在Word中复制页面 如何在Word中复制页面 Feb 20, 2024 am 10:09 AM

是否要复制MicrosoftWord中的页面,并保持格式不变?这是一个聪明的想法,因为当您想要创建特定文档布局或格式的多个副本时,在Word中复制页面可能是一种有用的节省时间的技术。本指南将逐步引导您在Word中复制页面的过程,无论是创建模板还是复制文档中的特定页面。这些简单的说明旨在帮助您轻松地重新制作页面,省去从头开始的麻烦。为什么要在MicrosoftWord中复制页面?在Word中复制页面非常有益的原因有以下几点:当您有一个具有特定布局或格式的文档要复制时。与从头开始重新创建整个页面不同

学会彻底卸载pip,使用Python更加高效 学会彻底卸载pip,使用Python更加高效 Jan 16, 2024 am 09:01 AM

不再需要pip?快来学习如何有效卸载pip!引言:pip是Python的包管理工具之一,它可以方便地安装、升级和卸载Python包。然而,有时候我们可能需要卸载pip,可能是因为我们希望使用其他的包管理工具,或者因为我们需要完全清除Python环境。本文将介绍如何有效地卸载pip,并提供具体的代码示例。一、卸载pip的方法下面将介绍两种常见的卸载pip的方法

深入研究matplotlib的色彩映射表 深入研究matplotlib的色彩映射表 Jan 09, 2024 pm 03:51 PM

深入学习matplotlib颜色表,需要具体代码示例一、引言matplotlib是一个功能强大的Python绘图库,它提供了丰富的绘图函数和工具,可以用于创建各种类型的图表。而颜色表(colormap)是matplotlib中一个重要的概念,它决定了图表的配色方案。深入学习matplotlib颜色表,将帮助我们更好地掌握matplotlib的绘图功能,使绘

揭秘C语言的吸引力: 发掘程序员的潜质 揭秘C语言的吸引力: 发掘程序员的潜质 Feb 24, 2024 pm 11:21 PM

学习C语言的魅力:解锁程序员的潜力随着科技的不断发展,计算机编程已经成为了一个备受关注的领域。在众多编程语言中,C语言一直以来都备受程序员的喜爱。它的简单、高效以及广泛应用的特点,使得学习C语言成为了许多人进入编程领域的第一步。本文将讨论学习C语言的魅力,以及如何通过学习C语言来解锁程序员的潜力。首先,学习C语言的魅力在于其简洁性。相比其他编程语言而言,C语

小米 15 系列全代号曝光:Dada、Haotian、Xuanyuan 小米 15 系列全代号曝光:Dada、Haotian、Xuanyuan Aug 22, 2024 pm 06:47 PM

小米15系列预计将于10月份正式发布,其全系列代号已在外媒MiCode代码库中曝光。其中,旗舰级小米15Ultra代号为"Xuanyuan"(意为"轩辕"),此名源自中国神话中的黄帝,象征着尊贵。小米15的代号为"Dada",而小米15Pro则以"Haotian"(意为"昊天")为名。小米15SPro内部代号为"dijun",暗指《山海经》创世神帝俊。小米15Ultra系列涵盖

Pygame入门指南:全面安装和配置教程 Pygame入门指南:全面安装和配置教程 Feb 19, 2024 pm 10:10 PM

从零开始学习Pygame:完整的安装和配置教程,需要具体代码示例引言:Pygame是一个使用Python编程语言开发的开源游戏开发库,它提供了丰富的功能和工具,使得开发者可以轻松创建各种类型的游戏。本文将带您从零开始学习Pygame,并提供完整的安装和配置教程,以及具体的代码示例,让您快速入门。第一部分:安装Python和Pygame首先,确保您的计算机上已

一起学习word根号输入办法 一起学习word根号输入办法 Mar 19, 2024 pm 08:52 PM

在word中编辑文字内容时,有时会需要输入公式符号。有的小伙们不知道在word根号输入的方法,小面就让小编跟小伙伴们一起分享下word根号输入的方法教程。希望对小伙伴们有所帮助。首先,打开电脑上的Word软件,然后打开要编辑的文件,并将光标移动到需要插入根号的位置,参考下方的图片示例。2.选择【插入】,再选择符号里的【公式】。如下方的图片红色圈中部分内容所示:3.接着选择下方的【插入新公式】。如下方的图片红色圈中部分内容所示:4.选择【根式】,再选择合适的根号。如下方的图片红色圈中部分内容所示:

See all articles