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

简介: 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
  1. return() 方法: 该方法用于提前终止迭代。当调用 return() 后,迭代器会立即完成,并返回一个带有 done: true 的对象,同时可以附带一个可选的 value 属性。

常见的可迭代对象

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

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

const arr = [1, 2, 3, 4];

2.字符串 (String): 字符串也是可迭代对象。

const str = "Hello";

3.Map 和 Set: ES6 引入的 MapSet 类型是可迭代对象。(我们下篇文章中会讲到)

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

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

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): 数组是最常见的可迭代对象。

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): 字符串也是可迭代对象。

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)引入的一种遍历可迭代对象元素的语法。它提供了一种更简洁、直观的方法来遍历集合,而不需要关心索引和迭代器的具体实现。

语法形式如下:

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

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

遍历数组:

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

遍历字符串:

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不能遍历传统对象,因为传统对象并没有迭代器属性:

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 中一种用于遍历对象属性的语法。这个循环不是用于遍历数组元素的,而是用于遍历对象的可枚举属性(包括自身的和继承的)。

语法形式如下:

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

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

以下是一个简单的示例:

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 循环。

const myArray = [10, 20, 30];
for (const index in myArray) {
    console.log(index, myArray[index]);
}
// 输出:
// 0 10
// 1 20
// 2 30
相关文章
|
4月前
|
存储 Java 索引
JavaSE——集合框架一(7/7)-Collection集合的总结、集合的并发修改异常问题(案例引入、for循环-解决方法、迭代器-解决方法、小结)
JavaSE——集合框架一(7/7)-Collection集合的总结、集合的并发修改异常问题(案例引入、for循环-解决方法、迭代器-解决方法、小结)
41 0
ES6新增循环对象的四种方法(通俗易懂)
ES6新增循环对象的四种方法(通俗易懂)
ES6新增操作字符串的七种方法
ES6新增操作字符串的七种方法
|
5月前
|
JavaScript 前端开发 索引
es6 数组新增哪些方法以及使用场景
es6 数组新增哪些方法以及使用场景
56 0
|
10月前
|
JavaScript 前端开发
ES6学习(四)—字符串的新增方法
ES6学习(四)—字符串的新增方法
|
JavaScript 前端开发
ES6新增特性学习
ES6新增特性学习
|
JavaScript 前端开发 数据库
什么是异步迭代?如何自定义迭代?一文详解ES6的迭代器与生成器
迭代器是帮助我们对某个数据结构进行遍历的对象,这个`object`有一个`next`函数,该函数返回一个有`value`和`done`属性的`object`,其中`value`指向迭代序列中当前`next`函数定义的值。
85 0
什么是异步迭代?如何自定义迭代?一文详解ES6的迭代器与生成器
|
存储 前端开发 JavaScript
ES6新特性。对象、数组新增方法
ES6新特性。对象、数组新增方法
182 0
|
JavaScript 索引
数组的扩展和新增方法
数组的扩展和新增方法
95 0
|
JavaScript 前端开发 索引
【ES6】数组新增拓展
【ES6】数组新增拓展
78 0