深入之类数组对象与arguments

类数组对象

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

举个例子：

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

我们从读写、获取长度、遍历三个方面对比这两个对象。

读写

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

长度

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.pushis not a function

调用数组方法

通过 Function.call 间接调用，将数组的方法指向类数组。

let arrayLike = {
  0: 'name',
  1: 'age',
  2: 'sex'
}
Array.prototype.join.call(arrayLike,'&');  // name&age&sex
Array.prototype.slice.call(arrayLike,0);  // ['name','age','sex'] 
//slice可以做到将类数组转数组

类数组转数组

// 1. slice
Array.prototype.slice.call(arrayLike)
// 2. splice
Array.prototype.splice.call(arrayLike,0);

arguments对象就是一个类数组对象，在客户端JavaScript中，一些DOM方法(document.getElementsByTagName()等)也返回类数组对象

Arguments对象

举个例子：

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

打印结果如下：

4F8B1351-68D1-4986-9F36-90C81DE3379C.png

length属性

Arguments对象的length属性，表示实参的长度

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

callee属性

该属性是一个指针，指向拥有这个arguments对象的函数

先看一个阶乘函数

function factorial(num){
  if(num <= 1){
    return 1;
  }else{
    return num * factorial(num - 1);
  }
}

在函数有函数名，且名字不会变情况下，这样定义没有问题，但如果存在函数间赋值，如果写死factorial函数，可能导致无法实现递归

function factorial(num){
  if(num <= 1){
    return 1;
  }else{
    return num * arguments.callee(num - 1);
  }
}
let trueFactorial = factorial;   // 函数间进行赋值
console.log(trueFactorial(5));   // 120
//重写函数 factorial
factorial = function(){
  return 0;
}
console.log(trueFactorial(5));  // 120  如果没有使用arguments.callee，将返回 0

通过setTimeout模拟setInterval

setTimeout(function(){
    console.log("使用setTimeout模拟setInterval");
    setTimeout(arguments.callee,1000)
},1000)

强大的ES6

使用ES6 ... 运算符，可以轻松转为数组

function func(... arguments){
  console.log(arguments);  // [1,2,3]
}
func(1,2,3);