类数组

ES6学习, JavaScript学习 本文总阅读量次

类数组

常见的类数组有: 函数的参数 arguments, DOM 对象列表(比如通过 document.querySelectorAll 得到的列表), jQuery 对象 (比如 $(“div”)).

区分类数组和真实数组

类数组是一个普通对象，而真实的数组是Array类型。

类数组的特点

  1. 拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）;
  2. 不具有数组所具有的方法。

arguments对象

  • arguments 是一个对应于传递给函数的参数的类数组对象。arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。
  • 此对象包含传递给函数的每个参数，第一个参数在索引0处。**[]语法可访问它的每一个元素**:
    1
    2
    3
    arguments[0]
    arguments[1]
    arguments[2]
  • 参数也可以被设置：
    1
    arguments[1] = 'new value';
  • arguments对象不是一个 Array实例 ，它类似于Array。
  • 但除了length属性和索引元素之外没有任何Array属性（length属性确定传递参数的个数）。例如，它没有 pop 方法。
  • 但是它可以被转换为一个真正的Array(下面4种方法都可以将类数组转换为数组)
  • MDN更多参考信息

箭头函数没有 arguments

  • 箭头函数没有自己的 arguments，它会指向父级函数的arguments

获取事件对象 event

  • 可参考《JS 运行环境》中的“封装节流通用方法”，可用于获取事件对象 event
  • 注意：《这篇文章》中callee是已被弃用的特性
  • 如果没有显示传入 event ，则可通过 arguments[0] 获取到事件对象 event
  • 注意理解：如果函数传入了参数却用下面写法的话，则 arguments 中将会包含传入的参数，这时获取的 arguments[0] 就会是第一个传入的参数了
1
2
3
4
5
6
7
function eventTest(){
    var event = window.event||arguments[0];
    //target 就是这个对象
    target = event.srcElement||event.target,
    //这个对象的值
    targetValue = target.value;
}

类数组转换为数组

结合剩余参数...

区分剩余参数与扩展运算符：
剩余参数... 是做聚合的，而 扩展运算符... 是做展开的，符号都是...,但含义不同。

下面这个例子中...表示剩余参数而不是扩展运算符，sum函数通过将所有的剩余参数1,2,3,4,"ddd"传进args做一个聚合将他们组转换为数组：

1
2
3
4
function sum(...args){//将传进来的类数组匹配到的剩余参数都放到args中组成数组
    console.log(args);//[1, 2, 3, 4, "ddd"]
}
sum(1,2,3,4,"ddd");//传入一个类数组,通过剩余参数可以转换为数组

在[1,2,...[1,2,3]];中...就表示扩展运算符，意为将[1,2,3]展开来放入另一个数组中。

注意：无论...表示 剩余参数 还是 扩展运算符，当它作为参数时它都必须在最后一个:

1
2
3
4
5
function op(type, ...nums) {
    console.log(type);//sum
    console.log(nums);//[1, 2, 3, 4, 5]
}
op("sum", 1, 2, 3, 4, 5);

通过call()+slice()

  • slice()可参考笔记JS对象之数组（1）
  • slice(start,end)截取，返回截取的元素组成的数组，start默认0，如无指定end，则截取的数组包含从start到数组结束的所有元素。
    1
    Array.prototype.slice.call(arrayLike);
    或者直接使用**数组字面量[]**即可少写Array.prototype:
    1
    [].slice.call(arrayLike);

通过扩展运算符(2种方法)

任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组:

1
2
3
4
5
6
function sum() {
    let args = [...arguments];
    // let [...args] = arguments;
    console.log(args);//[1, 2, 3, 4, "ddd"]
}
sum(1, 2, 3, 4, "ddd");//传入一个类数组,通过剩余参数可以转换为数组

通过Array.from()

1
Array.from(arrayLike);
ES6学习, JavaScript学习