ES6指的是ECMAScript 6,也被称为ES2015。它是JavaScript的一种版本,是ECMAScript标准的第六个版本,于2015年发布。ECMAScript是JavaScript的规范,定义了语言的核心特性和行为。ES6引入了许多新的语法特性和功能,以使JavaScript代码更加现代化、清晰和强大。 在此专栏中,我们会持续更新有关于ES6的新特性,感兴趣的小伙伴们可以订阅一下~
前言
今天我们来聊聊ES6新特性中的可迭代对象
,迭代器是一种对象,用于提供一种有序访问集合元素的方式。两种新增的循环方式for of
、·for in
,这两种循环为 JavaScript 提供了更强大的迭代和遍历能力,使代码更加清晰和简洁。
可迭代对象
可迭代对象(Iterable)是具有迭代行为的对象。在JavaScript中,可迭代对象是一种实现了迭代器协议(Iterator Protocol)的对象。迭代器协议包括一个名为 Symbol.iterator
的方法,该方法返回一个迭代器对象。
next()
方法: 该方法返回一个包含两个属性的对象,这两个属性是:
value
:表示迭代器返回的当前元素的值。done
:表示迭代器是否已经完成遍历集合。如果已完成,返回true
;否则返回false
。
return()
方法: 该方法用于提前终止迭代。当调用return()
后,迭代器会立即完成,并返回一个带有done: true
的对象,同时可以附带一个可选的value
属性。
常见的可迭代对象
在 JavaScript 中,许多内置的数据结构和类型都是可迭代对象。我们一起来看看:
1.数组 (Array): 数组是最常见的可迭代对象。
const arr = [1, 2, 3, 4];
2.字符串 (String): 字符串也是可迭代对象。
const str = "Hello";
3.Map 和 Set: ES6 引入的 Map
和 Set
类型是可迭代对象。(我们下篇文章中会讲到)
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