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. 简单粗暴详细讲解javascript实现函数柯里化与反柯里化

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...

  2. mybatis_plus插件——生成器

    最近在学习mybatis框架,虽然已经简化了一些Dao代码,但是还想更上一层楼吗?不再被基本的pojo层,controller层,service层,dao层基本重复代码所困恼吗?这里,让我们来学习一下 ...

  3. cssrelative

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. jvm内存溢出问题的定位方法

    jvm内存溢出问题的定位方法 今天给大家带来JVM体验之内存溢出问题的定位方法. 废话不多说直接开始: 一.Java堆溢出 测试代码如下: import java.util.*; public cla ...

  5. C#中读写Xml配置文件常用方法工具类

    场景 有时需要使用配置文件保存一些配置的属性,使其在下次打开时设置仍然生效. 这里以对xml配置文件的读写为例. 1.读取XML配置文. 2.写入XML配置文件. 3.匹配 XPath 表达式的第一个 ...

  6. 排序入门练习题3 谁考了第k名 题解

    题目出处:<信息学奥赛一本通>第二章 上机练习1 题目描述 在一次考试中,每个学生的成绩都不相同,现知道了每个学生的学号和成绩,求考第k名的学生的学号和成绩. 输入格式 输入的第一行包含两 ...

  7. @classmethod @staticmethod 个人理解

    官方解释 @classmethod 一个类方法把类自己作为第一个实参, 就像一个实例方法把实例自己作为第一个实参. 语法格式: class C: @classmethod def f(cls, arg ...

  8. Tomcat 应用中并行流带来的类加载问题

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/f-X3n9cvDyU5f5NYH6mhxQ作者:肖铭轩.王道环 随着 Java8 的不断流行, ...

  9. 2020Pycharm安装教程!最新2020pycharm安装!如何安装Pycharm2020版本!如何安装Pycharm!如何安装2020Pycharm!2020Pycharm永久激活!

    本教程仅用作个人学习,请勿用于商业获利,造成后果自负!!! Pycharm安装 在这插一个小话题哈,Pycharm只是一个编译器,并不能代替Python,如果要使用Python,还是需要安装Pytho ...

  10. ajax发送PUT请求,使用HttpPutFormContentFilter过滤器接受办法

    相信在使用ajax发送put请求时候,肯定遇到过后端数据无法被接受到的405错误. 为什么会遇到这个问题? 1.首先查看Tomcat源码 关于如何将数据封装到Request public class ...