es6提供了一个非常好的特性,即变量的解构赋值。从而我们可以方便的从数组和对象中提取数据并将它们赋值给变量。这是非常必要的。先来看在这个新特性发布之前我们是如何从数组中提取数据的。如下:

let nums = [1,2,3,4,5];

let num1 = nums[0];

let num2 = nums[1];

console.log(num1); // logs 1

console.log(num2); // logs 2

复制代码

为了从 nums 数组中提取到数据,我们多次重复着相同的代码。es6的解构赋值将会让这个操作变得非常的容易且易于理解。

数组的解构赋值

从数组中取值并按照对应位置对变量进行赋值。如下:

let [num1,num2,num3] = [1,2,3];

console.log({num1},{num2},{num3})

复制代码

“模式匹配”赋值

这属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

let [num_s,nums,num_e] = [1,[2,3,4],5];

console.log(num_s) // logs 1

console.log(nums) // logs [2,3,4]

console.log(num_e) // logs 5

复制代码

用逗号跳过元素

let [num1,,,num4] = [1,2,3,4];

console.log(num1) // logs 1

console.log(num4) // logs 4

let [,num2,,num4] = [1,2,3,4];

console.log(num2) // logs 2

console.log(num4) // logs 4

复制代码

查看变量赋值左侧的数组。注意这里不是只有一个逗号,而是三个。逗号分隔符用于跳过数组中的值。所以如果你想要跳过数组中的一个项,只要用逗号就可以了。

数组中的其余部分的赋值

如果我们想将数组中的一些元素赋值给变量,而将数组中的其余元素存为一个数组赋值给指定的变量怎么办?在这种情况下,我们可以这样做:

let [num1,...nums] = [1,2,3,4];

console.log(num1) // logs 1

console.log(nums) // logs [2,3,4]

复制代码

应用这种方式,你可以轻松的把剩余的元素赋值给一个指定的变量。

解构失败,赋值undefined

let [num1] = [];

let [num2, num3] = [1];

console.log(num1) // logs undefined

console.log(num3) // logs undefined

复制代码

代码中的变量num1与变量num3 按照模式匹配原则,并没有对应的值与之匹配,故而返回undefined。而变量num2 按照模式匹配原则,被赋值为2。</

java对象赋值给数组_带你深入的理解数组和对象的解构赋值。相关推荐

  1. python定义二维空数组_带有空第二维的数组/向量的Python / numpy问题

    虽然您可以重新整形数组,并使用[:,np.newaxis]添加维度,但您应该熟悉最基本的嵌套括号或列表符号.请注意它与显示器的匹配程度. In [230]: np.array([[0],[6]]) O ...

  2. 最详细ES6教程_变量的解构赋值

    最详细ES6教程_变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定 ...

  3. ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map

    根据视频进行整理 [https://www.bilibili.com/video/BV1uK411H7on?p=1] 视频资源(百度网盘): 链接:[https://pan.baidu.com/s/1 ...

  4. ES6中的对象解构赋值

    解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的定义,可以看出解构主要用在数组和对象上). 说白 ...

  5. 05-ES6语法:解构赋值

    本文我们介绍ES6中解构赋值.ES6的解构赋值语法是一种JS表达式.解构赋值语法是一种JS表达式,通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量. 下面我们具体来看看解构赋值是什么?以 ...

  6. es6 - 解构赋值

    一 我们为什么要使用解构 在学习ES6新的特性解构赋值之前,我们先来看看为什么要使用解构,以前如果我们需要获取对象或者数组里面的数据,并且把它们存入数组,需要写很多代码.如下 const person ...

  7. ES6的新特性(3)——变量的解构赋值

    变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...

  8. ECMAScript 6入门 - 变量的解构赋值

    定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...

  9. 第五节:一个令人兴奋的ES6新特性:解构赋值

    端午节刚刚过,大家是回家陪家人吃粽子,还是约好朋友一起出去浪了?昨天上了一天班,不知道大家有没有把出去玩耍的心思收回来,准备接下来的学习. 继续学习吧骚年们...... 学完了前4节,今天我给大家带来 ...

最新文章

  1. js用.和[]获取属性的区别
  2. MySQL配置主从同步过程记录
  3. Java多线程之线程并发库阻塞队列的应用
  4. 品牌管理-统一异常处理
  5. 监听以太网(二) Packet32包说明
  6. JavaScript 使用random()生成随机数
  7. 字符串中全角半角之间的转换
  8. matlab 求解进度,报告测试运行进度的插件
  9. C/C++遍历进程和进程ID的小工具
  10. CSS-垂直|水平居中问题的解决方法总结
  11. 【英语学习】【Daily English】U11 Work L03 He is a had guy to work for
  12. 触控游戏的设计—Windows Phone 7游戏开发
  13. Spring Data Jpa的JpaRepository的getOne()方法查询数据实体时报错could not initialize proxy
  14. 实现redis集群的批量pineline操作
  15. 不止音箱,百度还发布了这些AI产品,还有参会者的10个小建议
  16. 重装系统后mac语言怎么改成中文?
  17. 建筑电气工程设计常用图形和文字符号_电气设计绘图线宽是什么标准,需要遵循哪些基本原则?你知道吗?...
  18. 网络安全篇 全局ACL与URPF-12
  19. 程序员,你准备好回家过年了吗?
  20. 最全的Python教程【合集】| 寻找C站宝藏

热门文章

  1. 黑金开发板上开发的PWM
  2. 【长难句分析精讲】定语从句
  3. 网络数据库教程(5日教程)
  4. 电脑自动关机(方法篇----系统原因)
  5. table表头固定方法
  6. 记将MobileNet的pytorch模型转换成TorchScript格式出现的问题
  7. PHP Warning: PHP Startup: Unable to load dynamic library ‘bz2‘ (tried: /usr/local/php8/lib/php/exte
  8. 区块链开发(二)部署和运行第一个以太坊智能合约
  9. nexus搭建npm依赖私库
  10. Java Web 简明教程