`
yuyongkun4519
  • 浏览: 44630 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ES6 for..of详解

 
阅读更多

es6新加了遍历方法for..of,今天看看怎么使用

 

遍历数组值

let arr=['red','green','blue','orange'];
for(let val of arr){
  console.log(val);
}

 

怎么把索引打印出来呢?

 

如果想要打印出索引可以这样

let arr=['red','green','blue','orange'];
for(let index of arr.keys()){
  console.log(index );//0,1,2,3
}

 

还可以这样

let arr=['red','green','blue','orange'];
for(let item of arr.entries()){
  console.log(item[0]);//red,green,blue,orange
}

 

能否key和value一块打印出来呢?

let arr=['red','green','blue','orange'];
for(let [key,val] of arr.entries()){
  console.log(key,val);
}

是不是很简单^_^

 

遍历对象

 

//Object.keys
let param = {
        name: "zhangsan",
        age: 21,
        sex: "male"
    };
for (let key of Object.keys(param)) {
     console.log(key);//name,age,sex
}
 
//Object.values
let param = {
        name: "zhangsan",
        age: 21,
        sex: "male"
    };

for (let value of Object.values(param)) {
     console.log(value);//zhangsan,21,male
}
 
//Object.entries
let param = {
        name: "zhangsan",
        age: 21,
        sex: "male"
    };

for (let [key,value] of Object.entries(param)) {
     console.log(key,value);//name "zhangsan", age 21, sex "male"
}
 

 

 
分享到:
评论

相关推荐

    ES6入门教程之Iterator与for...of循环详解

    【ES6入门教程之Iterator与for...of循环详解】 在ES6中,Iterator(遍历器)是一个重要的概念,它提供了一种通用的遍历数据结构的方法,使得无论是数组、对象还是其他数据类型,都能通过相同的接口进行遍历。遍历器...

    【JavaScript源代码】ES6的循环与可迭代对象示例详解.docx

    `for...of`循环是ES6引入的新语法,它的设计目标是遍历可迭代对象,而不是像`for...in`那样遍历对象的所有可枚举属性。对于传统的`for i`循环,它适用于遍历数组或具有`length`属性的可索引对象。而`for...in`循环则...

    js遍历详解(forEach, map, for, for...in, for...of)

    for...of循环是ES6中引入的一种新的遍历方式,它可以遍历具有可迭代接口的对象,如数组、字符串、Map、Set、generator对象等。for...of循环与for...in不同,它不遍历属性名,而是遍历属性值。for...of循环的一个重要...

    ES6面试题.docx

    5. **for...of循环**:遍历可迭代对象,如数组、Set和Map。 6. **模块化**:原生支持import和export,实现代码模块化。 7. **Set和Map数据结构**:提供了一种存储唯一值的方式,Map为键值对集合。 8. **展开运算符(....

    06 You Don't Know JS:ES6 & Beyond.pdf

    8. **`for..of` Loops `for..of`循环** - 解释`for..of`循环的特点及其与`for`、`forEach`等循环的区别。 - 分析`for..of`循环在迭代数组和其他可迭代对象时的用法。 9. **RegularExpression Extensions 正则...

    详解Js里的for…in和for…of的用法

    然而,`for...of`循环是ES6引入的新特性,它是为了解决`for...in`循环的一些问题而设计的。`for...of`循环用于遍历可迭代对象(如数组、Set、Map等)的元素。下面是`for...of`循环的示例: ```javascript var a = ...

    Javascript – ES6 实战视频课程

    #### 二、ES6 新特性详解 ##### 1. 块级作用域与`let`和`const` - **块级作用域**:在ES6之前,JavaScript只有函数级作用域,没有块级作用域。ES6通过引入`let`和`const`关键字来创建块级作用域。 - **`let`关键字**...

    ES6总结及面试题集合.docx

    for (let arg of args) { console.log(arg); } } ``` 9. **展开操作** 展开运算符(...)可以用于数组和对象,用于将它们展开为单独的元素或属性。例如: ```javascript let cities = ['San Francisco', '...

    详解ES6语法之可迭代协议和迭代器协议

    三是 ES6 创造了一种新的遍历命令 for...of 循环,Iterator 接口主要供 for...of 消费。 迭代器的遍历过程是这样的。创建一个指针对象,指向当前数据结构的起始位置。第一次调用指针对象的 next 方法,可以将指针...

    详解ES6 Symbol 的用途

    例如,JavaScript标准中一些内建的Symbol,如@@iterator,允许对象实现一个标准的迭代协议,从而可以使用for...of循环来迭代对象。 在对象内部使用Symbol作为属性键时,这些属性不会出现在Object.keys()、JSON....

    javaScript使用详解.pdf

    2. 控制流语句:包括条件语句(if...else、switch)、循环语句(for、while、do...while)以及跳转语句(break、continue)。 3. 函数:JavaScript中的函数是第一类对象,可以作为变量赋值、作为参数传递、作为...

    ES6新特性二:Iterator(遍历器)和for-of循环详解

    ES6新特性二:Iterator(遍历器)和for-of循环详解 ES6中引入了Iterator(遍历器)和for-of循环这两个新特性,极大地简化了遍历操作的实现方式。在本文中,我们将详细介绍Iterator(遍历器)和for-of循环的实现原理、使用...

    ES6新特性三: Generator(生成器)函数详解

    "ES6新特性-Generator函数详解" Generator函数是一种特殊的函数类型,它可以控制自己的执行状态,並且可以通过yield关键字来返回中间结果。在ES6中,Generator函数作为一种新的特性被引入,主要用于解决异步编程和...

    ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解

    3. **for...of循环**:ES6引入的for...of循环专门用来遍历可迭代对象,底层就是调用Iterator接口。 **遍历器对象** 遍历器对象包含一个`next()`方法,每次调用都会返回一个对象,包含两个属性:`value`表示当前...

    详解JS中遍历语法的比较

    最后,for...of是ES6新增的遍历语法,它提供了一种遍历可迭代对象的简洁方式。for...of循环可以直接使用在数组、Map、Set结构、某些类似数组的对象(如arguments对象和DOMNodeList对象),以及字符串上。其最大优点...

    详解ES6之async+await 同步/异步方案

    详解ES6之async+await同步/异步方案 async+await是ES6中引入的异步编程解决方案,旨在解决异步编程中的回调地狱问题。下面我们将详细介绍async+await的工作原理和使用方法。 异步编程的几个场景 异步编程是...

    ES6总结和一个简单小问题

    - 使用 `for...of` 循环遍历字符串的每个字符。 - `includes()`, `startsWith()`, `endsWith()` 分别检查字符串是否包含、以某个子字符串开头或结尾。 - `padStart()` 和 `padEnd()` 用于字符串填充,确保达到...

Global site tag (gtag.js) - Google Analytics