本篇记录学习js时的一些收获,包含以下内容,在语法上有递进关系:
1、js循环遍历的技巧(label语句、for...in...、for...of...)
2、js中的伪数组(类数组)
3、Array.from()的用途
注:本篇所有实例均基于node环境测试。
js循环遍历中的一些技巧
label语句
提供一个让你在其他位置引用它的标识符。可以用label标识一个循环,然后使用break或continue来指出程序是否该停止循环还是继续循环。
while循环中也可使用。
搜索了一圈后发现这个语句好像用得很少?基本上都是教程。但在程序复杂,循环结构多层嵌套的时候,不失为一种优化代码、提高代码可读性的方式。
for...in...
循环一个指定的变量来循环一个对象所有可枚举的属性。
for...of...
在可迭代对象(Array、Map、Set、arguments等等)上创建了一个循环,对值的每一个独特属性调用一次迭代。
关于可迭代对象另开新篇记录。
js中的伪数组(类数组)
伪数组和数组一样,具有索引元素和length属性,使其看起来像一个数组。
最经典的伪数组就是函数的arguments对象,可以用索引值访问每一个传入的变量,可以for...of遍历,也具有length属性。
伪数组和数组不同点是,伪数组没有任何Array属性和Array方法,如push。
究其原因,伪数组本质是一个对象,继承自Object,以arguments为例,
示例1:
还记得在前面for...of小节中的示例吗,用for... of遍历一个对象字面量创建的对象,结果报错了,不是可迭代对象,而在本例中,arguments可以被for...in遍历。
为了严谨,试着自己用索引的方式给arguments添加属性,
示例2:
作为一个对象而言,用这种方式添加属性是没有问题的,因此打印arguments的结果没有争议。arguments.length的值还是4,arguments不是一个数组,length属性不会同数组一样随着元素数目变化而改变。
for...of遍历的结果并没有"hello javascript",因为不是可迭代的。for...in遍历的结果出现了自己添加的属性'4',因为for...in可以遍历自己创建的属性。
为了更清晰一下,以便后续再来阅读时一头雾水,这里再写一个示例,
示例3:
arguments的输出结果不出所料,arguments.length也依旧是4,for...of的输出结果也不变,由此也验证了前面的分析。
for...in遍历结果中跳过了'4',已经反复强调了,它是个对象,for...in遍历的是索引值,再举一个数组的实例对比,
示例4:
这里虽然for...in跳过了索引'4',但是作为数组在for...of遍历时仍然能够感知到它。
虽然通常情况下不会以这么冒失的方式给arguments添加元素/属性,在这里只是将伪数组的特性测试明白,也因为如此才用了这么多个示例。
以上伪数组的特性最本质的原因是伪数组继承自Object,而数组继承自Array。
Object是Array的爸爸,数组是Array的儿子,儿子继承爸爸,所以拥有爸爸的特性和方法,爸爸不一定有儿子的特性或方法,因此数组有Array的属性和方法。
同时,Object是伪数组的爸爸,伪数组拥有Object的属性和方法,也有自己特有的属性和方法,但他跟Array没有关系,因此不具有Array的特性。
图片来源:https://blog.csdn.net/qq_41974199/article/details/118896131
Array.from()
描述:对一个类似数组或可迭代对象创建一个新的、浅拷贝的数组实例。(来自:Array.from() - JavaScript | MDN (mozilla.org))
语法:
arrayLike:想要转换成数组的伪数组对象或可迭代对象
mapFn:新数组中的每个元素会执行mapFn回调
thisArg:执行回调时mapFn的this对象
篇幅有限,关于Array对象的更多记录有机会另表。
参考资料和原文
循环与迭代 - JavaScript | MDN (mozilla.org)