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

2024-03-10 17:58

本文主要是介绍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——可迭代对象与扩展运算符的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/795037

相关文章

Java反转字符串的五种方法总结

《Java反转字符串的五种方法总结》:本文主要介绍五种在Java中反转字符串的方法,包括使用StringBuilder的reverse()方法、字符数组、自定义StringBuilder方法、直接... 目录前言方法一:使用StringBuilder的reverse()方法方法二:使用字符数组方法三:使用自

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

java导出pdf文件的详细实现方法

《java导出pdf文件的详细实现方法》:本文主要介绍java导出pdf文件的详细实现方法,包括制作模板、获取中文字体文件、实现后端服务以及前端发起请求并生成下载链接,需要的朋友可以参考下... 目录使用注意点包含内容1、制作pdf模板2、获取pdf导出中文需要的文件3、实现4、前端发起请求并生成下载链接使

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

Java逻辑运算符之&&、|| 与&、 |的区别及应用

《Java逻辑运算符之&&、||与&、|的区别及应用》:本文主要介绍Java逻辑运算符之&&、||与&、|的区别及应用的相关资料,分别是&&、||与&、|,并探讨了它们在不同应用场景中... 目录前言一、基本概念与运算符介绍二、短路与与非短路与:&& 与 & 的区别1. &&:短路与(AND)2. &:非短

Java的volatile和sychronized底层实现原理解析

《Java的volatile和sychronized底层实现原理解析》文章详细介绍了Java中的synchronized和volatile关键字的底层实现原理,包括字节码层面、JVM层面的实现细节,以... 目录1. 概览2. Synchronized2.1 字节码层面2.2 JVM层面2.2.1 ente

什么是 Java 的 CyclicBarrier(代码示例)

《什么是Java的CyclicBarrier(代码示例)》CyclicBarrier是多线程协同的利器,适合需要多次同步的场景,本文通过代码示例讲解什么是Java的CyclicBarrier,感... 你的回答(口语化,面试场景)面试官:什么是 Java 的 CyclicBarrier?你:好的,我来举个例