JavaScriptES6——可迭代对象与扩展运算符

本文主要是介绍JavaScriptES6——可迭代对象与扩展运算符，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

一、可迭代对象是什么？
二、各迭代方法的区别
- - 1. for in 迭代方法
  - 2. for..of迭代方法和foreach迭代方法
三、扩展运算符的使用
总结

一、可迭代对象是什么？

可迭代对象包括：Array、Set、Map、Arguments、String、Typed Array、Generators这7类。而Object类型不是可迭代对象。
其主要原因在于这7类对象是线性结构，且其构造函数的原型对象中具有[Symbol.iterator]迭代器，而Object是非线性结构，不具有迭代器。
可迭代对象可以通过for…of方法、foreach进行迭代，而Object无法使用for…of和foreach方法。

var arr = [1,2,3];
for (let i of arr) {console.log(i);
}arr.forEach((e) => {console.log(e);
})

二、各迭代方法的区别

1. for in 迭代方法

for…in迭代方法可以用于Array和Object的迭代，其余方法无法直接通过for…in方法进行迭代。

var set = new Set([1, 2, 3, 4]);
for(let i in set){// 此处不会进入该for循环，也不会报错console.log(set[i])
}
var arr = [...set];
for(let i in arr){// 此处会进入该for循环console.log(arr[i])
}

注意，for…in方法对于对象的迭代时，可以访问到对象及原型链上的各种可枚举的属性和方法。

2. for…of迭代方法和foreach迭代方法

这两种迭代方法只能用于可迭代对象，是通过[Symbol.iterator]迭代器实现的迭代。
（1）for…of迭代方法和for…in迭代方法的区别在于，for…of可以访问到可迭代对象内的所有自身的属性，而for…in方法还会访问到其他属性。例如：

var arr = [1, 2, 3, 4, 5]
arr.name = 'test'
Array.prototype.len = 10for (let i in arr) {console.log(arr[i]) // 将输出 test 和 10
}for (let i of arr) {console.log(i) // 不会输出 test 和 10
}

（2）foreach迭代方法在使用时要注意，使用break和continue将报错，使用return也不会return而会继续执行方法，必须配合try/catch调出循环。

三、扩展运算符的使用

1、es6中新增的…是对象的扩展运算符，是将可迭代对象中可枚举的所有属性值拷贝至当前对象中。
2、在es2019中进行了更新，使得…可以应用于对象的展开，可以将对象的属性值拷贝至对象中，无法拷贝至Array、Map、Set等其他可迭代对象中。

var set = new Set([1, 2, 3, 4]);
var arr = [...set]; // [1,2,3,4]var map = new Map([['a', 1],['b', 2],
]);
var arr = [...map]; // [['a', 1],['b', 2]]var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6, 7];
var arr3 = [...arr1, ...arr2]; // [1,2,3,4,5,6,7]

而Object的扩展运算符只能应用于Object的拷贝中：

let obj = {x: 1,y: 2,z: 3,
};
var arr = [...obj]; // obj is not iterable
var obj2 = { ...obj }; // 可以成功运行

3、一道面试题：如果要使上述代码不报错，应该如何做？
答案是应该在obj中或者Object的prototype中新增[Symol.iterator]属性，自定义迭代器。

Object.prototype[Symbol.iterator] = function () {const self = this;let index = 0;let keys = Object.keys(self);return {next() {if (index < keys.length) {return {value: self[keys[index++]],};} else {return { done: true };}},};
};

需要注意：
（1）[Symol.iterator]是固定写法，用于定义迭代器。
（2）迭代器return一个对象，对象中必须有一个next()方法，该方法用于返回结果，返回结果为一个个的对象，属性包括value和done，value代表迭代的值，done代表是否全部完成，当done不设置或为false的时候继续走next方法，否则将返回迭代结果。迭代结果为value的组合。