原理

以前只用过数组解构为数组,或者将其他类数组解构为数组,但是还不知道对象为什么不能解构为数组

后面学习到了Symbol.iterator属性以后才知道,只要一个对象是可迭代的,那它就可以迭代为数组。

代码示例如下

代码

let obj = {
0: 'zero',
1: 'one',
2: 'two',
length: 3
} // 解构的原理 obj[Symbol.iterator] = function() {
// 返回一个迭代器对象
return {
cur: 0,
final: this.length,
next() {
if (this.cur < this.final) {
return {
value: this.cur++,
done: false
}
} else {
return {
done: true
}
}
}
}
} for (let val of obj) {
console.log(val);
} console.log([...obj]); // 对象解构为数组

es6数组解构的原理初探的更多相关文章

  1. ES6 数组解构赋值

    .数组解构 let [a, b, c,d] = ["aa", "bb", 77,88]; alert(a) //弹出aa 可以用babel 解析看ES5的转换结 ...

  2. 【ES6 】ES6 解构赋值--数组解构赋值

    定义 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 数组的解构赋值 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ...

  3. es6的解构赋值学习(1)

    相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...

  4. ES6-新增的数组操作,数组解构,forEach,fillter,some.map的数组遍历,数组转换字符串

    ES6-新增的数组操作 // es6数组格式 let json = { '0' : 'anan', '1' : 'anani', '2' : 'anania', length:3 } //es6 把数 ...

  5. 深入理解ES6之解构

    变量赋值的痛 对象 let o = {a:23,b:34}; let a = o.a; let b = o.b; 如上文代码,我们经常会遇到在各种场合需要获取对象中的值的场景,舒服一点的是获取单个属性 ...

  6. ES6 学习 -- 解构赋值

    一.数组解构 **数组解构,解构出来的值跟数组下标是一一对应的,如果左边变量多于右边数组,则左边后面部分变量值为undefined,如果右边数组元素个数多于左边解构变量个数,则左边变量全都有值,且一一 ...

  7. es6的解构函数

    话说,解构无处不在啊,鄙人自从用了vue写项目以来,总是遇到各路大神莫名其妙的写法,然并未出任何错,查之,然解构也,呜呼哀哉,进而习之. 解构(Destructuring):是将一个数据结构分解为更小 ...

  8. ES6 对象解构

    ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...

  9. ES6(解构赋值)

    解构赋值 1.什么是解构赋值? 在语法上,就是赋值的作用,解构为(左边一种解构.右边一种解构,左右一一对应进入赋值) 2.解构赋值的分类. 1.左右为数组即为数组解构赋值:2.左右为对象即为对象解构赋 ...

  10. ES6 变量解构用法

    1.数组解构,可以设置默认值 'use strict'; let [x, y = 'b'] = ['a']; //控制台输出b console.log(y); 2.对象解构 'use strict'; ...

随机推荐

  1. Flink 最佳实践之使用 Canal 同步 MySQL 数据至 TiDB

    简介: 本文将介绍如何将 MySQL 中的数据,通过 Binlog + Canal 的形式导入到 Kafka 中,继而被 Flink 消费的案例. 一. 背景介绍 本文将介绍如何将 MySQL 中的数 ...

  2. 使用率激增 250%,这份报告再次将 Serverless 推向幕前

    简介: 本文是对 Datadog 最新的一份 Serverless 报告的解读,欢迎大家留言讨论. 本文是对 Datadog 最新的一份 Serverless 报告的解读,欢迎大家留言讨论.​ 每项新 ...

  3. 项目实战总结以及接入U-APM

    ​简介: 导致 App 性能低下的原因有很多,除去设备硬件和软件的外部因素,其中大部分是开发者错误地使用线.系统函数.编程范式.数据结构等导致的.即便是较有经验的程序员,也很难在开发时就能避免所有导致 ...

  4. [Docker] 使 Volume 独立于容器运行时的方式 - 让容器引擎去处理

    在单纯使用 run 命令运行一个容器时,通常会使用 -v 挂载的方式来实现宿主机数据卷映射到容器内. 使用命令: $ docker run --name mysql-con -v /my/custom ...

  5. [FE] JS 判断当前是否在微信浏览器中的最新代码

    注意以下使用了 const 定义未改变的变量,没有使用 var. function isWeChatBrowser () { const ua = window.navigator.userAgent ...

  6. [Contract] Solidity 合约发布到测试网 ropsten 的作用

    当我们本地完成了一系列测试以后,接下来就是准备上线了. 关于合约部署可以参考这篇:Solidity 合约使用 truffle 部署到测试网和主网 你可能有一个疑问,在上主网之前,先上测试网的作用是什么 ...

  7. UWP 写入图片 Exif 信息

    本文告诉大家如何在 UWP 中,保存图片的时候,写入 Exif 信息,也就是如照片的 相机型号 制造商 光圈值等信息的写入 在 UWP 中,保存图片或照片需要用到图片编码器,在使用编码器写入前可以设置 ...

  8. CSS:鼠标移动到图片上的动画

    CSS:鼠标移动到图片上的动画 .pic img { width: 100%; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transiti ...

  9. 普冉PY32系列(十五) PY32F0系列的低功耗模式

    目录 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境 普冉PY32系列(三) P ...

  10. ITIL4 服务价值系统(SVS):一场服务管理的革新之旅

    在这个数字化时代,每一家企业都在追求高效的服务管理和卓越的客户体验.今天,我们就来聊一聊ITIL4中的服务价值系统(Service Value System, SVS)--一个让服务管理变得更加直观和 ...