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()的更多相关文章

  1. es6 entries(),keys() 和 values()

    for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 for (let elem of ['a', 'b'].values ...

  2. es6 --数组--Array.from() 、Array.isArray()、Array.of()、find()、findIndex()、fill()、entries() 、keys() ,values()

    将两类对象转为真正的数组 Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Se ...

  3. ES6数组及对象遍历的新增方法 entries(),keys() 和 values()

    ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组.它们都返回一个遍历器对象(详见<Iterator>一章),可以用for...of循环进行遍历 ...

  4. 数组实例的 entries(),keys() 和 values()

    数组实例的 entries(),keys() 和 values() entries(),keys()和values(),用于遍历数组.它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一 ...

  5. WiscKey: Separating Keys from Values in SSD-Conscious Storage [读后整理]

    WiscKey: Separating Keys from Values in SSD-Conscious Storage WiscKey是一个基于LSM的KV存储引擎,特点是:针对SSD的顺序和随机 ...

  6. Object.keys(),Object.values(),Object.entries()

    (1)Object.keys() //       返回数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名. eg:var obj = {a:1,b:'gy'} Ob ...

  7. [Python] dict对象的keys()和values()返回的值,是否总是保证一一对应?

    搜dict的key, value顺序, 中文没搜到想要的结果. 英文答案链接:python-dictionary-are-keys-and-values-always-the-same-order 在 ...

  8. keys(),values()和items()

    a={'a':11,'b':'bb','c':321}for x in a.items(): print(x)  # 每条都输出来print("------------")for ...

  9. python中的keys、values、items

    keys()获取字典中所有的键并放入列表 values()获取字典中所有的值并放入列表 items()获取字典中所有的键值对并放入列表 举个例子: 1 a = { 2 "name" ...

随机推荐

  1. GNU大型项目构建和覆盖率生成(第一篇)

    目录 0. 序言 1. 项目描述 2. 项目构建 2.1 编译规则 2.2 构建过程 3. 覆盖率分析 0. 序言 在开始正文之前,请允许我先说明一下本文的目的和写作的动机,好让读者不惑. 我们知道, ...

  2. webpack,vue中定义的别名怎么在模板, css sass less的图片地址上使用

    webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因... alias: { 's ...

  3. net core天马行空系列: 一个接口多个实现类,利用mixin技术通过自定义服务名,实现精准属性注入

    系列目录 1.net core天马行空系列:原生DI+AOP实现spring boot注解式编程 2.net core天马行空系列: 泛型仓储和声明式事物实现最优雅的crud操作 哈哈哈哈,大家好,我 ...

  4. Mysql高手系列 - 第8篇:详解排序和分页(order by & limit),及存在的坑

    这是Mysql系列第8篇. 环境:mysql5.7.25,cmd命令中进行演示. 代码中被[]包含的表示可选,|符号分开的表示可选其一. 本章内容 详解排序查询 详解limit limit存在的坑 分 ...

  5. spring boot启动加载项CommandLineRunner

    spring boot启动加载项CommandLineRunner 在使用SpringBoot构建项目时,我们通常有一些预先数据的加载.那么SpringBoot提供了一个简单的方式来实现–Comman ...

  6. 关于spring boot多张表建立外健的讨论

    现在有四张表:student(学生表).blogs(博客表).comment(评论表).reply(回复表) 现在说一下这四张表: student(学生表):学生的信息记录表 blogs(博客表):学 ...

  7. 即时聊天APP(五) - 聊天界面

    设置界面没什么好说的,无非也就是加了个对话框来二次提醒用户,现在来讲讲聊天界面. 聊天界面初始化时会得到一个参数,就是对方的id,并设置在标题栏的位置,此界面也是使用RecyclerView来展示聊天 ...

  8. [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 ...

  9. eclipse中xml文件格式化

    eclipse中xml文件格式化(ctrl+shift+f),可能会发现格式化xml文件后很乱,如图: 这不是我想要的样子,我想要的是这样的: 解决办法:windows -> Perferenc ...

  10. Android Studio [相对布局RelativeLayout]

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...