《前端面试题》- JS基础 - 伪数组

news2024/9/24 3:25:07

第一次听说伪数组这个概念,听到的时候还以为是说CSS的伪类呢,网上一查,这东西原来还是个很常见的家伙。

何为伪数组

伪数组有两个特点:

  1. 具有length属性,其他属性(索引)为非负整数
  2. 但是却不具备数组的方法
    也就是看起来像是数组,然而并不是…

举个例子看看

  1. 函数内部的arguments
function testArguments(a, b, c) {
    console.log(`arguments is array: ${Array.isArray(arguments)}`);
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
}
testArguments(1,2,3);

test result
2. DOM列表

  1. JQuery选择得出的列表: $(‘div’)
    随意找一个使用jq的网站,例如:https://www.jq22.com/

如何判断真伪数组

  1. 使用instanceof 方法
  2. 使用Array.isArray()方法: 未必准确,见下文, 使用伪数组.__proto__ = Array.prototype;转换后不可用。
  3. 伪数组.constructor === Array; 适用于带constructor的场景
  4. Object.prototype.toString.call(arr) === ‘[object Array]’

尝试一下:

function testArguments(a, b, c) {
    console.log(`arguments is array: ${Array.isArray(arguments)}`);
    console.log(`arguments is array: ${arguments instanceof Array}`);
    console.log(`arguments is object: ${arguments instanceof Object}`);

    const newArguments = Array.prototype.slice.call(arguments);
    console.log(`newArguments is array: ${Array.isArray(newArguments)}`);
    console.log(`newArguments is array: ${newArguments instanceof Array}`);
    console.log(`newArguments is object: ${newArguments instanceof Object}`);
}

testArguments(1,2,3);

如何把伪数组转换成数组

  1. Array.prototype.slice.call(); / Array.prototype.slice.apply();
  2. 原型继承: 伪数组.__proto__ = Array.prototype;arguments 无影响正常使用
  3. ES6中数组的新方法 from()
方法一: Array.prototype.slice.call(); / Array.prototype.slice.apply();
function testArguments(a, b, c) {
    console.log(`arguments is array: ${Array.isArray(arguments)}`);
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);

    const newArguments = Array.prototype.slice.call(arguments);
    console.log(`newArguments is array: ${Array.isArray(newArguments)}`);
    console.log(newArguments[0]);
    console.log(newArguments[1]);
    console.log(newArguments[2]);
}
testArguments(1,2,3);

方法二: 原型继承: 伪数组.__proto__ = Array.prototype;arguments 无影响正常使用
使用该方法进行转换时,Array.isArray()方法不可用来进行判断。

方法三: ES6中数组的新方法 from()

尝试一下:

function testArguments(a, b, c) {
    console.log(`arguments is array: ${Array.isArray(arguments)}`);
    console.log(`arguments is array: ${arguments instanceof Array}`);

    const newArguments = Array.from(arguments);
    console.log(`newArguments is array: ${Array.isArray(newArguments)}`);
    console.log(`newArguments is array: ${newArguments instanceof Array}`);
}
testArguments(1,2,3);

总结

  1. 在使用判断是否为数组时,如果无法知道数组是否可能是使用“原型继承”的方法转换得到的,就不要使用Array.isArray()方法判断对象是否为数组的方法。
  2. 在写转换方法时,由于原型继承: 伪数组.__proto__ = Array.prototype;可能存在判断失误,尽量使用Array.prototype.slice.call(); / Array.prototype.slice.apply();如果可以使用ES6,使用Array.from()方法较为简单明了。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python 操作 json 数据

在Python中,操作JSON数据主要包括序列化(将Python对象转换为JSON格式)和反序列化(将JSON字符串转换回Python对象)。 以下是使用Python内置的json模块进行这些操作的基本示例: JSON 序列化 (Serialization…

记一次事件到供应链的顶级拉扯

前言 某天,夜里3点 天刚蒙蒙亮 开局:我有一个朋友~ 看不懂发的什么意思,再仔细看看,懂了! 闲言少叙,遇事不决先上bp,启动! 进去之后发现基本没什么实际功能点,像假的一样。注意这里…

怎么修改图片大小?在线图片处理的方法介绍

在日常生活中,我们经常需要调整图片大小以适应不同的网络上传要求。不管是微信、QQ换头像背景图片,还是各种社交媒体相册,都需要对图片改大小,今天就介绍几个关于修改图片大小的方法,可以不用下载安装就能在线图片处理…

学浪怎么下载视频

购买了学浪的人希望能随时随地学习,而学浪提供了许多有价值的视频课程。然而,由于网络限制或个人需求,有时候我们可能希望将这些视频下载到本地。本文将介绍如何利用简单的工具实现学浪视频的下载,让学习变得更加自由灵活。 学浪…

OSPF 开放式最短路径优先协议

目录 技术产生原因:因为RIP存在不足 OSPF优点: RIPV2和OSPFV2比较: 相同点: 不同点: OSPF的结构化部署 --- 区域划分 区域划分的主要目的: 区域边界路由器 --- ABR : 区域划分的要求&am…

【源码】2024全开源多语言多商户跨境商城源码|多语言跨境外贸电商系统App

ikTok SHOP跨境电商系统V8版是一套B2CB2B跨境电商商城系统源码,多商户多语言,全新百变DIY模板;该系统支持B-C自营、B-B-C第三方卖家系统、B2B批发电商模式;该源码是使用Laravel框架PHP开发的,前后端全开源可二开。 版…

护眼灯什么牌子好,几款专业的护眼灯品牌推荐

​随着近视在孩子中的普遍性日益增加,家长们开始认识到,除了学业成就外,孩子的视觉健康同样需要早期关注。毕竟,学业的挫折可以逐步克服,但一旦视力受损,眼镜就可能成为终生的伴侣。鉴于此,专业…

企业级网络安全:入侵防御实时阻止,守护您的业务安全

随着互联网技术的快速发展,企业级网络安全问题日益凸显。在这个数字化时代,企业的业务安全不仅关系到企业的形象和声誉,还直接影响到企业的生存和发展。因此,加强企业级网络安全,预防和抵御各种网络攻击已成为企业的重…

【ThinkBox_Deadline_3dmax使用教程】

ThinkBox Deadline 3dmax使用教程 2019-01-18 10:51 1.打开Thinkbox.Deadline 监控器,设置超级用户才能操作提交渲染和设置任务。 2.设置插件和软件的路径的操作: 3.默认安装C盘安装在其他盘符的需要按照路径找相应格式的文件加载(标注的…

EPSON 的 RX8010SJ 为安防产品解决方案

EPSON作为实时时钟解决方案提供商中的佼佼者,为了适应市场需求,推出实时时钟模块RX8010SJ。该款实时时钟模块除了拥有超高性价比以外,还拥有不俗的整体性能,同时集成了日历功能可用于事件标记,非常适合应用在竞争日渐激…

【2024年认证杯】A题详细思路+数据(来源)+成品论文+模型代码(matlab+python)

2024年认证杯A题 解题思路 ⭐⭐第一问题分析第二问题分析第三问题分析 数据与数据来源🎉🎉指标解释数据来源 成品参考论文😊😊python/ matlab 代码🚀🚀 解题思路 ⭐⭐ 这个题目要求我们围绕人造保暖纤维的…

vue模版字符串解析成vue模版对象

模版字符串 this.code <template><div style"width:100% ; height: 100% ;">{{resultData[0].name}}</div> </template> <script> export default {data() {return {resultData: [{ name: 图幅, value: 20 },]}},mounted(){},method…

STM32移植嵌入式开源按键框架

目录 STM32移植嵌入式开源按键框架 MultiButton简介 multi_button.c文件 multi_button.h文件 按键事件 案例使用方法 学习剖析 STM32移植嵌入式开源按键框架 今天移植了一款嵌入式按键框架工程MultiButton&#xff0c;MultiButton是一个小巧简单易用的事件驱动型按键驱动…

15 Python进阶: random和pyecharts

Python random 模块主要用于生成随机数。 random 模块实现了各种分布的伪随机数生成器。 要使用 random 函数必须先导入&#xff1a; import randompython random 模块的一般用法 Python中的random模块提供了生成伪随机数的功能&#xff0c;可以用于模拟、游戏开发、密码学…

关于《CS创世 SD NAND》的技术学习分享

最近发现一个好玩的东西《CS创世 SD NAND》&#xff0c;带大家一起体验一下。 本文引用了部分厂家产品资料及图像&#xff0c;如有侵权&#xff0c;请及时联系我删除&#xff0c;谢谢。 《CS创世 SD NAND》官方网站&#xff1a;http://www.longsto.com/ 什么是CS创世 SD NAND呢…

电商API数据采集接口|跨境卖家在追求精细化运营过程中数字化选品商品采集和商品上架的多方面应用

现在跨境卖家都在追求精细化运营&#xff0c;在精细化运营过程中&#xff0c;数据分析少不了&#xff0c;下面为数据分析在选品、引流、转化率三个方面的应用。 电商商品详情数据采集API接口|数据化选品 全世界各个国家都有着自己的传统与文化&#xff0c;也有着自己的生活方式…

如何正确使用数字化仪前端信号调理?(二)

在上期文章如何正确使用数字化仪前端信号调理&#xff1f;&#xff08;一&#xff09;中&#xff0c;我们为大家介绍了数字化仪前端电路所需的特性以及使用过程中需要的输入抗阻和输入耦合&#xff0c;本期文章将为您介绍数字化仪前端信号调理的使用过程中所需的输入电压范围&a…

RabbitMQ实战教程(2)

十、RabbitMQ实战教程 在掌握了SpringCloudAlibaba的应用后&#xff0c;再来玩&#xff01;&#xff01; 为了更好的理解RabbitMQ在项目中的作用&#xff0c;来一套实战操作。 10.1 RabbitMQ实战场景 首先模拟一个场景&#xff0c;电商中对应的处理方案。 模拟一个用户在电…

WIFI详解及周边拓展

一、WiFi协议简介 WiFi协议&#xff0c;也称为无线保真技术&#xff0c;是一种允许电子设备通过无线方式在局域网&#xff08;WLAN&#xff09;和互联网上进行通信的技术标准。WiFi协议是基于IEEE 802标准的子系列标准协议&#xff0c;由电气和电子工程师协会制定。随着移动设备…

HTML的路径

路径的分类&#xff1a; 1.绝对路径 ~用于引用别处的图片&#xff08;非本地的&#xff09; 2.相对路径 ~用于引入自己项目内的图片 绝对路径&#xff1a; 绝对路径&#xff0c;即使从网上搜到的图片的位置&#xff08;我们以图床的方式为例&#xff09; 相对路径&#xff1a; …