ES6 —— entries(),keys()和values()
ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
一、一般数组用法
for of支持遍历数组、类对象(例如DOM NodeList对象,也称伪数组)、字符串、Map对象、Set对象;
for of不支持遍历普通对象,可通过参考下面的Object.keys()搭配使用遍历
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
//
//
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历。
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
二、object对象keys(), values() entries()
1.Object.keys()
ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
for of不支持遍历普通对象,可通过与Object.keys()搭配使用遍历
错误的写法:for(let key of obj.keys()) {.....}
返回值:数组
let obj = { a: 1, b: 2, c: 3 };
for (let key of Object.keys(obj)) {
console.log(key); // 'a', 'b', 'c'
}
var obj1 = {"name":"lucas","age":22};
console.log(Object.keys(obj1)) //["name", "age"]
2.Object.values()
ES2017 引入了跟Object.keys配套的Object.values和Object.entries,作为遍历一个对象的补充手段,供for...of循环使用。
因为其他遍历方法比如for in只能通过obj[key]的方式拿到对象的键值,ES7可通过 Object.values(obj) 拿到对象的键值。
返回值:数组
let obj = { a: 1, b: 2, c: 3 };
for (let value of Object.values(obj)) {
console.log(value); // 1, 2, 3
}
var obj1 = {"name":"lucas",age:22};
console.log(Object.values(obj1)) //["lucas", 22]
3.Object.entries()
Object.entries()和 Object.keys 相关,不过 entries()函数会将 key 和 value 以数组的形式都返回。这样,使用循环或则将对象转为 Map 就很方便了。
返回值:数组
let obj = { a: 1, b: 2, c: 3 };
for (let [key, value] of Object.entries(obj)) {
console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}
var obj1 = {"name":"lucas",age:22};
console.log(Object.entries(obj1)) //["name","lucas"] ["age",22]
Object.entries方法的一个用处是,将对象转为真正的Map结构。
var obj2 = {foo:'bar',baz:42};
var map2 = new Map(Object.entries(obj2));
console.log(map2); //map{"foo" => "bar", "baz" => 42}
var data={a:1,b:2,c:9,d:4,e:5};
console.log(data); //{a: 1, b: 2, c: 9, d: 4, e: 5}
console.log(Object.keys(data)); //["a", "b", "c", "d", "e"]
Object.keys(data).map((key,item)=>{
console.log(key,data[key]); //key=>属性名 data[key]=>属性值
/* 输出:
a 1
b 2
c 9
d 4
e 5
*/
});
ES6 —— entries(),keys()和values()的更多相关文章
- es6 entries(),keys() 和 values()
for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 for (let elem of ['a', 'b'].values ...
- es6 --数组--Array.from() 、Array.isArray()、Array.of()、find()、findIndex()、fill()、entries() 、keys() ,values()
将两类对象转为真正的数组 Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Se ...
- ES6数组及对象遍历的新增方法 entries(),keys() 和 values()
ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组.它们都返回一个遍历器对象(详见<Iterator>一章),可以用for...of循环进行遍历 ...
- 数组实例的 entries(),keys() 和 values()
数组实例的 entries(),keys() 和 values() entries(),keys()和values(),用于遍历数组.它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一 ...
- WiscKey: Separating Keys from Values in SSD-Conscious Storage [读后整理]
WiscKey: Separating Keys from Values in SSD-Conscious Storage WiscKey是一个基于LSM的KV存储引擎,特点是:针对SSD的顺序和随机 ...
- Object.keys(),Object.values(),Object.entries()
(1)Object.keys() // 返回数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名. eg:var obj = {a:1,b:'gy'} Ob ...
- [Python] dict对象的keys()和values()返回的值,是否总是保证一一对应?
搜dict的key, value顺序, 中文没搜到想要的结果. 英文答案链接:python-dictionary-are-keys-and-values-always-the-same-order 在 ...
- keys(),values()和items()
a={'a':11,'b':'bb','c':321}for x in a.items(): print(x) # 每条都输出来print("------------")for ...
- python中的keys、values、items
keys()获取字典中所有的键并放入列表 values()获取字典中所有的值并放入列表 items()获取字典中所有的键值对并放入列表 举个例子: 1 a = { 2 "name" ...
随机推荐
- GNU大型项目构建和覆盖率生成(第一篇)
目录 0. 序言 1. 项目描述 2. 项目构建 2.1 编译规则 2.2 构建过程 3. 覆盖率分析 0. 序言 在开始正文之前,请允许我先说明一下本文的目的和写作的动机,好让读者不惑. 我们知道, ...
- webpack,vue中定义的别名怎么在模板, css sass less的图片地址上使用
webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因... alias: { 's ...
- net core天马行空系列: 一个接口多个实现类,利用mixin技术通过自定义服务名,实现精准属性注入
系列目录 1.net core天马行空系列:原生DI+AOP实现spring boot注解式编程 2.net core天马行空系列: 泛型仓储和声明式事物实现最优雅的crud操作 哈哈哈哈,大家好,我 ...
- Mysql高手系列 - 第8篇:详解排序和分页(order by & limit),及存在的坑
这是Mysql系列第8篇. 环境:mysql5.7.25,cmd命令中进行演示. 代码中被[]包含的表示可选,|符号分开的表示可选其一. 本章内容 详解排序查询 详解limit limit存在的坑 分 ...
- spring boot启动加载项CommandLineRunner
spring boot启动加载项CommandLineRunner 在使用SpringBoot构建项目时,我们通常有一些预先数据的加载.那么SpringBoot提供了一个简单的方式来实现–Comman ...
- 关于spring boot多张表建立外健的讨论
现在有四张表:student(学生表).blogs(博客表).comment(评论表).reply(回复表) 现在说一下这四张表: student(学生表):学生的信息记录表 blogs(博客表):学 ...
- 即时聊天APP(五) - 聊天界面
设置界面没什么好说的,无非也就是加了个对话框来二次提醒用户,现在来讲讲聊天界面. 聊天界面初始化时会得到一个参数,就是对方的id,并设置在标题栏的位置,此界面也是使用RecyclerView来展示聊天 ...
- [Linux] CentOS安装GNOME时,fwupdate-efi-12-5.el7.centos.x86_64 conflicts with grub2-common-1:2.02-0.65.el7.centos.noarch
参考文章:https://createdpro.com/a/100006 该问题源于文件的版本冲突: grub2-common包的冲突,所以要将该包使用yum update grub2-commonn ...
- eclipse中xml文件格式化
eclipse中xml文件格式化(ctrl+shift+f),可能会发现格式化xml文件后很乱,如图: 这不是我想要的样子,我想要的是这样的: 解决办法:windows -> Perferenc ...
- Android Studio [相对布局RelativeLayout]
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...