2022-07-14 杂记

本篇记录学习js时的一些收获,包含以下内容,在语法上有递进关系:

1、js循环遍历的技巧(label语句、for...in...、for...of...)
2、js中的伪数组(类数组)
3、Array.from()的用途

注:本篇所有实例均基于node环境测试。

js循环遍历中的一些技巧

label语句

提供一个让你在其他位置引用它的标识符。可以用label标识一个循环,然后使用break或continue来指出程序是否该停止循环还是继续循环。


label.png

while循环中也可使用。

搜索了一圈后发现这个语句好像用得很少?基本上都是教程。但在程序复杂,循环结构多层嵌套的时候,不失为一种优化代码、提高代码可读性的方式。

for...in...

循环一个指定的变量来循环一个对象所有可枚举的属性

forin.png

for...of...

可迭代对象(Array、Map、Set、arguments等等)上创建了一个循环,对值的每一个独特属性调用一次迭代。

forof1.png

关于可迭代对象另开新篇记录。

js中的伪数组(类数组)

伪数组和数组一样,具有索引元素和length属性,使其看起来像一个数组。

最经典的伪数组就是函数的arguments对象,可以用索引值访问每一个传入的变量,可以for...of遍历,也具有length属性。

伪数组和数组不同点是,伪数组没有任何Array属性和Array方法,如push。

究其原因,伪数组本质是一个对象,继承自Object,以arguments为例,

示例1

arrayLike1.png

还记得在前面for...of小节中的示例吗,用for... of遍历一个对象字面量创建的对象,结果报错了,不是可迭代对象,而在本例中,arguments可以被for...in遍历。

为了严谨,试着自己用索引的方式给arguments添加属性,

示例2

arrayLike2.png

作为一个对象而言,用这种方式添加属性是没有问题的,因此打印arguments的结果没有争议。arguments.length的值还是4,arguments不是一个数组,length属性不会同数组一样随着元素数目变化而改变。

for...of遍历的结果并没有"hello javascript",因为不是可迭代的。for...in遍历的结果出现了自己添加的属性'4',因为for...in可以遍历自己创建的属性。

为了更清晰一下,以便后续再来阅读时一头雾水,这里再写一个示例,

示例3

arrayLike3.png

arguments的输出结果不出所料,arguments.length也依旧是4,for...of的输出结果也不变,由此也验证了前面的分析。

for...in遍历结果中跳过了'4',已经反复强调了,它是个对象,for...in遍历的是索引值,再举一个数组的实例对比,

示例4

arrayLike4.png

这里虽然for...in跳过了索引'4',但是作为数组在for...of遍历时仍然能够感知到它。

虽然通常情况下不会以这么冒失的方式给arguments添加元素/属性,在这里只是将伪数组的特性测试明白,也因为如此才用了这么多个示例。

以上伪数组的特性最本质的原因是伪数组继承自Object,而数组继承自Array。

Object是Array的爸爸,数组是Array的儿子,儿子继承爸爸,所以拥有爸爸的特性和方法,爸爸不一定有儿子的特性或方法,因此数组有Array的属性和方法。

同时,Object是伪数组的爸爸,伪数组拥有Object的属性和方法,也有自己特有的属性和方法,但他跟Array没有关系,因此不具有Array的特性。

relation.png

图片来源:https://blog.csdn.net/qq_41974199/article/details/118896131

Array.from()

描述:对一个类似数组或可迭代对象创建一个新的、浅拷贝的数组实例。(来自:Array.from() - JavaScript | MDN (mozilla.org)

语法:


Array1.png

arrayLike:想要转换成数组的伪数组对象或可迭代对象
mapFn:新数组中的每个元素会执行mapFn回调
thisArg:执行回调时mapFn的this对象


Array2.png

篇幅有限,关于Array对象的更多记录有机会另表。

参考资料和原文

循环与迭代 - JavaScript | MDN (mozilla.org)

https://blog.csdn.net/qq_41974199/article/details/118896131

Array.from() - JavaScript | MDN (mozilla.org)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容