读lodash源码之从slice看稀疏数组与密集数组

lijy91 发布于2019-08-21 17:42 / 2072人阅读

摘要：例如其中的为，但是数组中没有元素，是稀疏数组而每个位置都是有元素的，虽然每个元素都为，为密集数组。那稀疏数组和密集数组有什么区别呢在中最主要考虑的是两者在迭代器中的表现。截取并返回新数组为新数组容器。

卑鄙是卑鄙者的通行证，高尚是高尚者的墓志铭。

——北岛《回答》

看北岛就是从这两句诗开始的，高尚者已死，只剩卑鄙者在世间横行。

本文为读 lodash 源码的第一篇，后续文章会更新到这个仓库中，欢迎 star：pocket-lodash

gitbook也会同步仓库的更新，gitbook地址：pocket-lodash

引言

你可能会有点奇怪，原生的 slice 方法基本没有兼容性的问题，为什么 lodash 还要实现一个 slice 方法呢？

这个问题，lodash 的作者已经在 why not the "baseslice" func use Array.slice(), loop faster than slice? 的 issue 中给出了答案：lodash 的 slice 会将数组当成密集数组对待，原生的 slice 会将数组当成稀疏数组对待。

密集数组VS稀疏数组

我们先来看看犀牛书是怎样定义稀疏数组的：

稀疏数组就是包含从0开始的不连续索引的数组。通常，数组的length属性值代表数组中元素的个数。如果数组是稀疏的，length属性值大于元素的个数。

如果数组是稀疏的，那么这个数组中至少有一个以上的位置不存在元素（包括 undefined ）。

例如：

var sparse = new Array(10)
var dense = new Array(10).fill(undefined)

其中 sparse 的 length 为10，但是 sparse 数组中没有元素，是稀疏数组；而 dense 每个位置都是有元素的，虽然每个元素都为undefined，为密集数组。

那稀疏数组和密集数组有什么区别呢？在 lodash 中最主要考虑的是两者在迭代器中的表现。

稀疏数组在迭代的时候会跳过不存在的元素。

sparse.forEach(function(item){
  console.log(item)
})
dense.forEach(function(item){
  console.log(item)
})

sparse 根本不会调用 console.log 打印任何东西，但是 dense 会打印出10个 undefined 。

源码总览

当然，除了对待稀疏数组跟原生的 slice 不一致外，其他的规则还是一样的，下面是 lodash 实现 slice 的源码。

function slice(array, start, end) {
  let length = array == null ? 0 : array.length
  if (!length) {
    return []
  }
  start = start == null ? 0 : start
  end = end === undefined ? length : end

  if (start < 0) {
    start = -start > length ? 0 : (length + start)
  }
  end = end > length ? length : end
  if (end < 0) {
    end += length
  }
  length = start > end ? 0 : ((end - start) >>> 0)
  start >>>= 0

  let index = -1
  const result = new Array(length)
  while (++index < length) {
    result[index] = array[index + start]
  }
  return result
}

不传参的情况

let length = array == null ? 0 : array.length
if (!length) {
  return []
}

不传参时，length 默认为0，否则获取数组的长度。注意这里用的是 array == null ，非 array === null ，包含了 undefined 的判断。

所以在不传参调用 lodash 的 slice 时，返回的是空数组，而原生的 slice 没有这种调用方式。

处理start参数

start 参数用来指定截取的开始位置。

先来看下 MDN 对该参数的描述：

如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取。

如果省略，则从索引0开始

start = start == null ? 0 : start

因此这段是处理省略的情况，省略时，默认值为0。

if (start < 0) {
  start = -start > length ? 0 : (length + start)
}

这段是处理负数的情况。

如果负数取反后比数组的长度还要大，即超出了数组的范围，则取值为0，表示从开始的位置截取，否则用 length + start ，即向后倒数。

start >>>= 0

最后，用在 >>> 来确保 start 参数为整数或0。

因为 lodash 的 slice 除了可以处理数组外，也可以处理类数组，因此第一个参数 array 可能为一个对象， length 属性不一定为数字。

处理end参数

end 参数用来指定截取的结束位置。

同样来看下 MDN 对些的描述：

如果该参数为负数，则它表示在原数组中的倒数第几个元素结束制取。

如果end被省略，则slice会一直提取到原数组的末尾。

如果end大于数组长度，slice也会一直提取到原数组末尾。

end = end === undefined ? length : end

这段是处理 end 被省略的情况，省略时，end 默认为为 length，即截取到数组的末尾。

end = end > length ? length : end

这是处理 end 比数组长度大的情况，如果被数组长度大，也会截取到数组的末尾。

if (end < 0) {
  end += length
}

这段是处理负值的情况，如果为负值，则从数组末尾开始向前倒数。

这里没有像 start 一样控制 end 的向前倒数完后是否为负数，因为后面还有一层控制。

获取新数组的长度

length = start > end ? 0 : ((end - start) >>> 0)

新数组的长度计算方式很简单，就是用 edn - start 即可得出。

上面说到，没有控制最终 end 是否为负数的情况。这里用的是 start 和 end 的比较，如果 start 比 end 大，则新数组长度为0，即返回一个空数组。否则用 end - start 来计算。

这里同样用了无符号右移位运算符来确保 length 为正数或0。

截取并返回新数组

let index = -1
const result = new Array(length)
while (++index < length) {
  result[index] = array[index + start]
}
return result

result 为新数组容器。

用 while 循环，从 start 位置开始，获取原数组的值，依次存入新的数组中。

因为是通过索引取值，如果遇到稀疏数组，对应的索引值上没有元素时，通过数组索引取值返回的是 undefined，但这并不是说稀疏数组中该位置的值为 undefined 。

最后将 result 返回。

参考

javascript权威指南(第6版), David Flanagan著,淘宝前端团队译,机械工业出版社

why not the "baseslice" func use Array.slice(), loop faster than slice?

Array.prototype.slice()

JavaScript: sparse arrays vs. dense arrays

【译】JavaScript中的稀疏数组与密集数组

License

署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

作者：对角另一面

云服务器 GPU云服务器文件的读数组c语言二维数组与指针 js数组申明与赋值 php与js数组交互

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

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

lodash源码分析之chunk的尺与刀

摘要：万条数据依赖读源码之从看稀疏数组与密集数组原理的原理归结起来就是切割和放置。尺在切割之前，需要用尺确定切割的数量。容器的长度刚好与块的数量一致。当与块的数量相等时，表示已经切割完毕，停止切割，最后将结果返回。以不正义开始的事情，必须用罪恶使它巩固。——莎士比亚《麦克白》最近很多事似乎印证了这句话，一句谎言最后要用一百句谎言来圆谎。本文为读 lodash 源码的第二篇，后续文章会...

ZweiZhao 2019-08-21 17:56 评论0 收藏0
Lodash源码讲解-slice函数

摘要：本文首发于技术风暴源码讲解这是我们阅读源码的第篇博客，这一篇博客主要介绍的函数，这个函数内部的实现没有依赖别的函数我们这篇博客就来讲解一下这个函数。本文首发于技术风暴-Lodash源码讲解这是我们阅读源码的第1篇博客，这一篇博客主要介绍Lodash的slice函数，这个函数内部的实现没有依赖别的函数；我们这篇博客就来讲解一下这个slice函数。我们首先来看一下这个函数的源码，源码...

李义 2019-08-22 10:53 评论0 收藏0
《javascript高级程序设计》笔记_数组稀疏数组伪数组

摘要：数组是数据的有序列表，与其他语言不同的是，数组的每一项可以保存任何类型的数据。如下的代码创建的就是一个密集数组稀疏数组与密集数组相反，并不强制要求数组元素是紧密相连的，即允许间隙的存在。数组是数据的有序列表，与其他语言不同的是，ECMAScript 数组的每一项可以保存任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类...

pepperwang 2019-08-21 11:56 评论0 收藏0
Lodash学习笔记 - slice函数

摘要：文档地址中文文档英文文档源码地址第一个函数是，不过源码中依赖了，所以第一篇文章就从开始。这个函数的作用就是裁剪数组，从下标开始，到下标结束，但是并不包含，并将结果作为一个数组返回。并且注明了这个方法用于代替来确保数组正确返回。百忙之中（闲来无事）想抽点时间好好读一下源码，于是就选了Lodash来写一个系列罢。读源码顺序就按照loadsh文档顺序来。文档地址：中文文档英文文档源...

lei___ 2019-08-22 15:22 评论0 收藏0
Lodash学习笔记 - chunk函数

摘要：文档地址中文文档英文文档源码地址将数组拆分成多个长度的区块，并将这些区块组成一个新数组。如果无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。百忙之中（闲来无事）想抽点时间好好读一下源码，于是就选了Lodash来写一个系列罢。读源码顺序就按照loadsh文档顺序来。文档地址：中文文档英文文档源码地址：gayhub _.chunk(array, [size...

DrizzleX 2019-08-22 15:24 评论0 收藏0