Array的扩展

defcon 发布于2019-08-22 11:11 / 2547人阅读

摘要：浅复制是说只拷贝数组元素的内容，而不管该内容是不是指向另一个值。深复制与浅复制对应，它会不仅拷贝数组元素的内容，还会分析其内容是否为一个指针类型的值，如对象，函数，数组等。

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)。

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

通俗点讲，就是只拷贝一层数据。
深复制 与浅复制对应，它会不仅拷贝数组元素的内容，还会分析其内容是否为一个“ 指针 ”类型的值，如对象，函数，数组等。

如果是一个“ 指针 ”类型的值，则会继续将其值下的所有内容统统复制一份.

内容中的内容全要复制，直到其内容为 undefined 、 null 、 Boolean 、 Number 、 String 、 Symbol 的一种。

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() 方法来操作该对象了。

GPU云服务器云服务器 js_array扩展对象的扩展云计算的扩展服务器的扩展

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91958.html

ES6之数组的扩展

摘要：中对字符串函数对象数组等都进行了扩展，感觉目的呢就是完善一下所为外行人诟病的一些伪其实个人觉得不完美的才是真的美，什么东西都无懈可击了就显得不够有趣了。 ES6中对字符串、函数、对象、数组等都进行了扩展，感觉目的呢就是完善一下JS所为外行人诟病的一些伪bug.其实个人觉得不完美的JS才是真的美，什么东西都无懈可击了就显得不够有趣了。好了，接下来又要开始拾人牙慧了... 主要讲解: ...

Warren 2019-08-22 17:03 评论0 收藏0
ES6—扩展运算符和rest运算符（6）

摘要：扩展运算符简介扩展运算符是三个点，可以将一个数组转为用逗号分隔的参数序列。在实际项目中灵活应用扩展运算符运算符，能写出更精简易读性高的代码。 1、扩展运算符简介扩展运算符（ spread ）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。说的通俗易懂点，有点像化骨绵掌，把一个大元素给打散成一个个单独的小元素。 showImg(https://segmentfault.c...

Amio 2019-08-23 17:21 评论0 收藏0
细说es6中的数组

摘要：函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。总是返回参数值组成的数组。方法的回调函数可以接受三个参数，依次为当前的值当前的位置和原数组。上面代码中，的参数为，表示要拉平两层的嵌套数组。 1.扩展运算符含义扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])//...

Near_Li 2019-08-26 12:13 评论0 收藏0
ES6之数组的扩展

摘要：它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为的成员，然后返回该成员。上面代码中，方法的回调函数可以接受三个参数，依次为当前的值当前的位置和原数组。数组的扩展展开运算符展开运算符（用三个连续的点 ( ... ) 表示）是 ES6 中的新概念，使你能够将字面量对象展开为多个元素。合并数组展开运算符的一个用途是结合数组。如果你需要结合多个数组，在...

paney129 2019-08-21 18:39 评论0 收藏0
PHP7 mongoDB扩展使用

摘要：最近在做的项目需要将升级到，使用过扩展的同学应该知道，的扩展是完全不兼容的扩展的，改如何使用呢。最近在做的项目需要将PHP5.6升级到PHP7.0，使用过PHP-mongo扩展的同学应该知道，PHP7.0的mongodb扩展是完全不兼容PHP5.6的mongo扩展的，php-mongodb改如何使用呢。下面直接说明各种方法的使用: 1.mongodb连接： private func...

objc94 2019-07-01 12:44 评论0 收藏0