ES6-for...of语法解构

快来打我* 2022-05-15 04:06 128阅读 0赞

**1.for...of用法**

可以遍历哪些类型数据：

（1）数组

例子：

<script>
    let arr = ['red','green','blue'];
    for(let val of arr){
       console.log(val);//直接输出值：red，green，blue
    }
    </script>

（2）字符串：

例子:

<script>
    for(let val of 'abcdefg'){
       console.log(val);//直接输出值：a,b,c,d,e,f,g
    }
    </script>

(3)nodeList列表：

例子：

<ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
    </ul>

<script>
    var lis = document.querySelectorAll('ul li');
    for(let list of lis){
    console.log(list);//输出 <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
    }
    </script>

(4) 类数组对象  
(5) arguments  
(6)Map  
(7)Set

**2.与其他遍历方法的比较（for循环、for...in、forEach）**

（1）for...in与for...of比较：

a. for...of可以遍历的类型比for...in更多；

b.for...of直接遍历出值，for...in直接遍历出key；

例子：

<script>
    let arr = ['red','green','blue'];
    for(var i of arr){
       console.log(i);//直接输出的是key值0,1,2
    }
    </script>

（2）forEach

a. for...of可以遍历的类型比forEach更多；

b.forEach只能用数组；

c.forEach不能用break和continue等结束语句,for...of可以；

<script>
    let arr = ['red','green','blue'];
    arr.forEach(function(){
    })
    </script>

**3.Iterator（遍历器的概念）**

有时也称迭代器，是ES6中定义的一个接口；

数组、字符串、nodeList等实现了Iterator的接口，也就是说，实现遍历器接口的数据类型都可以用于for...of;

对象没有实现遍历器接口，不能使用for...of；

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6语法之：解构赋值

先要知道，这个用法有一套提取值的**模式**。解构就是“按照一定模式，从数组和对象中提取值”。其次，了解一些使用场合，比如下面，一次从对象p取得两个值。 c...

喜欢ヅ旅行/ 2024年04月20日 00:19/ 0 赞/ 16 阅读

相关 ES6基础语法----解构

目录解构 1.数组解构等号左边的变量放到中括号内部，匹配右侧数组中的元素。 2.对象解构 3 字符串解构 4数值解构可以获取到数值包装器构造函数原型中指定的方

冷不防/ 2024年04月07日 15:56/ 0 赞/ 18 阅读

相关 ES6～解构赋值

解构赋值：定义： ES6按照统一模式，从数组和对象中提取值，对变量进行赋值，这样被称为解构．注意： \\1.\\node.js目前還不支持解构赋值，所以

刺骨的言语ヽ痛彻心扉/ 2022年06月05日 01:53/ 0 赞/ 230 阅读

相关 ES6-for...of语法解构

1.for...of用法可以遍历哪些类型数据：（1）数组例子： <script> let arr = ['red','green','blue']

快来打我*/ 2022年05月15日 04:06/ 0 赞/ 129 阅读

相关 ES6解构赋值

原文转自[https://www.cnblogs.com/xiaohuochai/p/7243166.html][https_www.cnblogs.com_xiaohuoch

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 16:24/ 0 赞/ 256 阅读

相关 es6 解构赋值

ES6解构赋值传统的变量赋值：变量的解构赋值：数组的解构赋值: 对象的解构赋值:\`(和数组解构赋值类似)\`

短命女/ 2022年02月05日 11:13/ 0 赞/ 296 阅读

相关 es6解构赋值

解构赋值如对象解构 // es6 const electron = require('electron') const { app, Br

Myth丶恋晨/ 2021年12月23日 16:33/ 0 赞/ 306 阅读

相关 ES6——解构赋值

原文链接：[小邵教你玩转ES6][ES6] 解构赋值解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的 let arr = [0

迷南。/ 2021年11月04日 21:46/ 0 赞/ 407 阅读

相关 es6 数组解构

1. 用法 [a, b] = [b, a] let [a, b] = [1, 2] // a=1, b=2 l

不念不忘少年蓝@/ 2021年09月18日 21:54/ 0 赞/ 334 阅读

相关 ES6解构赋值

ES6解构赋值一、什么是解构赋值二、语法 1.数组解构 2.对象解构三、注意点一、什么是解构赋值允许从数组中

客官°小女子只卖身不卖艺/ 2021年09月07日 06:10/ 0 赞/ 375 阅读