js 类数组arguments详解
2017-12-18 17:26
176 查看
arguments并不是一个真正的数组,而是一个“类似数组(array-like)”的对象;
就像下面的这段输出,就是典型的类数组对象:
[12, 23, callee: ƒ, Symbol(Symbol.iterator): ƒ]
一、类数组 VS 数组
相同点:
- 都可用下标访问每个元素
- 都有length属性
不同点:
- 数组对象的类型是Array,类数组对象的类型是Object;
- 类数组对象不能直接调用数组API;
- 数组遍历可以用for in和for循环,类数组只能用for循环遍历;
function calc(){ console.log(arguments); // ["sky", "moon", callee: ƒ, Symbol(Symbol.iterator): ƒ] console.log(arguments[0]); // sky console.log(arguments.length); // 2 // arguments.pop(); // 报错,arguments.pop is not a function } calc('sky', 'moon');
类数组对象转为数组对象方法: Array.prototype.slice.call ( arguments );
function calc(){ var newArr = Array.prototype.slice.call(arguments); newArr.pop(); console.log(newArr); // ["sky"] } calc('sky', 'moon');
二、类数组的用法
1、实现重载(overload):当函数的参数个数不明确时,函数体根据参数的不同进行相应处理;
比如我们要实现:一个参数时,做乘法运算;二个参数时,做加法运算;
看下面代码,我们可以这样实现:
// 实现重载(overload) function calc(){ //传1个参数,求平方 if(arguments.length == 1){ return arguments[0] * arguments[0]; } //传2个参数,求和 else if(arguments.length == 2){ return arguments[0] + arguments[1]; } } console.log(calc(5));//25 console.log(calc(12,23));//35
2、实现递归:在函数内部反复的调用函数本身
首先我们用最原始的方法,实现数字的叠加
function calc(num){ if(num <= 0){ return 0; }else{ return num += calc(num - 1); } } console.log(calc(3)); // 6
然后我们用类数组来实现同样的功能:
arguments.callee:返回当前函数本身
function calc(num){ if(num <= 0){ return 0; }else{ return num += arguments.callee(num - 1); } } console.log(calc(3)); // 6
下面举个栗子,来说明这两种调用的一点小区别:
如果写成 return num += calc(num - 1) 会报错;原因很简单,当执行calc = null 后,calc已经不是一个函数;
但是写成 return num += arguments.callee(num - 1) 不会报错;因为arguments.callee指的是“当前函数”,并不是“calc”
function calc(num){ console.log(arguments); if(num <= 0){ return 0; }else{ return num += arguments.callee(num - 1); // return num += calc(num - 1); // 报错 Uncaught TypeError: calc is not a function } } var result = calc; calc = null; console.log(result(3));
注意: arguments.callee的用法在严格模式下是不允许的;
Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
"use strict"; function calc(num){ if(num <= 0){ return 0; }else{ return num += arguments.callee(num - 1); } } console.log(calc(3));
相关文章推荐
- js数组的操作详解
- 详解js模板引擎art template数组渲染的方法
- js数组的详解
- js数组的sort排序详解
- 10-10 arguments存储实参、解决js获取CSS属性值兼容性、object对象、for语句遍历对象内容、数组中的方法
- JavaScript的作用;JS常见的三种对话框;==和===的区别;函数内部参数数组arguments在函数内部打印实参;JS的误区:没有块级作用域
- js 数组定义及详解
- js中的数组详解
- JS常用的几种数组遍历方式以及性能分析对比实例详解
- JS进阶篇--JS数组reduce()方法详解及高级技巧
- 详解JS数组Reduce()方法详解及高级技巧
- [导入]js 关联数组 详解
- js数组的sort排序详解
- js splice数组拼接函数详解
- 【笔记】js Array.prototype.slice.call(arguments) 将函数的参数转换为数组方法的见解
- JS查找数组中重复元素的方法详解
- JS函数arguments数组获得实际传参数个数的实现方法
- js数组的sort排序详解
- JS中call/apply、arguments、undefined/null方法详解