JavaScript学习笔记（七）

45.9 JavaScript 可迭代对象

  • 可迭代对象（Iterables）是可以使用 for..of 进行迭代的对象。

  • 从技术上讲，可迭代对象必须实现 Symbol.iterator 方法。

45.9.1 遍历字符串

  <body><p id="demo"></p><script>const world = "China";var text = "";for (const x of world) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>

输出：
C
h
i
n
a

45.9.2 遍历数组

<body><p id="demo"></p><script>const nums = [1, 2, 3, 4, 5];var text = "";for (const x of nums) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>

输出：1
2
3
4
5

45.9.3 JavaScript 迭代器

JavaScript 迭代器

46、JavaScript Set

  • JavaScript 的 Set（集合）是一组唯一值的集合。

  • 每个值只能在 Set 中出现一次。

  • Set 可以容纳任何数据类型的值。

  • 对于 Set，typeof 返回 object。

  • 对于 Set，instanceof Set 返回 true

  • Set 方法：

在这里插入图片描述

46.1 如何创建 Set

您可以通过以下方式创建 JavaScript Set：

  • 将数组传递给 new Set()
  • 创建一个新的 Set，然后使用 add() 方法添加值
  • 创建一个新的 Set，然后使用 add() 方法添加变量、
<body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);//添加新元素worlds.add(e);worlds.add("f");//重复添加同一个元素只会显示一个worlds.add("f");for (const x of worlds) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为：" + worlds.size + "<br>" + "遍历所有元素为：<br>" + text;</script></body>

46.2 查询Set的值

46.2.1 forEach() 方法

 <body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);//添加新元素worlds.add(e);worlds.add("f");//重复添加同一个元素只会显示一个worlds.add("f");//遍历Set元素  forEach() 方法worlds.forEach(function (value) {text += value + "<br>";});document.getElementById("demo").innerHTML ="worlds长度为：" + worlds.size + "<br>" + "遍历所有元素为：<br>" + text;</script></body>

输出：
worlds长度为：6
遍历所有元素为：
a
b
c
d
e
f

46.2.2 for…of方法

 <body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);//添加新元素worlds.add(e);worlds.add("f");//重复添加同一个元素只会显示一个worlds.add("f");//遍历Set元素   for...of方法for (const x of worlds) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为：" + worlds.size + "<br>" + "遍历所有元素为：<br>" + text;</script></body>

输出：
worlds长度为：6
遍历所有元素为：
a
b
c
d
e
f

46.2.3 values() 方法

  <body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);var values = worlds.values(); //返回 [object Set Iterator]for (const x of values) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为：" + worlds.size + "<br>" + "遍历所有元素为：<br>" + text;</script></body>

输出：worlds长度为：4
遍历所有元素为：
a
b
c
d

46.2.4 keys() 方法

  • Set 没有键。

  • keys() 返回与 values() 相同的结果。

  • 这使得 Set 与 Map 相兼容。

 <body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);var values = worlds.keys(); //返回 [object Set Iterator]for (const x of values) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为：" + worlds.size + "<br>" + "遍历所有元素为：<br>" + text;</script></body>

输出：worlds长度为：4
遍历所有元素为：
a
b
c
d

46.2.5 entries() 方法

  • Set 没有键（key）。

  • entries() 方法返回的是 [value,value] 值值对，而不是 [key,value] 键值对。

  • 这使得 Set 与 Map 兼容：

 <body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);var values = worlds.entries(); //返回 [object Set Iterator]for (const x of values) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为：" + worlds.size + "<br>" + "遍历所有元素为：<br>" + text;</script></body>

输出：
worlds长度为：4
遍历所有元素为：
a,a
b,b
c,c
d,d

47、JavaScript Map

  • Map 保存键值对，其中键可以是任何数据类型。

  • Map 会记住键的原始插入顺序。

  • Map 提供表示映射大小的属性。

  • Map 方法：

在这里插入图片描述

47.1 如何创建 Map

您可以通过以下方式创建 JavaScript 映射：

  • Map 是对象typeof 返回 object，instanceof Map 返回 true
  • 将数组传递给 new Map()
  • 创建映射并使用 Map.set()
  • 获取 Map 中键的值Map.get()
  • 返回 Map 中元素的数量Map.size
  <body><p id="demo"></p><script>const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);//set() 方法将元素添加到Map中fruits.set("grapes", 600);//set() 方法还可用于更改现有的 Map 值：fruits.set("apple", 555);document.getElementById("demo").innerHTML ="fruits长度为：" +fruits.size +"<br>" +"apple对应的value值为：<br>" +fruits.get("apple");</script></body>

输出：fruits长度为：4
apple对应的value值为：
555

  • 删除 Map 元素Map.delete()
<body><p id="demo"></p><script>const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);//删除Map元素：fruits.delete("apple");document.getElementById("demo").innerHTML ="fruits长度为：" +fruits.size +"<br>" +"apple对应的value值为：<br>" +fruits.get("apple");</script></body>

输出：
fruits长度为：2
apple对应的value值为：
undefined

  • 从 Map 中删除所有元素：
  <body><p id="demo"></p><script>const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);//删除Map所有元素：fruits.clear();document.getElementById("demo").innerHTML ="fruits长度为：" +fruits.size +"<br>" +"apple对应的value值为：<br>" +fruits.get("apple");</script></body>

输出：
fruits长度为：0
apple对应的value值为：
undefined

  • 如果 Map 中存在键，则 has() 方法返回 true：
<body><p id="demo"></p><script>const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);//如果 Map 中存在键，则 has() 方法返回 true：var isHas = fruits.has("apple");document.getElementById("demo").innerHTML ="fruits长度为：" +fruits.size +"<br>" +'Map中是否包含"apple":' +isHas;</script></body>

输出：

fruits长度为：3
Map中是否包含"apple":true

  • 为 Map 中的每个键/值对调用回调：Map.forEach()：
 <body><p id="demo"></p><script>var text = "";const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);fruits.forEach(function (value, key) {text += key + "=" + value + "<br>";});document.getElementById("demo").innerHTML = text;</script></body>

输出：

apple=500
orange=200
bananas=100

  • entries() 方法返回一个带有 Map 中 [key,values] 的迭代器对象：
 <body><p id="demo"></p><script>var text = "";const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);for (const x of fruits.entries()) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>

输出：apple,500
orange,200
bananas,100

  • keys() 方法返回一个迭代器对象，其中包含 Map 中的键：
<body><p id="demo"></p><script>var text = "";const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);for (const x of fruits.keys()) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>

输出：
apple
orange
bananas

  • values() 方法返回一个迭代器对象，其中包含 Map 中的值：
 <body><p id="demo"></p><script>var text = "";const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);for (const x of fruits.values()) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>

输出：
500
200
100

48、JavaScript ES5 对象方法

ECMAScript 5 (2009) 向 JavaScript 添加了许多新的对象方法。

  • 管理对象：
// 以现有对象为原型创建对象
Object.create()// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)// 添加或更改对象属性
Object.defineProperties(object, descriptors)// 访问属性
Object.getOwnPropertyDescriptor(object, property)// 以数组返回所有属性
Object.getOwnPropertyNames(object)// 访问原型
Object.getPrototypeOf(object)// 以数组返回可枚举属性
Object.keys(object)
  • 保护对象：
// 防止向对象添加属性
Object.preventExtensions(object)// 如果属性可以添加到对象，则返回 true
Object.isExtensible(object)// 防止更改对象属性（不是值）
Object.seal(object)// 如果对象被密封，则返回 true
Object.isSealed(object)// 防止对对象进行任何更改
Object.freeze(object)// 如果对象被冻结，则返回 true
Object.isFrozen(object)

48.1 更改属性值

<body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//更改属性值Object.defineProperty(fruits, "years", { value: 30 });document.getElementById("demo").innerHTML = fruits.years;</script></body>

输出：30

48.2 更改元数据

ES5 允许更改以下属性元数据：

writable : true      // 属性值可更改
enumerable : true    // 属性可枚举
configurable : true  // 属性可重新配置

writable : false     // 属性值不可更改
enumerable : false   // 属性不可枚举
configurable : false // 属性不可重新配置

ES5 允许更改 getter 和 setter：

// 定义 getter
get: function() { return language }
// 定义 setter
set: function(value) { language = value }

此例设置 language 为只读：

Object.defineProperty(person, "language", {writable:false});

这个例子使 language 不可枚举：

Object.defineProperty(person, "language", {enumerable:false});

48.3 列出所有属性

<body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//设置属性可枚举Object.defineProperty(fruits, "years", { enumerable: true });//列出所有属性document.getElementById("demo").innerHTML =Object.getOwnPropertyNames(fruits);</script></body>

输出：firstName,lastNast,years

48.4 列出可枚举的属性

<body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//更改属性为不可枚举Object.defineProperty(fruits, "years", { enumerable: false });//列出所有属性document.getElementById("demo").innerHTML = Object.keys(fruits);</script></body>

输出：firstName,lastNast

48.5 添加属性

  • Object.defineProperty()
<body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//添加属性Object.defineProperty(fruits, "language", {value: "Chinese",enumerable: true,});//列出所有属性document.getElementById("demo").innerHTML = Object.keys(fruits);</script></body>

输出：firstName,lastNast,years,language

48.6 添加 Getter 和 Setter

  • Object.defineProperty() 方法也可以用来添加 Getter 和 Setter：
  <body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//定义getterObject.defineProperty(fruits, "fullName", {get: function () {return this.firstName + this.lastNast;},});document.getElementById("demo").innerHTML = fruits.fullName;</script></body>

输出：文阿花

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/43214.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用vllm部署大语言模型

使用vllm部署大语言模型

vLLM是一个快速且易于使用的库&#xff0c;用于LLM&#xff08;大型语言模型&#xff09;推理和服务。通过PagedAttention技术&#xff0c;vLLM可以有效地管理注意力键和值内存&#xff0c;降低内存占用和提高计算效率。vLLM能够将多个传入的请求进行连续批处理&#xff0c;从而…
阅读更多...
PTrade常见问题系列5

PTrade常见问题系列5

回测失败&#xff1a;可用资源不足。 回测运行失败&#xff0c;错误码&#xff1a;2 错误信息&#xff1a;可用资源不足&#xff0c;请稍后在创建。 1、之前客户未限制客户容器使用内存和CPU&#xff0c;周末修改配置&#xff0c;限制了内存和CPU&#xff1b; 2、此报错是用户…
阅读更多...
【Javascript】微信小程序项目结构目录详解

【Javascript】微信小程序项目结构目录详解

我白天是个 搞笑废物 表演不在乎 夜晚变成 忧伤怪物 撕扯着孤独 我曾经是个 感性动物 小心地感触 现在变成 无关人物 &#x1f3b5; 张碧晨/王赫野《何物》 微信小程序开发工具提供了一个便捷的开发环境&#xff0c;使开发者可以快速构建和部署小程序。在…
阅读更多...
代码随想录算法训练营Day38|1049. 最后一块石头的重量 II ， 494. 目标和 ， 474.一和零

代码随想录算法训练营Day38|1049. 最后一块石头的重量 II ， 494. 目标和 ， 474.一和零

好久不见&#xff0c;兄弟们&#xff0c;我终于把期末考试考完了&#xff0c;现在已经放暑假回家了&#xff0c;开始恶补算法了&#xff0c;那么废话不多说&#xff0c;来看今天的内容 1049. 最后一块石头的重量 II&#xff1a;代码随想录 这道题目的意思就是给你一个数组表示每…
阅读更多...
【Python】已解决：FileNotFoundError: [Errno 2] No such file or directory: ‘D:\1. PDF’

【Python】已解决：FileNotFoundError: [Errno 2] No such file or directory: ‘D:\1. PDF’

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;FileNotFoundError: [Errno 2] No such file or directory: ‘D:\1. PDF’ 一、分析问题背景 在Python编程中&#xff0c;当你尝试打开一个不存在的文件时&…
阅读更多...
索引唯一约束问题SQL

索引唯一约束问题SQL

新增报错违反唯一约束条件 (JING_DIAN.SYS_C0096533) 【问题原因】 这个问题可能是由于在Oracle APEX中&#xff0c;虽然你创建了一个名为"ISEQ_520227"的索引&#xff0c;但是在插入数据时&#xff0c;违反了唯一约束条件。这可能是因为你的数据表中已经存在相同的…
阅读更多...
压测引擎数据库设计（上）

压测引擎数据库设计（上）

压测引擎数据库设计&#xff08;上&#xff09; 引言 在当今快速发展的互联网时代&#xff0c;软件质量保证和性能测试变得尤为重要。自动化测试平台&#xff0c;提供了一套完整的解决方案&#xff0c;以确保软件产品在发布前能够满足性能和稳定性的要求。本文将深入探讨滴云自…
阅读更多...
jmeter-beanshell学习6-beanshell生成测试报告

jmeter-beanshell学习6-beanshell生成测试报告

前面写了各种准备工作&#xff0c;内容组合用起来&#xff0c;应该能做自动化了&#xff0c;最后一步&#xff0c;生成一个报告&#xff0c;报告格式还是csv 报告生成的路径和文件&#xff0c;在用户参数写好&#xff0c;防止以后改路径或者名字&#xff0c;要去代码里面改。以…
阅读更多...
[AHK V2]AHK能取消正常窗口的双击标题栏最大化事件吗？

[AHK V2]AHK能取消正常窗口的双击标题栏最大化事件吗？

问题&#xff1a; AHK能取消正常窗口的双击标题栏最大化事件吗&#xff1f; 解答&#xff1a; AutoHotkey (AHK)是一个强大的脚本语言&#xff0c;可以用来自定义键盘快捷键、鼠标操作等。如果你想阻止双击Windows标题栏进行最大化操作&#xff0c;你可以编写一个脚本来拦截…
阅读更多...
Django自动生成Swagger接口文档 —— Python

Django自动生成Swagger接口文档 —— Python

1. 前言 当接口开发完成&#xff0c;紧接着需要编写接口文档。传统的接口文档通常都是使用Word或者一些接口文档管理平台进行编写&#xff0c;但此类接口文档维护更新比较麻烦&#xff0c;每次接口有变更&#xff0c;需要手动修改接口文档。在实际的工作中&#xff0c;经常会遇…
阅读更多...
tomcat的优化和tomcat和nginx实现动静分离：

tomcat的优化和tomcat和nginx实现动静分离：

tomcat的优化 tomcat自身的优化 tomcat的并发处理能力不强。大项目不使用tomcat做为转发动态的中间件&#xff08;k8s集群&#xff0c;python&#xff0c;rubby&#xff09;&#xff0c;小项目会使用&#xff08;内部使用&#xff09;&#xff0c;动静分离。 优化tomcat的启动…
阅读更多...
Python入门 2024/7/8

Python入门 2024/7/8

目录 数据容器 dict(字典&#xff0c;映射) 语法 定义字典字面量 定义字典变量 定义空字典 从字典中基于key获取value 字典的嵌套 字典的常用操作 新增元素 更新元素 删除元素 清空字典 获取全部的key 遍历字典 统计字典内的元素数量 练习 数据容器的通用操作…
阅读更多...
linux环境下echo命令简单测试端口是否连通——筑梦之路

linux环境下echo命令简单测试端口是否连通——筑梦之路

语法格式 echo > /dev/tcp/目标主机地址/端口号 示例 echo > /dev/tcp/example.com/80 当命令执行后&#xff0c;若端口是开放的&#xff0c;命令不会有任何输出并且会立即返回命令提示符&#xff1b;若端口未开放或连接失败&#xff0c;则可能由于网络问题、防火墙限…
阅读更多...
在公司的业务杂记1之多选部门且主表没有部门字段(子表查询)

在公司的业务杂记1之多选部门且主表没有部门字段(子表查询)

原型 1.新建&#xff0c;上传报告可多选部门 2.查询&#xff0c;可多选部门 数据库&#xff08;Postgresql&#xff09; 方式一 新增字段Jsonb&#xff1a; CREATE TABLE public.admin_report (admin_report_uuid uuid DEFAULT gen_random_uuid() NOT NULL,admin_report_tit…
阅读更多...
java —— JSP 技术

java —— JSP 技术

一、JSP &#xff08;一&#xff09;前言 1、.jsp 与 .html 一样属于前端内容&#xff0c;创建在 WebContent 之下&#xff1b; 2、嵌套的 java 语句放置在<% %>里面&#xff1b; 3、嵌套 java 语句的三种语法&#xff1a; ① 脚本&#xff1a;<% java 代码 %>…
阅读更多...
安全防御第三天（笔记持续更新）

安全防御第三天（笔记持续更新）

1.接口类型以及作用 接口 --- 物理接口 三层口 --- 可以配置IP地址的接口 二层口 普通二层口 接口对 --- “透明网线” --- 可以将一个或者两个接口配置成为接口对&#xff0c;则 数据从一个接口进&#xff0c;将不需要查看MAC地址表&#xff0c;直接从另一个接口出&#xff1b…
阅读更多...
机器学习模型运用在机器人上

机器学习模型运用在机器人上

机器学习模型在机器人技术中的应用非常广泛&#xff0c;涵盖了从简单的运动控制到复杂的认知和交互功能。以下是几种机器学习模型在机器人上的典型应用&#xff1a; 感知与识别&#xff1a; 计算机视觉&#xff1a;使用卷积神经网络&#xff08;CNNs&#xff09;识别和理解视觉…
阅读更多...
汇川CodeSysPLC教程 Modbus变量编址

汇川CodeSysPLC教程 Modbus变量编址

线圈&#xff1a;位变量&#xff0c;只有两种状态0和1。汇川PLC中包含Q区及SM区等变量。 寄存器&#xff1a;16位&#xff08;字&#xff09;变量&#xff0c;本PLC中包含M区及SD区等变量 说明&#xff1a; 汇川HMI的专用协议使用不同功能码&#xff1a;在访问SM时&#xff0c…
阅读更多...
Python--并发编程--协程

Python--并发编程--协程

概念 协程是轻量级的线程&#xff0c;它是程序员管理的并发机制&#xff0c;使得在一个线程中程序可以在多个函数之间交替运行。 Python中主要通过asyncio模块实现协程。 协程函数 用async修饰的函数 import asyncio# func为协程函数 async def func():await asyncio.slee…
阅读更多...
Linux开发：进程间通过Unix Domain Socket传递文件描述符

Linux开发：进程间通过Unix Domain Socket传递文件描述符

Linux开发：进程间通过Unix Domain Socket传递数据-CSDN博客 介绍了通过UDS传递数据 实际上当需要传递大量的数据时，可以通过UDS直接传递文件描述符，这样接收文件描述符的一方，可以直接从传递过来的文件描述符读取数据 先举例说明： //uds_fd.hpp #pragma once #include &…
阅读更多...
最新文章

Copyright @ 2022~2023