技术控

    今日:110| 主题:49431
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] JavaScript arguments 对象全面介绍

[复制链接]
安静地在你身边. 发表于 2016-10-8 12:54:32
103 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
1. 什么是 arguments

      MDN上解释:  
  arguments 是一个类数组对象。代表传给一个function的参数列表。
  我们先用一个例子直观了解下 JavaScript 中的 arguments 长什么样子。
  1. function printArgs() {
  2.     console.log(arguments);
  3. }
  4. printArgs("A", "a", 0, { foo: "Hello, arguments" });
复制代码
执行结果是:
  1. ["A", "a", 0, Object]
复制代码
乍一看,结果是个数组,但并不是真正的数组,所以说 arguments 是一个类数组的对象(想了解真正数组与类数组对象的区别可以一直翻到最后)。
  再看看 arguments 表示的内容,其表示了函数执行时传入函数的所有参数。在上面的例子中,代表了传入    printArgs函数中的四个参数,可以分别用    arguments[0]、    arguments[1]... 来获取单个的参数。  
  2. arguments 操作

  2.1 arguments length

  arguments 是个类数组对象,其包含一个    length属性,可以用    arguments.length来获得传入函数的参数个数。  
  1. function func() {
  2.     console.log("The number of parameters is " + arguments.length);
  3. }
  4. func();
  5. func(1, 2);
  6. func(1, 2, 3);
复制代码
执行结果如下:
  1. The number of parameters is 0
  2. The number of parameters is 2
  3. The number of parameters is 3
复制代码
2.2 arguments 转数组

  通常使用下面的方法来将 arguments 转换成数组:
  1. Array.prototype.slice.call(arguments);
复制代码
还有一个更简短的写法:
  1. [].slice.call(arguments);
复制代码
在这里,只是简单地调用了空数组的 slice 方法,而没有从 Array 的原型层面调用。
  为什么上面两种方法可以转换呢?
  首先,slice 方法得到的结果是一个数组,参数便是 arguments。事实上,满足一定条件的对象都能被 slice 方法转换成数组。看个例子:
  1. const obj = { 0: "A", 1: "B", length: 2 };
  2. const result = [].slice.call(obj);
  3. console.log(Array.isArray(result), result);
复制代码
执行结果是:
  1. true ["A", "B"]
复制代码
从上面例子可以看出,条件就是: 1) 属性为 0,1,2...;2) 具有 length 属性;
  另外,有一个需要注意的地方就是,    不能将函数的 arguments 泄露或者传递出去。什么意思呢?看下面的几个泄露 arguments 的例子:  
  1. // Leaking arguments example1:
  2. function getArgs() {
  3.     return arguments;
  4. }
  5. // Leaking arguments example2:
  6. function getArgs() {
  7.     const args = [].slice.call(arguments);
  8.     return args;
  9. }
  10. // Leaking arguments example3:
  11. function getArgs() {
  12.     const args = arguments;
  13.     return function() {
  14.         return args;
  15.     };
  16. }
复制代码
上面的做法就直接将函数的 arguments 对象泄露出去了,最终的结果就是 V8 引擎将会跳过优化,导致相当大的性能损失。
  你可以这么做:
  1. function getArgs() {
  2.     const args = new Array(arguments.length);
  3.     for(let i = 0; i < args.length; ++i) {
  4.         args[i] = arguments[i];
  5.     }
  6.     return args;
  7. }
复制代码
那就很好奇了,我们每次使用 arguments 时通常第一步都会将其转换为数组,同时 arguments 使用不当还容易导致性能损失,那么为什么不将 arguments 直接设计成数组对象呢?
  这需要从这门语言的一开始说起。arguments 在语言的早期就引入了,当时的 Array 对象具有 4 个方法: toString、 join、 reverse 和 sort。arguments 继承于 Object 的很大原因是不需要这四个方法。而现在,Array 添加了很多强大的方法,比如 forEach、map、filter 等等。那为什么现在不在新的版本里让 arguments 重新继承自 Array呢?其实 ES5 的草案中就包含这一点,但为了向前兼容,最终还是被委员会否决了。
  2.3 修改 arguments 值

  在严格模式与非严格模式下,修改函数参数值表现的结果不一样。看下面的两个例子:
  1. ["A", "a", 0, Object]0
复制代码
输出:
  另一个非严格模式的例子:
  1. ["A", "a", 0, Object]1
复制代码
输出结果为:
  从上面的两个例子中可以看出,在严格模式下,函数中的参数与 arguments 对象没有联系,修改一个值不会改变另一个值。而在非严格模式下,两个会互相影响。
  2.4 将参数从一个函数传递到另一个函数

  下面是将参数从一个函数传递到另一个函数的推荐做法。
  1. ["A", "a", 0, Object]2
复制代码
2.5 arguments 与重载

  很多语言中都有重载,但 JavaScript 中没有。先看个例子:
  1. ["A", "a", 0, Object]3
复制代码
执行结果为:
  1. ["A", "a", 0, Object]4
复制代码
所以,JavaScript 中,函数并没有根据参数的不同而产生不同的调用。
  是不是 JavaScript 中就没有重载了呢?并不是,我们可以利用 arguments 模拟重载。还是上面的例子。
  1. ["A", "a", 0, Object]5
复制代码
执行结果如下:
  1. ["A", "a", 0, Object]6
复制代码
3. ES6 中的 arguments

  3.1 扩展操作符

  直接上栗子:
  1. ["A", "a", 0, Object]7
复制代码
执行结果是:
  简洁地讲,扩展操作符可以将 arguments 展开成独立的参数。
  3.2 Rest 参数

  还是上栗子:
  1. ["A", "a", 0, Object]8
复制代码
执行结果是:
  1. ["A", "a", 0, Object]9
复制代码
从上面的结果可以看出,Rest 参数表示除了明确指定剩下的参数集合,类型是 Array。
  3.3 默认参数

  栗子:
  1. function func() {
  2.     console.log("The number of parameters is " + arguments.length);
  3. }
  4. func();
  5. func(1, 2);
  6. func(1, 2, 3);0
复制代码
执行结果是:
  1. function func() {
  2.     console.log("The number of parameters is " + arguments.length);
  3. }
  4. func();
  5. func(1, 2);
  6. func(1, 2, 3);1
复制代码
可见,默认参数对 arguments 没有影响,arguments 还是仅仅表示调用函数时所传入的所有参数。
  3.4 arguments 转数组

      Array.from()是个非常推荐的方法,其可以将所有类数组对象转换成数组。  
  4. 数组与类数组对象

  数组具有一个基本特征:索引。这是一般对象所没有的。
  1. function func() {
  2.     console.log("The number of parameters is " + arguments.length);
  3. }
  4. func();
  5. func(1, 2);
  6. func(1, 2, 3);2
复制代码
我们利用    obj[0]、    arr[0]都能取得自己想要的数据,但取得数据的方式确实不同的。    obj[0]是利用对象的键值对存取数据,而    arr[0]却是利用数组的索引。事实上,Object 与 Array 的唯一区别就是 Object 的属性是 string,而 Array 的索引是 number。  
  下面看看类数组对象。
  伪数组的特性就是长得像数组,包含一组数据以及拥有一个 length 属性,但是没有任何 Array 的方法。再具体的说,length 属性是个非负整数,上限是 JavaScript 中能精确表达的最大数字;另外,类数组对象的 length 值无法自动改变。
  如何自己创建一个类数组对象?
  1. function func() {
  2.     console.log("The number of parameters is " + arguments.length);
  3. }
  4. func();
  5. func(1, 2);
  6. func(1, 2, 3);3
复制代码
执行结果是:
  1. function func() {
  2.     console.log("The number of parameters is " + arguments.length);
  3. }
  4. func();
  5. func(1, 2);
  6. func(1, 2, 3);4
复制代码
也就是说 Foo 的示例拥有 Array 的所有方法,但类型不是 Array。
  如果不需要 Array 的所有方法,只需要部分怎么办呢?
  1. function func() {
  2.     console.log("The number of parameters is " + arguments.length);
  3. }
  4. func();
  5. func(1, 2);
  6. func(1, 2, 3);5
复制代码
执行结果是:
  1. function func() {
  2.     console.log("The number of parameters is " + arguments.length);
  3. }
  4. func();
  5. func(1, 2);
  6. func(1, 2, 3);6
复制代码
参考:
  
       
  •               JavaScript中的数组与伪数组的区别      
       
  •               MDN arguments      
       
  •               Avoid modifying or passing arguments into other functions — it kills optimization      
       
  •               Optimization killers      
       
  •               Why isn't a function's arguments object an array in Javascript?      
       
  •               arguments 对象      
       
  •               Advanced Javascript: Objects, Arrays, and Array-Like objects      
       
  •               JavaScript 特殊对象 Array-Like Objects 详解      
       
  •               What is a good way create a Javascript array-like object?      
      
友荐云推荐




上一篇:DeepMind论文:结合生成式对抗网络和Actor-Critic方法
下一篇:cs.CL weekly 2016.10.03-2016.10.07
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

wx_hY2588o8 发表于 2016-10-9 15:48:28
不知该说些什么...谢谢
回复 支持 反对

使用道具 举报

poimu 发表于 2016-10-12 02:11:12
记得回帖!!
回复 支持 反对

使用道具 举报

guoaynghou 发表于 2016-10-15 11:30:02
好好顶贴,天天向上!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表