ES6新特性(三): 可迭代对象和两种新增循环方式

ES6指的是ECMAScript 6,也被称为ES2015。它是JavaScript的一种版本,是ECMAScript标准的第六个版本,于2015年发布。ECMAScript是JavaScript的规范,定义了语言的核心特性和行为。ES6引入了许多新的语法特性和功能,以使JavaScript代码更加现代化、清晰和强大。 在此专栏中,我们会持续更新有关于ES6的新特性,感兴趣的小伙伴们可以订阅一下~

前言

今天我们来聊聊ES6新特性中的可迭代对象,迭代器是一种对象,用于提供一种有序访问集合元素的方式。两种新增的循环方式for of、·for in,这两种循环为 JavaScript 提供了更强大的迭代和遍历能力,使代码更加清晰和简洁。

可迭代对象

可迭代对象(Iterable)是具有迭代行为的对象。在JavaScript中,可迭代对象是一种实现了迭代器协议(Iterator Protocol)的对象。迭代器协议包括一个名为 Symbol.iterator 的方法,该方法返回一个迭代器对象。

  1. next() 方法: 该方法返回一个包含两个属性的对象,这两个属性是:

    • value:表示迭代器返回的当前元素的值。
    • done:表示迭代器是否已经完成遍历集合。如果已完成,返回 true;否则返回 false
  2. return() 方法: 该方法用于提前终止迭代。当调用 return() 后,迭代器会立即完成,并返回一个带有 done: true 的对象,同时可以附带一个可选的 value 属性。

常见的可迭代对象

在 JavaScript 中,许多内置的数据结构和类型都是可迭代对象。我们一起来看看:

  1. 数组 (Array): 数组是最常见的可迭代对象。

    js 复制代码
    const arr = [1, 2, 3, 4];
  2. 字符串 (String): 字符串也是可迭代对象。

    js 复制代码
    const str = "Hello";
  3. Map 和 Set: ES6 引入的 MapSet 类型是可迭代对象。(我们下篇文章中会讲到)

    js 复制代码
    const map = new Map([[1, 'one'], [2, 'two']]);
    const set = new Set([1, 2, 3, 4]);

    自定义可迭代对象: 你可以通过实现 Symbol.iterator 方法创建自定义可迭代对象。

    js 复制代码
    const iterableObject = {
        data: [1, 2, 3, 4],
        [Symbol.iterator]: function() {
            let index = 0;
            return {
                next: () => {
                    if (index < this.data.length) {
                        return { value: this.data[index++], done: false };
                    } else {
                        return { done: true };
                    }
                }
            };
        }
    };

实际上,任何实现了迭代器协议(有 Symbol.iterator 方法)的对象都可以被视为可迭代对象

我们来一起看一下可迭代对象怎么使用方法遍历的:

  1. 数组(Array): 数组是最常见的可迭代对象。

    js 复制代码
    const arr = [1, 2, 3, 4];
    const iterator = arr[Symbol.iterator]();
    console.log(iterator.next()); // { value: 1, done: false }
    console.log(iterator.next()); // { value: 2, done: false }
    // ...
  2. 字符串(String): 字符串也是可迭代对象。

    js 复制代码
    const str = "Hello";
    const iterator = str[Symbol.iterator]();
    console.log(iterator.next()); // { value: 'H', done: false }
    console.log(iterator.next()); // { value: 'e', done: false }
    // ...

for...of

for...of 循环是 ECMAScript 6(ES6)引入的一种遍历可迭代对象元素的语法。它提供了一种更简洁、直观的方法来遍历集合,而不需要关心索引和迭代器的具体实现。

语法形式如下:

js 复制代码
for (const element of iterable) {
    // 执行循环体,element 表示当前迭代的元素值
}

其中,iterable 是一个可迭代对象,而 element 是在每次迭代中表示当前元素的变量

遍历数组:

js 复制代码
const iterableArray = [1, 2, 3, 4];

for (const element of iterableArray) {
    console.log(element);
}
// 输出:
// 1
// 2
// 3
// 4

遍历字符串:

js 复制代码
const str = "Hello";

for (const char of str) {
    console.log(char);
}
// 输出:
// H
// e
// l
// l
// o

for...of 循环可以用于遍历数组、字符串、Map、Set、NodeList 等实现了迭代器协议的对象。 (Map、 Set这些我们在下篇文章中会讲到)

for...of不能遍历传统对象,因为传统对象并没有迭代器属性:

js 复制代码
let obj = {
    a: 1,
    b: 2,
    c: 3
}

for (let item of arr) {
    console.log(item);
}

for (let item of obj) {
    console.log(item);      // 报错,传统对象不具有迭代器属性   obj is not iterable
}

for...in

for...in 循环是 JavaScript 中一种用于遍历对象属性的语法。这个循环不是用于遍历数组元素的,而是用于遍历对象的可枚举属性(包括自身的和继承的)。

语法形式如下:

js 复制代码
for (const key in object) {
    // 执行循环体,key 表示当前属性名,object[key] 表示对应属性值
}

其中,object 是要遍历的对象,而 key 是在每次迭代中表示当前属性名的变量。

以下是一个简单的示例:

js 复制代码
const myObject = { a: 1, b: 2, c: 3 };

for (const key in myObject) {
    console.log(key, myObject[key]);
}
// 输出:
// a 1
// b 2
// c 3

需要注意的是,for...in 循环不保证遍历对象属性的顺序,并且会遍历对象自身的可枚举属性以及从原型链上继承的属性。

对于数组,for...in 会遍历数组的索引,而不是数组元素。因此,对于数组遍历,更推荐使用 for...of 循环。

js 复制代码
const myArray = [10, 20, 30];

for (const index in myArray) {
    console.log(index, myArray[index]);
}
// 输出:
// 0 10
// 1 20
// 2 30
相关推荐
GDAL16 分钟前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿16 分钟前
react防止页面崩溃
前端·react.js·前端框架
z千鑫42 分钟前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js
m0_748256141 小时前
前端 MYTED单篇TED词汇学习功能优化
前端·学习
小马哥编程2 小时前
Function.prototype和Object.prototype 的区别
javascript
小白学前端6662 小时前
React Router 深入指南:从入门到进阶
前端·react.js·react
web130933203983 小时前
前端下载后端文件流,文件可以下载,但是打不开,显示“文件已损坏”的问题分析与解决方案
前端
王小王和他的小伙伴3 小时前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
学前端的小朱3 小时前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿3 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架