当前位置: 首页 > 科技观察

全面介绍JavaScript参数对象

时间:2023-03-18 01:43:52 科技观察

1。什么是argumentsMDN解释:arguments是一个类数组对象。表示传递给函数的参数列表。让我们先通过一个例子来直观地理解JavaScript中的参数是什么样子的。functionprintArgs(){console.log(arguments);}printArgs("A","a",0,{foo:"Hello,arguments"});执行结果为:["A","a",0,Object]乍一看结果是一个数组,但并不是真正的数组,所以arguments是一个类数组对象(如果你想知道真正的数组和类数组对象的区别,你可以去***)。再看arguments的内容,它代表函数执行时传入函数的所有参数。在上面的例子中,它代表了传入printArgs函数的四个参数,arguments[0]、arguments[1]...可以用来获取单个参数。2.Arguments操作2.1argumentslengtharguments是一个类数组对象,它包含一个length属性,可以使用arguments.length来获取传入函数的参数个数。functionfunc(){console.log("Thenumberofparametersis"+arguments.length);}func();func(1,2);func(1,2,3);执行结果如下:Thenumberofparametersis0Thenumberofparametersis2Thenumberofparametersis32.2个参数通常转换为以下方法将参数转换为数组:Array.prototype.slice.call(arguments);还有一种更短的写法:[].slice.call(arguments);在这里,空数组只是调用slice方法,而不是从Array的原型级别调用。为什么上面两种方法可以转换呢?首先slice方法得到的结果是一个数组,参数是arguments。其实满足一定条件的对象可以通过slice方法转换成数组。看一个例子:constobj={0:"A",1:"B",length:2};constresult=[].slice.call(obj);console.log(Array.isArray(result),result);执行结果为:true["A","B"]从上面的例子我们可以看出条件是:1)属性为0,1,2...;2)具有长度属性;另外,还有一点要注意,就是函数的参数不能泄露,不能传出去。这是什么意思?看下面的泄漏参数示例://Leakingargumentsexample1:functiongetArgs(){returnarguments;}//Leakingargumentsexample2:functiongetArgs(){constargs=[].slice.call(arguments);returnargs;}//Leakingargumentsexample3:functiongetArgs(){constargs=arguments;returnfunction(){returnargs;};}上述方法直接泄露了函数的arguments对象,最终的结果是V8引擎会跳过优化,造成相当大的性能损失。你可以这样做:只是好奇,每次我们使用参数时,我们通常会在第一步将它们转换为数组。同时,arguments使用不当很容易导致性能损失,那么为什么不直接将arguments设计成数组对象呢?这需要从学习这门语言开始。arguments是在语言的早期引入的,当时Array对象有4个方法:toString、join、reverse和sort。arguments继承自Object的一个很大原因是不需要这四个方法。现在,Array增加了很多强大的方法,比如forEach、map、filter等等。那么现在为什么不让arguments在新版本中再次继承自Array呢?其实这个是包含在ES5草案中的,只是为了向前兼容最终被委员会否决了。2.3修改arguments值在严格模式和非严格模式下,修改函数参数值的结果是不同的。请参阅以下两个示例:functionfoo(a){"usestrict";console.log(a,arguments[0]);a=10;console.log(a,arguments[0]);arguments[0]=20;console.log(a,arguments[0]);}foo(1);输出:111011020另一个非严格模式示例:functionfoo(a){console.log(a,arguments[0]);a=10;console.log(a,arguments[0]);arguments[0]=20;console.log(a,arguments[0]);}foo(1);输出为:1110102020从上面两个例子可以看出,在严格模式下,函数中的参数与arguments对象没有关系,修改一个值不会改变另一个。在非严格模式下,两者会相互影响。2.4将参数从一个函数传递到另一个函数以下是将参数从一个函数传递到另一个函数的推荐做法。functionfoo(){bar.apply(this,arguments);}functionbar(a,b,c){//logic}2.5参数和重载很多语言都有重载,而JavaScript没有。我们先来看一个例子:数字3;}添加(1,2);添加(1,2,3);执行结果为:MethodtwoMethodtwo因此,在JavaScript中,函数不会根据不同的参数产生不同的调用。JavaScript中没有重载吗?不,我们可以使用参数来模拟重载。还是上面的例子。functionadd(num1,num2,num3){if(arguments.length===2){console.log("Resultis"+(num1+num2));}elseif(arguments.length===3){console.log("Resultis"+(num1+num2+num3));}}add(1,2);add(1,2,3)执行结果如下:Resultis3Resultis63。ES6中的arguments3.1扩展操作符直接表示:functionfunc(){console.log(...arguments);}func(1,2,3);执行结果为:123简单来说,扩展运算符可以将参数扩展为独立的参数。3.2Rest参数还是举个栗子:functionfunc(firstArg,...restArgs){console.log(Array.isArray(restArgs));console.log(firstArg,restArgs);}func(1,2,3);执行结果Yes:true1[2,3]从上面的结果可以看出,Rest参数表示除了显式指定的其余参数集,类型都是Array。3.3默认参数栗子:functionfunc(firstArg=0,secondArg=1){console.log(arguments[0],arguments[1]);console.log(firstArg,secondArg);}func(99);执行结果为:99undefined991可见默认参数对实参没有影响,实参仍然只代表调用函数时传入的所有参数。3.4argumentstoarrayArray.from()是一个强烈推荐的方法,它可以将所有类数组对象转换为数组。4.对象的数组和类数组数组有一个基本特征:索引。这是一般物体所不具备的。constobj={0:"a",1:"b"};constarr=["a","b"];我们可以使用obj[0],arr[0]来获取我们想要的数据,但是获取数据的方式确实不一样。obj[0]使用对象的键值对访问数据,而arr[0]使用数组的索引。其实Object和Array的唯一区别就是Object的属性是string,而Array的index是number。让我们看看类数组对象。伪数组的特点是它看起来像一个数组,包含一组数据并具有长度属性,但没有任何数组方法。更具体地说,length属性是一个非负整数,上限是JavaScript中可以准确表达的最高数;此外,类数组对象的长度值不能自动更改。如何自己创建一个类似数组的对象?functionFoo(){}Foo.prototype=Object.create(Array.prototype);constfoo=newFoo();foo.push('A');console.log(foo,foo.length);console.log("fooisanarray"+Array.isArray(foo));执行结果为:["A"]1fooisanarray?false就是说Foo的例子有Array的所有方法,但是类型不是Array。如果您不需要Array的所有方法,而只需要其中的一部分,该怎么办?functionBar(){}Bar.prototype.push=Array.prototype.push;constbar=newBar();bar.push('A');bar.push('B');console.log(bar);执行结果是:Bar??{0:"A",1:"B",length:2}参考:JavaScriptMDNarguments中数组和伪数组的区别函数的参数对象不是Javascript中的数组吗?argumentsobjectAdvancedJavascript:Objects,Arrays,andArray-LikeobjectsJavaScriptspecialobjectArray-LikeObjects详解什么是创建Javascript类数组对象的好方法?