JavaScript学习笔记（七）

最新推荐文章于 2025-07-29 20:25:09 发布
最新推荐文章于 2025-07-29 20:25:09 发布
阅读量1k 收藏 30
点赞数 30
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： javascript 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wz_1992/article/details/140126450

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,
      };

      //定义getter
      Object.defineProperty(fruits, "fullName", {
        get: function () {
          return this.firstName + this.lastNast;
        },
      });

      document.getElementById("demo").innerHTML = fruits.fullName;
    </script>
  </body>

输出：文阿花

尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1454
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
JavaScript学习笔记
x18395499277的博客
03-29 1773
JavaScript学习笔记。
Javascript入门学习笔记
weixin_61370021的博客
04-27 4905
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
4.20 前端JavaScript学习笔记
yuankuna_的博客
04-26 2069
JavaScript是Netscape公司开发的一种脚本语言是以Java为基础，但无需编译，可由浏览器直接解释运行特点：脚本语言、基于对象、简单性、安全性、动态性、跨平台型在 JavaScript 中，可以使用 new 关键字和 Object 构造函数来显式地定义实例对象语法中通过 new 来执行 Object 函数，此时 Object 称为构造函数，此时会返回对应的实例对象。
JavaScript学习笔记(一)
2402_82857752的博客
05-28 3370
本文主要介绍了 JavaScript 的基本概念、语法结构、变量和常量、数据类型及类型转换方法
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1245
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
javascript学习笔记——上
weixin_64574004的博客
10-07 1031
​ 1，HTML定义了网页的内容，CSS定义了网页的布局和网页中内容的样式，而JavaScript控制了网页的行为。​ 2，javascript是一种脚本语言。​ 3，javascript的主要使用范围​ **JavaScript：直接写入HTML输入流：**ducument.write(“HTML语句”)​ **JavaScript：对事件的反应：**onclick​ **JavaScript：改变HTML内容：**DOM。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
尚硅谷JavaScript学习笔记
qq_43813373的博客
07-09 2084
文章目录变量关系运算逻辑运算数组函数 变量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入和自定义只能用一个，不能像css似的进行逻辑覆盖--> <script type="text/javascript" src="javascript.js"
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 2482
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
javascript学习笔记
02-15
JavaScript学习笔记涵盖了多个核心主题，旨在帮助学习者掌握JavaScript编程语言的高级知识和应用技巧。首先，学习笔记从高级程序设计的角度出发，探讨了JavaScript的基础和进阶知识，这包括了编程范式、作用域、闭包...
js面试题 高频(12-22题)
m0_63472757的博客
07-29 589
1.代码服用与抽象: 高阶函数可以将重复的逻辑抽象出来,形成通用函数,提高代码的复用性,柯李华可以将复杂的函数调用转化为一系列简单的步骤,便于部分应用和服用2.函数组合: 高阶函数和柯里化是构建函数式编程风格的关键,它们使的函数的组合变得更容易,从而构建更复杂的功能3.延迟执行与配置化: 柯里化可以将函数执行延迟到所有参数都传入后进行,同时允许在传入部分参数时进行配置,生成定制化的新函数。
echarts实现多个柱状图从右往左动态轮询
wei80231996的博客
07-29 107
1.实现思路，默认截取数据前几项，例如截取前5项，然后根据定时器删除第一项，然后将原来的数据从第6个往数组push进去一个新的数据，一次类推。
vue3卡片垂直无限滚动
qq_63605379的博客
07-28 190
主要是利用css动画向上滚动，js动态计算dom上有多少条数据实时更新滚动速度。js 要在onMounted里调用确保dom已经被渲染。
Redis 键值对操作详解：Python 实现指南
AI浩
07-29 524
场景推荐操作替代方案添加小数据SETHSET（对象）添加大数据HSET/MSET分批次添加添加临时数据SETEX删除小数据DELETEUNLINK删除大数据UNLINK无批量操作管道 + MSET/UNLINK单独命令添加操作使用set()添加单个键值对使用mset()批量添加多个键值对使用setex()添加带过期时间的键值对删除操作优先使用unlink()进行删除（尤其大型数据）仅在需要立即释放内存时使用delete()批量删除时结合管道提高效率。
vue3的一些浅显用法
qswdcs1的专栏
07-27 243
success="handleUserFormSuccess" 是子页面成功后回调方法 父页面 实现 handleUserFormSuccess 方法。需要写个方法暴露给父组件，子页面实现 open 方法 相当于 初始加载类。其中 FieldUserForm 是子页面。2 子页面完成任务后 调用子页面 相关。1/ 父页面调用子页面相关。
Vue.js 完全指南：从入门到精通
最新发布
imlsp12356的博客
07-29 532
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。与其他大型框架不同，Vue 被设计为可以逐步采用 —— 你可以只使用它的核心库（视图层），也可以结合其生态系统（路由、状态管理等）构建复杂应用。响应式数据绑定组件化开发虚拟 DOM指令系统过渡动画系统Vue.js 凭借其易学易用、灵活高效的特点，成为前端开发的首选框架之一。从简单的交互组件到复杂的单页应用，Vue 都能胜任。
基于Vue3.0+Express的前后端分离的任务清单管理系统
WwLK123的博客
07-28 175
该项目是一个待办事项管理系统，主要功能包括任务统计展示、待办事项管理、分类管理和成员管理。前端界面展示了首页任务量统计面板（总任务数、已完成/未完成数）、任务清单、分类管理和成员管理页面。系统采用Vue3+Element Plus开发，通过axios与后端API交互，实现数据动态加载和操作反馈。核心功能包含任务添加（支持项目编号、标题、分类选择、时间设置和成员分配）、分类维护和成员管理等功能，并配有表单验证和操作提示机制。
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值