外星人源码论坛 首页 编程经验

Array的扩展

2018-3-5 06:34
原作者: 外星人源码网 来自: 外星人源码网 收藏 分享 邀请

1. Array.from( likeArrObj, , ) Array.from()用于将以下两类对象转化为真正的数组:类似数组的对象(array-like object,即本身 具有length属性的对象 ) 可遍历对象( 原型链上具有[Symb ...

1. Array.from( likeArrObj, [valueHandleFn], [thisObj] )

Array.from()用于将以下两类对象转化为真正的数组:

类似数组的对象(array-like object,即本身 具有length属性的对象 ) 可遍历对象( 原型链上具有[Symbol.iterator]方法的对象 ,即具有iterator接口的iterable对象)

它接受三个参数:

likeArrObj: 需要被转化的对象 [valueHandleFn]: 用于处理该对象中每个值的一个 遍历函数 ,类似于map(),该参数可选。 [thisObj]: 用于 绑定[valueHandleFn]中的this ,也就是只有使用了[valueHandleFn],它才会有作用

它返回的是将该对象转化成功后,得到的数组。

1.1 代码示例

  let likeArrObj = {
    '0': 0,
    '1': 1,
    '2': 2,
    length: 3,
  }

  // ES5 的写法 (两种)
  var arr_es5_01 = Array.prototype.slice.call( likeArrObj )
  var arr_es5_02 = [].prototypr.slice.call( likeArrObj )

  // ES6 的写法 (两种)
  let arr_es6_01 = Array.from( likeArrObj )
  let arr_es6_02 = [...likeArrObj]

1.1.1 对代码的说明:

    Array.prototype.slice( startNum, endNum ) 可以浅复制一部分array元素,起始于startNum,终止于(endNum - 1)。

浅复制 是说只拷贝数组元素的内容,而不管该内容是不是指向另一个值。

通俗点讲,就是只拷贝一层数据。
深复制 与浅复制对应,它会不仅拷贝数组元素的内容,还会分析其内容是否为一个“ 指针 ”类型的值,如对象,函数,数组等。 如果是一个“ 指针 ”类型的值,则会继续将其值下的所有内容统统复制一份. 内容中的内容全要复制,直到其内容为 undefinednullBooleanNumberStringSymbol 的一种。
    Function.prototype.call( thisObj, arg1, arg2, ..., argn ) 用于在运行时指定该函数的this绑定对象

thisObj 是需要绑定的对象
arg1, arg2, ..., argn 是该函数调用的参数
Function.prototype.apply( thisObj, argArr ) 与该方法功能一致,只是在参数传递上,使用的是一个数组形式

    [...likeArrObj]中的 ... 是扩展运算符,它通过调用likeArrObj的 [Symbol.iterator]方法 来将其打散成一个个独立的量,最后再用 [] 来将其合成一个新的数组,所以使用该写法时,一定需要确保likeArrObj具有 [Symbol.iterator]方法

1.2 应用场景

它的常见应用场景:

document.querySelectorAll( str ) 返回的NodeList集合转化为真正的数组 将 arguments 对象转化为真正的数组

转化为真正的数组之后,就可以使用 Array.prototype.forEach() 方法来操作该对象了。



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

粉丝 阅读43 回复0
上一篇:
前端解决方案汇总发布时间:2018-03-05
下一篇:
es6中 var let const区别发布时间:2018-03-05