首页 / JAVASCRIPT / JavaScript类数组对象与arguments实例详解

JavaScript类数组对象与arguments实例详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript类数组对象与arguments实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3923字，纯文字阅读大概需要6分钟。

内容图文

类数组对象

所谓的类数组对象:

拥有一个 length 属性和若干索引属性的对象

举个例子：

var array = ['name', 'age', 'sex'];
  
var arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}

即便如此，为什么叫做类数组对象呢？
那让我们从读写、获取长度、遍历三个方面看看这两个对象。

读写

console.log(array[0]); // name
console.log(arrayLike[0]); // name
  
array[0] = 'new name';
arrayLike[0] = 'new name';

长度

console.log(array.length); // 3
console.log(arrayLike.length); // 3

遍历

for(var i = 0, len = array.length; i < len; i++) {
   ……
}
for(var i = 0, len = arrayLike.length; i < len; i++) {
    ……
}

是不是很像？
那类数组对象可以使用数组的方法吗？比如：

arrayLike.push('4');

然而上述代码会报错: arrayLike.push is not a function
所以终归还是类数组呐……

调用数组方法

如果类数组就是任性的想用数组的方法怎么办呢？
既然无法直接调用，我们可以用 Function.call 间接调用：

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
  
Array.prototype.join.call(arrayLike, '&'); // name&age&sex
  
Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] 
// slice可以做到类数组转数组
  
Array.prototype.map.call(arrayLike, function(item){
    return item.toUpperCase();
}); 
// ["NAME", "AGE", "SEX"]

类数组转对象

在上面的例子中已经提到了一种类数组转数组的方法，再补充三个：

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] 
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] 
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"] 
// 4. apply
Array.prototype.concat.apply([], arrayLike)

那么为什么会讲到类数组对象呢？以及类数组有什么应用吗？
要说到类数组对象，Arguments 对象就是一个类数组对象。在客户端 JavaScript 中，一些 DOM 方法(document.getElementsByTagName()等)也返回类数组对象。

Arguments对象

接下来重点讲讲 Arguments 对象。
Arguments 对象只定义在函数体中，包括了函数的参数和其他属性。在函数体中，arguments 指代该函数的 Arguments 对象。
举个例子：

function foo(name, age, sex) {
    console.log(arguments);
}
  
foo('name', 'age', 'sex')

打印结果如下：

我们可以看到除了类数组的索引属性和length属性之外，还有一个callee属性，接下来我们一个一个介绍。

length属性

Arguments对象的length属性，表示实参的长度，举个例子：

function foo(b, c, d){
    console.log("实参的长度为：" + arguments.length)
}
  
console.log("形参的长度为：" + foo.length)
  
foo(1)
  
// 形参的长度为：3
// 实参的长度为：1

callee属性

Arguments 对象的 callee 属性，通过它可以调用函数自身。
讲个闭包经典面试题使用 callee 的解决方法：

var data = [];
  
for (var i = 0; i < 3; i++) {
    (data<i> = function () {
       console.log(arguments.callee.i) 
    }).i = i;
}
  
data[0]();
data[1]();
data[2]();
  
// 0
// 1
// 2</i>

接下来讲讲 arguments 对象的几个注意要点：

arguments 和对应参数的绑定

function foo(name, age, sex, hobbit) {
  
    console.log(name, arguments[0]); // name name
  
    // 改变形参
    name = 'new name';
  
    console.log(name, arguments[0]); // new name new name
  
    // 改变arguments
    arguments[1] = 'new age';
  
    console.log(age, arguments[1]); // new age new age
  
    // 测试未传入的是否会绑定
    console.log(sex); // undefined
  
    sex = 'new sex';
  
    console.log(sex, arguments[2]); // new sex undefined
  
    arguments[3] = 'new hobbit';
  
    console.log(hobbit, arguments[3]); // undefined new hobbit
  
}
  
foo('name', 'age')

传入的参数，实参和 arguments 的值会共享，当没有传入时，实参与 arguments 值不会共享
除此之外，以上是在非严格模式下，如果是在严格模式下，实参和 arguments 是不会共享的。

传递参数

将参数从一个函数传递到另一个函数
// 使用 apply 将 foo 的参数传递给 bar function foo() { bar.apply(this, arguments); } function bar(a, b, c) { console.log(a, b, c); } foo(1, 2, 3)
强大的ES6

使用ES6的 ... 运算符，我们可以轻松转成数组。
function func(...arguments) { console.log(arguments); // [1, 2, 3] } func(1, 2, 3);
应用

arguments的应用其实很多，在下个系列，也就是 JavaScript 专题系列中，我们会在 jQuery 的 extend 实现、函数柯里化、递归等场景看见 arguments 的身影。这篇文章就不具体展开了。
如果要总结这些场景的话，暂时能想到的包括：

参数不定长
函数柯里化
递归调用
函数重载 ...

以上就是JavaScript类数组对象与arguments实例详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JavaScript类数组对象与arguments实例详解全部内容，希望文章能够帮你解决JavaScript类数组对象与arguments实例详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/298832.html

来源：【匿名】

【上一篇】Node中的require和import用法详细介绍【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript类数组对象与arguments实例详解】教程文章相关的互联网学习教程文章

JavaScript中通过arguments对象实现对象的重载【代码】

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /**1.js 中不存在函数的重载 2.js函数定义时候的形參个数，和运行时候时。传递的实參的个数能够不一样。3.js运行时候。会将真实的參数，封装成组arguments*/ function add(a){return a+10; } var add=new Function("a","return a+10"); //alert(add(5)); function add(num1,num2){return num1+num2; } va...

JavaScript arguments对象【代码】

1、在JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。arguments非常类似Array，但实际上又不是一个Array实例。可以通过如下代码得以证实（当然，实际上，在函数funcArg中，调用arguments是不必要写成funcArg.arguments，直接写arguments即可）。1 Array.prototype.testArg = "test"; 2function funcArg() { 3 alert(funcArg.arguments.testArg); 4 alert(funcArg.arguments[0]); 5} ...

JS函数的参数对象arguments在严格模式下的限制

在JS中，传入的函数的参数个数可以与定义函数的个数不一致，那么对于传入的实参的引用，则是arguments对象。然而改对象在严格模式和非严格模式下是由区分的： 1 在严格模式下arguments作为了一个保留字，那么如果在定义arguments相关的变量和函数，则会报语法错误。2 arguments在严格模式下属于传入的实参对象，并且是不可变的，即不可在函数内部通过arguments来修改实参值。如：function test1(a){ “use strict”; argume...

js 的arguments的一些理解资料【代码】

初学js的时候，对arguments这个东西常见，就是搞不清他的意思~　下面是我找到的一些资料和我的理解，终于弄懂了这个家伙首先arguments指向实参对象　在函数体内，标识符arguments是指向实参对象的引用，实参对象是一个类数组对象 arguments[0]，arguments.length，类数组不是数组，虽然也有数组的前面这两种属性，具体判断可以使用instanceof来判断一下instanceof 用于判断一个实例是否是某种类型在 typeof 方法返回 “objec...

【学习-水滴石穿】 JavaScript用arguments对象访问函数的参数

有这么个需求：求n个数中最大数，<script type="text/javascript">function maxNumber(){var maxNumber = arguments[0];for (var i = arguments.length - 1; i >= 0; i--) {if(arguments[i] > maxNumber){maxNumber =arguments[i];}}return maxNumber;}var maxValue = maxNumber(1,2,3,4,45,5,3333);document.write(maxValue); </script>原文：http://blog.csdn.net/dracotianlong/article/details/23736341

JS前端知识点运算符优先级，URL编码与解码，String，Math，arguments操作整理总结

本文实例讲述了JS前端知识点运算符优先级，URL编码与解码，String，Math，arguments操作。分享给大家供大家参考，具体如下： Js 中的运算符优先级优先级依次降低()!、-、++、–*、/、%+、-<、<=、<、>===、!=、===、!==、&&||?:=、+=、-=、*=、/=、%=URL 编码和解码 encodeURIComponent()decodeURIComponent()encodeURI()decodeURI()escape()unescape()区别字符串操作常用API toString() 转换成字符串charAt(index) 获取索引位置字...

javascript-Angular 2异常：TypeError：严格模式函数或arguments对象上的’caller’,’callee’和’arguments’属性可能【代码】

我在Angular 2中遇到问题,我知道这是一个经常发生的问题,但是我找不到解决方法.我做了一个从另一个组件调用的服务,那没问题.问题出在服务中,我正在尝试进行http POST并获取并报错：[异常：TypeError：在严格模式函数或Function.remoteFunction上调用它们的参数对象上,可能无法访问“ caller”,“ callee”和“ arguments”属性error capturecomplete error capture 显然,该错误是在handleErrorObservable中给出的,因为该帖子也未执...

javaScript中的Arguments对象的用法介绍【图】

本篇文章给大家带来的内容是关于javaScript中的Arguments对象的用法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、搞清楚什么是arguments“arguments 是一个对应于传递给函数的参数的类数组对象。arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。”首先它是一个类数组对象，typeof argum...

Javascript中arguments对象的示例讲解【图】

本篇文章给大家带来的内容是关于Javascript中arguments对象的示例讲解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。今天我们来看看arguments对象及属性。arguments对象不能显式创建，arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同。索引 n 实际上是arguments 对象的 0…n 属性的其中一个参数。1 function add(a,b){ 2 console.l...

JavaScript中的arguments对象如何使用？（用法介绍）

本篇文章给大家带来的内容是关于JavaScript中的arguments对象如何使用？（用法介绍），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。arguments 是一个类似数组的对象, 对应于传递给函数的参数。语法arguments描述arguments对象是所有函数中可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数的条目，第一个条目的索引从0开始。例如，如果一个函数传递了三个参数，...

JavaScript中arguments函数的详解（附示例）【图】

本篇文章给大家带来的内容是关于JavaScript中arguments函数的详解（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。概述JavaScript中的函数与其他面向对象语言有几个不同的地方。没有函数重载有一个表示实参列表的类数组对象 arguments一、函数重载简单来说，JAVA 同一个类中允许几个函数有同样的函数名称，但是参数声明不一样，这就是函数重载。但是 JS 不支持函数重载：function foo(num) {console.l...

js中的arguments是什么？js中arguments的使用方法【图】

本篇文章给大家带来的内容是关于js中的arguments是什么？js中arguments的使用方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。类数组对象：arguments总所周知，js是一门相当灵活的语言。当我们在js中在调用一个函数的时候，我们经常会给这个函数传递一些参数，js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面，那么这到底是什么东西？在js中万物皆对象，甚至数组字符串函数都是对象。所以这...

深入解析JavaScript中的arguments对象（图文教程）

arguments是JavaScript里的一个内置对象,像数组结构一样存储参数的传递,这里我们就来深入解析JavaScript中的arguments对象,需要的朋友可以参考下arguments定义所有的函数都有一个自己的arguments对象，用来储存它实际接受到的参数，而不局限于函数声明时所定义的参数列表。它不是数组却类似数组，具有数组一样的访问性质及方式，可以由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。但是却不具有数组的一些方法...

Javascript函数中的arguments（图文教程）【图】

在JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。下面这篇文章主要介绍了关于Javascript函数中的arguments面貌以及如何转化为数组的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。一、arguments的面貌在javascript中所有的函数内部都包含了一个隐藏的变量叫arguments;它存放着所有传递到这个函数中的参数；那么我们打开实例看看arguments的输出形式(function fn(){console.log(argum...

js中arguments详解【图】

当我们在js中在调用一个函数的时候，我们经常会给这个函数传递一些参数，js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面，那么这到底是什么东西？在js中万物皆对象，甚至数组字符串函数都是对象。所以这个叫做arguments的东西也是个对象，而且是一个特殊的对象，它的属性名是按照传入参数的序列来的，第1个参数的属性名是’0’，第2个参数的属性名是’1’，以此类推，并且它还有length属性，存储的是当前传入函数...

首页 / JAVASCRIPT / JavaScript类数组对象与arguments实例详解

JavaScript类数组对象与arguments实例详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript类数组对象与arguments实例详解】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

实例 - 相关标签

数组 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程