JS的基本程序结构之循环(持续更新…)

JS的基本程序结构之循环(持续更新…)当一个属性被设置为可枚举 enumerable 它意味着该属性会出现在对象的枚举属性中 例如使用 for in 循环或 Object keys 方法时会包含可枚举的属性

大家好,欢迎来到IT知识分享网。

1、循环

常用的循环控制语句和数组方法的说明:

1.1、数组循环方法:

常规循环方法:

for循环:使用普通的for循环可以遍历数组的所有元素。

do…while循环循环首先执行循环体,然后检查条件,当条件为真时,重复执行循环体。

forof循环:是ES6引入的一种新的遍历方式,可以遍历数组的元素值。

变异数组方法: "push", //   尾增 往数组最后面添加一个元素,成功返回当前数组的长度   "pop",      //   尾删 删除数组的最后一个元素,成功返回删除元素的值   "shift",    //   头删删除数组的第一个元素,成功返回删除元素的值   "unshift",  //   头增往数组最前面添加一个元素,成功返回当前数组的长度   "splice",   //   删除的元素的下标*,删除的个数*,删除后想要在原位置替换 "sort", //   从小到大排序,成功返回排序后的数组    "reverse", //   反序将数组倒序,成功返回倒序后的数组 fill(target, start, end):使用给定的值,填充一个数组, copyWithin():将指定位置的数组复制到其他位置 非变异数组方法: arr.forEach():遍历数组,return ,return之后会影响原来的数组 arr.map():映射数组(遍历数组),return 返回一个新数组 。   arr.filter():过滤数组,返回一个满足要求的数组 arr.every():依据判断条件,数组的元素是否全满足,若满足则返回ture arr.some():依据判断条件,数组的元素是否有一个满足,若有一个满足则返回ture arr.indexOf():查找某个元素的索引值,返回第一个索引值,若不存在,则返回 -1 arr.lastIndexOf():和arr.indexOf()的功能一样,不同的是从后往前查找 arr.find(callback):找到第一个符合条件的数组成员,返回该数组成员。 arr.findIndex(callback):找到第一个符合条件的数组成员的索引值   arr.concat():合并两个或两个以上的数组,可以链式调用,返回合并后的数组 arr.from():将伪数组变成数组,就是只要有length的就可以转成数组。 ---es6 arr.of():将一组值转换成数组,类似于声明数组 ---es6 

1.2、对象循环方法:

1、使用for...in循环可以遍历对象的可枚举属性(包括继承的可枚举属性)。 for (const key in object) {          // 遍历操作 } 2、Object.keys():Object.values()方法返回一个由对象的可枚举属性值组成的数组。可以使用该方法遍历对象的可枚举属性值。 3、Object.values():方法返回一个由对象的可枚举属性值组成的数组。可以使用该方法遍历对象的可枚举属性值。 4、Object.entries()方法返回一个由对象的可枚举属性键值对组成的数组。可以使用该方法遍历对象的可枚举属性及其对应的值。 5、Object.getOwnPropertyNames()方法返回一个由对象的所有属性组成的数组,包括不可枚举属性。 

2、遍历

2.1、可枚举

当一个属性被设置为可枚举(enumerable),它意味着该属性会出现在对象的枚举属性中,例如使用 for…in 循环或 Object.keys() 方法时会包含可枚举的属性。可枚举的属性可以被遍历和访问。

// 将数组的元素设置为不可枚举 for (let i = 0; i < array.length; i++) {        Object.defineProperty(array, i, {            enumerable: false, }); } // 直接将整个数组设置为不可枚举 Object.defineProperty(array, 'length', {          enumerable: false, }); 

2.2、可迭代

可迭代(Iterable) 对象是数组的泛化。这个概念是说任何对象都可以被定制为可在 for..of 循环中使用的对象。

const obj = {        name: 'jiang' }; for (let [key, value] of obj) {          console.log(`${key}: ${value}`); } VM160:2 Uncaught TypeError: obj is not iterable 中间加上: obj[Symbol.iterator] = function* () {        let keys = Object.keys(obj); for (let k of keys) {        yield [k, obj[k]]; } }; // name: jiang  

let range = {        from: 1,to: 5}; // 1. for..of 调用首先会调用这个: range[Symbol.iterator] = function() {        // 2. 接下来,for..of 仅与下面的迭代器对象一起工作,要求它提供下一个值 return {            current: this.from,     last: this.to, // 3. next() 在 for..of 的每一轮循环迭代中被调用 next() {        // 4. 它将会返回 {done:.., value :...} 格式的对象 if (this.current <= this.last) {        return {        done: false, value: this.current++ }; } else {        return {        done: true }; } } }; }; // 现在它可以运行了! for (let num of range) {        alert(num); // 1, 然后是 2, 3, 4, 5 } 

可以应用 for..of 的对象被称为 可迭代的

2.3、类数组

有索引属性和 length 属性的对象被称为 类数组对象。这种对象可能还具有其他属性和方法,但是没有数组的内建方法。

let arrayLike = { 
       // 有索引和 length 属性 => 类数组对象 0: "Hello", 1: "World",   length: 2 }; 

Array.from(obj[, mapFn, thisArg]) 将可迭代对象或类数组对象 obj 转化为真正的数组 Array,然后我们就可以对它应用数组的方法。可选参数 mapFn 和 thisArg 允许我们将函数应用到每个元素。JS的基本程序结构之循环(持续更新...)

3、Map & Set & weak

4.1、Map –> 映射

Map 是一个带键的数据项的集合,就像一个 Object 一样。 但是它们最大的差别是 Map 允许任何类型的键;

Map与对象不同,键不会被转换成字符串。键可以是任何类型。

new Map() —— 创建 map。 map.set(key, value) —— 根据键存储值。 map.get(key) —— 根据键来返回值,如果不存在,则返回 undefined map.has(key) —— 如果 key 存在则返回 true,否则返回 false map.delete(key) —— 删除指定键的值。 map.clear() —— 清空 map。 map.size —— 返回当前元素个数。 map.set('1', 'str1'); // 字符串键 map.set(1, 'num1'); // 数字键 map.set(true, 'bool1'); // 布尔值键 // 还记得普通的 Object 吗? 它会将键转化为字符串 // Map 则会保留键的类型,所以下面这两个结果不同: 

使用对象作为键是 Map 最值得注意和重要的功能之一。在 Object 中,我们则无法使用对象作为键。

 Q:Map 是怎么比较键的?

A:Map 使用 SameValueZero 算法来比较键是否相等。它和严格等于 === 差不多,但区别是 NaN 被看成是等于 NaN。所以 NaN 也可以被用作键。

map.keys() —— 遍历并返回一个包含所有键的可迭代对象, map.values() —— 遍历并返回一个包含所有值的可迭代对象, map.entries() —— 遍历并返回一个包含所有实体[key, value] 的可迭代对象 除此之外,Map 有内建的 forEach 方法,与 Array 类似 

Map存在的意义:

  • 任何键、对象都可以作为键。
  • 有其他的便捷方法,如 size 属性。

4.2、Set –> 集合

Set 是一个特殊的类型集合 —— “值的集合”(没有键),它的每一个值只能出现一次。

它的主要特点是,重复使用同一个值调用 set.add(value) 并不会发生什么改变。这就是 Set 里面的每一个值只出现一次的原因。

例如,我们有客人来访,我们想记住他们每一个人。但是已经来访过的客人再次来访,不应造成重复记录。每个访客必须只被“计数”一次。

new Set(iterable) —— 创建一个 set,如果提供了一个 iterable 对象(通常是数组),将会从数组里面复制值到 set 中。 set.add(value) —— 添加一个值,返回 set 本身 set.delete(value) —— 删除值,如果 value 在这个方法调用的时候存在则返回 true ,否则返回 false set.has(value) —— 如果 value 在 set 中,返回 true,否则返回 false set.clear() —— 清空 set set.size —— 返回元素个数。 实践去重: let values = ["Hare", "Krishna", "Hare", "Krishna", "Krishna", "Krishna", "Hare", "Hare", ":-O" ]; values = Array.from(new Set(values)); console.log(values) // ['Hare', 'Krishna', ':-O'] 

set存在的意义:

  • Set 替代方法是一个用户数组,用 arr.find 在每次插入值时检查是否重复。
  • Set 内部对唯一性检查进行了更好的优化。

4.3、weakMap –> 弱映射

WeakMap 是类似于 Map 的集合,它仅允许对象作为键,并且一旦通过其他方式无法访问这些对象,垃圾回收便会将这些对象与其关联值一同删除。

WeakMap 不支持迭代以及 keys(),values() 和 entries() 方法。所以没有办法获取 WeakMap 的所有键或值。 WeakMap 只有以下的方法: weakMap.get(key) weakMap.set(key, value) weakMap.delete(key) weakMap.has(key) let john = {          name: "John" }; let weakMap = new WeakMap(); let defa_WM = weakMap.set(john, "jiang111"); console.log(weakMap.get(john)) // jiang111 john = null; // 覆盖引用 console.log(defa_WM) //{"key": {"name":"John"},"value":"jiang111"} console.log(weakMap.get(john)) // undefined 已被删除 

WeakMap 和 Map 的第一个不同点就是,WeakMap 的键必须是对象,不能是原始值!

WeakMap存在的意义:

  • WeakMap 的主要应用场景是 额外数据的存储。
  • 我们可以存储(“缓存”)函数的结果,以便将来对同一个对象的调用可以重用这个结果。
4.4、weakSet –> 弱集合

WeakSet 是类似于 Set 的集合,它仅存储对象,并且一旦通过其他方式无法访问这些对象,垃圾回收便会将这些对象删除。

与 Set 类似,但是我们只能向 WeakSet 添加对象(而不能是原始值)。 对象只有在其它某个(些)地方能被访问的时候,才能留在 WeakSet 中。 跟 Set 一样,WeakSet 支持 add,has 和 delete 方法,但不支持 size 和 keys(),并且不可迭代。 变“弱(weak)”的同时,它也可以作为额外的存储空间。但并非针对任意数据,而是针对“是/否”的事实。WeakSet 的元素可能代表着有关该对象的某些信息。 例如,我们可以将用户添加到 WeakSet 中,以追踪访问过我们网站的用户: let visitedSet = new WeakSet(),john = {          name: "John" }; visitedSet.add(john); // John 访问了我们 alert(visitedSet.has(john)); //检查 John 是否来访过? true john = null; // visitedSet 将被自动清理(即自动清除其中已失效的值 john) 

WeakSet存在的意义:

  • 主要优点是它们对对象是弱引用,所以被它们引用的对象容易地被回收机制回收。
  • 这是以不支持 clearsizekeysvalues 等作为代价换来的……
  • WeakMap 和 WeakSet 被用作“主要”对象存储之外的“辅助”数据结构。一旦将对象从主存储器中删除,如果该对象仅被用作 WeakMap 或 WeakSet 的键,那么该对象将被自动清除。

总结: 

WeakMap 和 WeakSet 最明显的局限性就是不能迭代,并且无法获取所有当前内容。那样可能会造成不便,但是并不会阻止 WeakMap/WeakSet 完成其主要工作 —— 为在其它地方管理对象数据提供“额外”存储。  —> vue3里就用了这个JS的基本程序结构之循环(持续更新...)

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/137380.html

(0)
上一篇 2025-06-20 21:10
下一篇 2025-06-20 21:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信