当前位置: 首页 > news >正文

JavaScript 类数组对象与 arguments

在 JavaScript 中存在一种特殊的对象,我们称之为类数组对象,其性质与数组相似。我们经常会遇到各种类数组对象,最常见的便是 argumengs。

类数组对象

所谓类数组对象,就是指可以通过索引属性访问元素并且拥有 length 属性的对象。

一个简单的类数组对象是长这样的

var arrLike = {
  0: 'name',
  1: 'age',
  2: 'job',
  length: 3
}
复制代码

而它所对应的数组应该是这样子的

var arr = ['name', 'age', 'job'];
复制代码

我们说类数组对象与数组的性质相似,是因为类数组对象在访问赋值获取长度上的操作与数组是一致的。

数组与类数组对象的访问

console.log(arr[0]); // name
console.log(arrLike[0]); // name
复制代码

数组与类数组对象的赋值

arr[0] = 'new name';
arrLike[0] = 'new name';
复制代码

获取数组与类数组对象的长度

console.log(arr.length); // 3
console.log(arrLike.length); // 3
复制代码

可以看出,在访问、赋值、获取长度时,对类数组对象的操作与对数组是一致的。那么,类数组对象与数组的区别是在哪里呢?

类数组对象与数组的区别是类数组对象不能直接使用数组的方法。

如下类数组对象使用数组方法时会报错

arrLike.push('hobby');  // Uncaught TypeError: arrLike.push is not a function
复制代码

那么我们希望类数组对象能够和数组一样使用数组的方法,应该怎么做呢?我们一般是通过 Function.call 或者 Function.apply 方法来间接调用。

// 使用 call
Array.prototype.push.call(arrLike, 'hobby');
console.log(arrLike); // { '0': 'name', '1': 'age', '2': 'job', '3': 'hobby', length: 4 }
var arrLikeStr = Array.prototype.join.call(arrLike, '&')
console.log(arrLikeStr); // name&age&job&hobby
复制代码
// 使用 apply
Array.prototype.push.apply(arrLike, ['hobby']);
console.log(arrLike); // { '0': 'name', '1': 'age', '2': 'job', '3': 'hobby', length: 4 }
var arrLikeStr = Array.prototype.join.apply(arrLike, ['&'])
console.log(arrLikeStr); // name&age&job&hobby
复制代码

在实际的开发过程中,为了方便对数据的操作,我们还经常会通过 Array.prototype.slice 或 Array.prototype.splice 等方法把类数组对象转换成真正的数组。

// 使用 call
console.log(Array.prototype.slice.call(arrLike,0));
console.log(Array.prototype.splice.call(arrLike,0));  // 会改变原先的类数组对象
复制代码
// 使用 apply
console.log(Array.prototype.slice.apply(arrLike,[0]));
console.log(Array.prototype.splice.apply(arrLike,[0]));  // 会改变原先的类数组对象
复制代码

需要注意的是,Array.prototype.slice 方法不会改变原先类数组对象,而 Array.prototype.splice 会改变原先的类数组对象,这一点跟数组调用 slice 或 splice 方法时的行为是一致的。

arguments

在函数体中定义了 Arguments 对象,其包含函数的参数和其它属性,以 arguments 变量来指代。

举个例子

function fn(name, age, job) {
    console.log(arguments);
}

fn('ttsy', '25', 'front end')
复制代码

在控制台上我们可以看到上述函数打印的结果如下

可以看到 arguments 中包含了函数传递的参数、length、和 callee 属性。

length 属性表示的是实参的长度,即调用函数的时候传入的参数个数。

function fn(name, age, job) {
    console.log(arguments.length);  // 2
}

fn('ttsy', '25')
复制代码

callee 属性则指向的函数自身,我们可以通过它来调用自身函数。

arguments 是一个经典的类数组对象,我们可以通过上述的 Function.call 或者 Function.apply 方法来间接调用数组的方法,也可以直接通过 Array.prototype.slice 或 Array.prototype.splice 等方法把类数组对象转换成真正的数组。

不定时分享个人在前端方面的学习经验,觉得还不错的小伙伴,可以关注一波公众号哦。

相关文章:

  • 点击按钮,找不到url
  • WPF模板(一)详细介绍
  • 猿课python第二天
  • 再见了Server对象,拥抱IHostingEnvironment服务对象(.net core)
  • Sublime Text在Ubuntu下无法输入中文的解决方案
  • Oracle11g RAC下ASM 的管理与维护
  • 零基础入门微信小程序开发
  • oracle--数据筛选
  • Flutter widgets——Text/Icon/Button
  • window 环境 spring boot 发布脚本整理
  • The POM for XXX is invalid, transitive dependencies (if any) will not be available解决方案
  • spring第一冲刺阶段第四天
  • 福大软工1816 · 团队现场编程实战(抽奖系统)
  • Servlet重写init(ServletConfig config)还是init()
  • 微信小程序填坑清单
  • E-HPC支持多队列管理和自动伸缩
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • vue-loader 源码解析系列之 selector
  • XForms - 更强大的Form
  • 从地狱到天堂,Node 回调向 async/await 转变
  • 浮现式设计
  • 好的网址,关于.net 4.0 ,vs 2010
  • 讲清楚之javascript作用域
  • 模仿 Go Sort 排序接口实现的自定义排序
  • 深入浅出webpack学习(1)--核心概念
  • 要让cordova项目适配iphoneX + ios11.4,总共要几步?三步
  • 一个JAVA程序员成长之路分享
  • 翻译 | The Principles of OOD 面向对象设计原则
  • ​人工智能书单(数学基础篇)
  • ​软考-高级-系统架构设计师教程(清华第2版)【第1章-绪论-思维导图】​
  • #pragma once与条件编译
  • (6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理
  • (Redis使用系列) SpringBoot中Redis的RedisConfig 二
  • (八)c52学习之旅-中断实验
  • (附源码)ssm教材管理系统 毕业设计 011229
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • (转)scrum常见工具列表
  • .NET CORE使用Redis分布式锁续命(续期)问题
  • .net安装_还在用第三方安装.NET?Win10自带.NET3.5安装
  • .net中的Queue和Stack
  • /bin/rm: 参数列表过长"的解决办法
  • [APIO2015]巴厘岛的雕塑
  • [AutoSar]状态管理(五)Dcm与BswM、EcuM的复位实现
  • [BJDCTF2020]The mystery of ip1
  • [ffmpeg] aac 音频编码
  • [JavaEE系列] Thread类的基本用法
  • [java刷算法]牛客—剑指offer链表有环的入口、反转链表、合并排序链表
  • [jQuery]使用jQuery.Validate进行客户端验证(中级篇-上)——不使用微软验证控件的理由...
  • [LeetCode]: 145: Binary Tree Postorder Traversal
  • [leetcode]114. Flatten Binary Tree to Linked List由二叉树构建链表
  • [Linux]——彻底学通权限
  • [NBIoT]NBIoT相关知识
  • [office] 在Excel2010中设定某些单元格数据不参与排序的方法介绍 #其他#知识分享#笔记
  • [P3097] [USACO13DEC] [BZOJ4094] 最优挤奶Optimal Milking 解题报告(线段树+DP)
  • [python]用python获取EXCEL文件内容并保存到DBC