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

第一次听说伪数组这个概念,听到的时候还以为是说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()方法较为简单明了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

solidworks electrical 2D和3D有什么区别

SolidWorks Electrical 是一款专为电气设计开发的软件工具,它提供了两种主要的工作环境:2D电气设计和3D电气集成设计。两者在功能和应用场景上存在显著的区别: SolidWorks Electrical 2D 设计 特点与用途: SolidWorks Electrica…

小程序中配置scss

找到:project.config.json 文件 setting 模块下添加: "useCompilerPlugins": ["sass","其他的样式类型"] 配置完成后,重启开发工具,并新建文件 结果:

MapReduce过程解析

一、Map过程解析 Read阶段:MapTask通过用户编写的RecordReader,从输入的InputSplit中解析出一个个key/value。Map阶段:将解析出的key/value交给用户编写的Map()函数处理,并产生一系列的key/value。Collect阶段:在用户编…

Day36|贪心算法part05:435. 无重叠区间、763.划分字母区间、56. 合并区间

435. 无重叠区间 有了上题射气球的因子,这题也就有思路了,反正无脑排序就行了: 首先将所有区间按照end的大小从小到大排序;选取最早end为起始x_end遍历所有区间,如果该区间的start比end大(可重叠&#xf…

【牛客SQL快速入门】SQL基础(三)

一、条件函数 IF 条件函数 IF函数是最常用到的条件函数,写法为 if(xn,a,b),xn代表判断条件,如果xn时,那么结果返回a,否则返回b。 -- 把非北京大学的用户统一归为其他大学 Select device_id,if(university ‘北京大…

51-基于GitHubActions的CI实战

在Go项目开发中,我们要频繁地执行静态代码检查、测试、编译、构建等操作。如果每一步我们都手动执行,效率低不说,还容易出错。所以,我们通常借助CI系统来自动化执行这些操作。 当前业界有很多优秀的CI系统可供选择,例…

✌2024/4/3—力扣—无重复字符的最长子串

代码实现&#xff1a; 解法一&#xff1a;暴力法 int lengthOfLongestSubstring(char *s) {int hash[256] {0};int num 0;for (int i 0; i < strlen(s); i) {int count 0;for (int j i; j < strlen(s); j) {if (hash[s[j]] 0) {hash[s[j]];count;num num > cou…

基于 WebRTC 实现的点对点文件传输和音视频聊天工具 | 开源日报 No.220

tl-open-source/tl-rtc-file Stars: 2.1k License: MIT tl-rtc-file 是一个基于 WebRTC 的文件传输工具&#xff0c;支持跨终端、不限平台的在线文件传输。它提供了丰富的功能和特性&#xff1a; 分片传输&#xff1a;支持大型文件的分片传输&#xff0c;确保高效稳定地完成上…

OSPF的P2P和Broadcast

OSPF为什么会有P2P和BROADCAST两种类型 OSPF&#xff08;开放最短路径优先&#xff09;协议中存在P2P&#xff08;点对点&#xff09;和BROADCAST&#xff08;广播多路访问&#xff09;两种网络类型&#xff0c;主要是为了适应不同类型的网络环境和需求。具体分析如下&#xf…

Prototype 原型

意图 用原型实例指定创建对象的种类&#xff0c;并且通过复制这些原型创建新的对象。 结构 Prototype声明一个复制自身的接口。ConcretePrototype实现一个复制自身的操作。Client让一个原型复制自身从而创建一个新的对象。 适用性 当一个系统应该独立于他的产品创建、构成和…

设备基础命令,路由基础

直连路由 静态路由 动态路由 根据路由器学习路由信息、生成并维护路由表的方法包括直连路由(Direct)、静态路由(Static)和动态路由(Dynamic)。直连路由&#xff1a;路由器接口所连接的子网的路由方式称为直连路由&#xff1b;非直连路由&#xff1a;通过路由协议从别的路由器…

docker exec 命令提示:Error: No such container: /bin/bash

虽然是低级错误&#xff0c;但是还是记录一下吧。。。。。。。。 这个容器运行起来了&#xff0c;docker ps 是可以查询到的 但是 我想进入 容器内部时就出现了&#xff1a; docker exec -it /bin/bash e51b4dcdf51a Error: No such container: /bin/bash 开始以为是容器内部…

C语言 | Leetcode C语言题解之第22题括号生成

题目&#xff1a; 题解&#xff1a; // 回溯法求解 #define MAX_SIZE 1430 // 卡特兰数: 1, 1, 2, 5, 14, 42, 132, 429, 1430 void generate(int left, int right, int n, char *str, int index, char **result, int *returnSize) {if (index 2 * n) { // 当前长度已达2nre…

多线程的入门(五)线程池的保活策略

线程池是如何保活的呢&#xff1f;通过对源码的分析得出&#xff0c;线程池通过阻塞队列&#xff0c;与关闭工作线程后新生成空闲线程实现的保活策略源代码如下&#xff1a; runkworker&#xff08;&#xff09;方法的getTask&#xff08;&#xff09;方法中有这样一段代码&…

FMix: Enhancing Mixed Sample Data Augmentation 论文阅读

1 Abstract 近年来&#xff0c;混合样本数据增强&#xff08;Mixed Sample Data Augmentation&#xff0c;MSDA&#xff09;受到了越来越多的关注&#xff0c;出现了许多成功的变体&#xff0c;例如MixUp和CutMix。通过研究VAE在原始数据和增强数据上学习到的函数之间的互信息…

避免使用第三方工具完成电脑环境检测

0. 简介 在之前配置各种深度学习环境的时候经常需要先检测一下电脑的软硬件环境&#xff0c;其实整个过程比较重复和固定&#xff0c;所以我们是否有可能一键检测Python版本、PIP版本、Conda版本、CUDA版本、电脑系统、CPU核数、CPU频率、内存、硬盘等内容这是很多Deepper苦恼…

Nginx+Keepalived Kubernetes 负载均衡

部署NginxKeepalived高可用负载均衡器 kube-apiserver高可用架构图&#xff1a; Nginx是一个主流Web服务和反向代理服务器&#xff0c;这里用四层实现对apiserver实现负载均衡。Keepalived是一个主流高可用软件&#xff0c;基于VIP绑定实现服务器双机热备&#xff0c;在上述拓…

关于部署ELK和EFLKD的相关知识

文章目录 一、ELK日志分析系统1、ELK简介1.2 ElasticSearch1.3 Logstash1.4 Kibana&#xff08;展示数据可视化界面&#xff09;1.5 Filebeat 2、使用ELK的原因3、完整日志系统的基本特征4、ELK的工作原理 二、部署ELK日志分析系统1、服务器配置2、关闭防火墙3、ELK ElasticSea…

React + three.js 3D模型骨骼绑定

系列文章目录 React 使用 three.js 加载 gltf 3D模型 | three.js 入门React three.js 3D模型骨骼绑定React three.js 3D模型面部表情控制 项目代码(github)&#xff1a;https://github.com/couchette/simple-react-three-skeleton-demo 项目代码(gitcode)&#xff1a;https:…

这几个方面需要注意,减少服务器被入侵

网络时代&#xff0c;服务器和计算机不时地遭受入侵和攻击&#xff0c;给人们带来了无法预料的重大损失。诸如服务器入侵、数据盗窃和勒索软件等事件频繁发生&#xff0c;这令许多企业和游戏开发团队备受困扰。通过总结经验和吸取教训&#xff0c;我们必须汲取教益&#xff0c;…