本文主要是介绍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的组合。
总结
1.可迭代对象包括Map、Set、Array、String、Arguments、Typed Array、Generators这7中类型,Object不属于可迭代对象。
2.可迭代对象可以通过for…of方法和foreach方法进行迭代,是通过[Symbol.iterator]实现的。
3.for…in方法只能应用于Array类型和Object类型中,无法应用于其他的可迭代对象的迭代。
4.如果想要Object支持可迭代对象的spread或者是for…of,则必须要给Object定义[Symbol.iterator]。
这篇关于JavaScriptES6——可迭代对象与扩展运算符的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!