原理

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

后面学习到了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. 关于Kubernetes规划的灵魂n问

    Kubernetes已经成为企业新一代云IT架构的重要基础设施,但是在企业部署和运维Kubernetes集群的过程中,依然充满了复杂性和困扰.阿里云容器服务自从2015年上线后,一路伴随客户和社区的成 ...

  2. 独家深度 | 一文看懂 ClickHouse vs Elasticsearch:谁更胜一筹?

    简介: 本文的主旨在于通过彻底剖析ClickHouse和Elasticsearch的内核架构,从原理上讲明白两者的优劣之处,同时会附上一份覆盖多场景的测试报告给读者作为参考. 作者:阿里云数据库OLA ...

  3. AI圈内卷?天池团聚请来专家集体“问诊”

    ​简介: 近期杭州云栖大会上出现了一个"数据博物馆",最吸引眼球的"展品",竟是行业大规模开源数据集.不仅数量多达上百个,还覆盖零售.文娱.工业.医疗.自然科学 ...

  4. [Go] 让 go build 生成的可执行文件对 Mac、linux、Windows 平台一致

    要做到这一点,使用的是交叉编译选项. CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build main.go CGO_ENABLED=0 GOOS=windows ...

  5. Region-区域(默认和新增)适配器

    Prism内置了几个区域适配器 ContentControlRegionAdapter ItemsControlRegionAdapter SelectorRegionAdapter ComboBox ...

  6. LVGL scroll超出父界面不隐藏

    问题 超出父界面不隐藏问题,即时使用了lv_obj_set_style_clip_corner()函数,也不起作用,如下图所示: 即使使用lv_obj_set_style_clip_corner(vi ...

  7. vue首次缓存判断

    在向本地缓存存值前,判断localstory是否已经存在某个属性,没有就正常存,有就替换掉 created(){ if(localStorage.getItem("属性名") != ...

  8. vim 使用black 格式化python代码

    vim 使用black 格式化代码 github black 的github https://github.com/psf/black 安装 pip3 install black 使用 black f ...

  9. Git——分支管理(2)

    Git--分支管理(2) 提示:图床在国外且动图比较多的情况下,需要时间加载. 目录: 目录 Git--分支管理(2) 提示:图床在国外且动图比较多的情况下,需要时间加载. 目录: Git基础 Git ...

  10. Zeppelin未授权访问 getshell

    Zeppelin未授权访问 getshell 1.漏洞简介 Apache Zeppelin是一个让交互式数据分析变得可行的基于网页的notebook.Zeppelin提供了数据可视化的框架. Zepp ...