专栏首页code秘密花园【30秒一个知识点】Array(二)

【30秒一个知识点】Array(二)

本系列翻译自开源项目 30-seconds-of-code 这是一个非常优秀的系列,不是说真的三十秒就能理解,也需要你认真的思考,其中有一些点非常精妙,很值得一读。 本文在我的github同步更新,点击文章末尾阅读全文你可以看到当前翻译的全部系列。 如果您对本期有不同或者更好的见解,请后台留言,喜欢请点个好看,谢谢阅读。

chunk

将数组分成指定大小的较小数组。

使用 Array.from()创建一个新的数组,该数组与将要生成的块的数量相匹配。 使用 Array.prototype.slice() 将新数组的每个元素映射到长度为 size的块。 如果原始的数组不能被均匀的分割,最后的一块将包含剩余的元素。

const chunk = (arr, size) =>  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>    arr.slice(i * size, i * size + size)  );

示例

chunk([1, 2, 3, 4, 5], 2); // [[1,2],[3,4],[5]]

compact

删除数组中错误的元素

使用 Array.prototype.filter() 过滤掉错误的元素 ( false, null, 0, "", undefined, NaN).

const compact = arr => arr.filter(Boolean);

示例

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); // [ 1, 2, 3, 'a', 's', 34 ]

countBy

基于给定的函数将数组中的元素进行分组,并返回每个组中的元素数。

使用 Array.prototype.map()来将数组中的每个元素映射到函数或属性名。 使用 Array.prototype.reduce() 创建一个对象,其中的键是从映射结果生成的。

const countBy = (arr, fn) =>  arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => {    acc[val] = (acc[val] || 0) + 1;    return acc;  }, {});

示例

countBy([6.1, 4.2, 6.3], Math.floor); // {4: 1, 6: 2}countBy(['one', 'two', 'three'], 'length'); // {3: 2, 5: 1}

countOccurrences

计算数组中某个元素出现的次数。

Use Array.prototype.reduce()在每次遇到数组中的特定值时递增计数器。

const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);

示例

countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3

deepFlatten

将一个多层嵌套的数组转转换成一个一元数组。

使用递归. 使用 Array.prototype.concat() 和一个空数组( [])以及展开运算符( ...)来平铺一个数组。 当每个元素还是一个数字时,递归铺平他。

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));

示例

deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]

difference

返回两个数组间的差异值。

从数组 b中创建一个 Set ,然后用使用另一个数组 aArray.prototype.filter() 方法过滤掉 b中的元素。

const difference = (a, b) => {  const s = new Set(b);  return a.filter(x => !s.has(x));};

示例

difference([1, 2, 3], [1, 2, 4]); // [3]

differenceBy

将提供的函数应用于两个数组的每个数组元素后,返回两个数组中不同的元素。

通过 b中的每个元素调用 fn后创建一个 Set ,然后将 Array.prototype.filter()fn调用后的 a结合使用,只保留先前创建的集合中不包含的值。

const differenceBy = (a, b, fn) => {  const s = new Set(b.map(fn));  return a.filter(x => !s.has(fn(x)));};

示例

differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1.2]differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [ { x: 2 } ]

differenceWith

筛选出比较器函数不返回 true的数组中的所有值。

使用 Array.prototype.filter()Array.prototype.findIndex() 查找合适的值。

const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) === -1);

示例

differenceWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b)); // [1, 1.2]

drop

返回一个新数组,从原数组左边删除 n个元素。

使用 Array.prototype.slice() 从左侧删除指定数量的元素。

const drop = (arr, n = 1) => arr.slice(n);

slice(n) 表示取数组下标n以后的元素(含n)

示例

drop([1, 2, 3]); // [2,3]drop([1, 2, 3], 2); // [3]drop([1, 2, 3], 42); // []

dropRight

返回一个新数组,从原数组右边删除 n个元素。

使用 Array.prototype.slice()从右边删除指定数目的元素。

const dropRight = (arr, n = 1) => arr.slice(0, -n);

slice(0, -n) 表示取数组第一个到倒数第n个元素(不含-n)

示例

dropRight([1, 2, 3]); // [1,2]dropRight([1, 2, 3], 2); // [1]dropRight([1, 2, 3], 42); // []

dropRightWhile

从数组尾部移除数组中的元素,直到传递的函数返回 true。返回数组中剩余的元素。

遍历数组,使用 Array.prototype.slice()删除数组的最后一个元素,直到函数的返回值为 true。返回剩余的元素。

const dropRightWhile = (arr, func) => {  while (arr.length > 0 && !func(arr[arr.length - 1])) arr = arr.slice(0, -1);  return arr;};

示例

dropRightWhile([1, 2, 3, 4], n => n < 3); // [1, 2]

dropWhile

移除数组中的元素,直到传递的函数返回 true。返回数组中剩余的元素。

遍历数组,使用 Array.prototype.slice()删除数组的第一个元素,直到函数的返回值为 true。返回剩余的元素。

const dropWhile = (arr, func) => {  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);  return arr;};

示例

dropWhile([1, 2, 3, 4], n => n >= 3); // [3,4]

本文分享自微信公众号 - code秘密花园(code_mmhy),作者:ConardLi

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译]【30秒一个知识点】Array(三)

    使用 Array.prototype.filter() 创建包含给定数组中所有下标是n的倍数的元素的新数组。

    ConardLi
  • 【30秒一个知识点】Array(一)

    如果被提供的断言函数接收数组中每个元素作为参数都返回 true,则返回 true,否则返回 false。

    ConardLi
  • [现场实录] VueConf 2019 尤雨溪演讲总结

    Chrome DevTools 有约 90 万的周活用户,React 相比有 160 万。Evan 推荐用 Chrome DevTools 来预测 Vue 的项...

    ConardLi
  • 数据结构Stack

    ​ 在很多应用中,我们需要维护多个对象的集合,这种操作非常简单。我们可能想要向集合中 加入某个元素,去掉某个元素,以及遍历 集合中的元素并对他们执行某种操...

    lwen
  • JS数组操作

    1)delete方法:delete arr[1] 这种方式数组长度不变,此时arr[1]变为undefined了,但是也有好处原来数组的索引也保持不变,此时要遍...

    似水的流年
  • JavaScript引用类型之Array数组之强大的splice()方法

    splice()方法可以说是Array数组最强大的方法,他的用法很多,主要用法是向数组的中部插入项! 下面是它的用法: arrayObject.splice(i...

    郑小超.
  • 怀英漫谈9 - JS 数组

    所谓的数组,就是一些数据的集合,JS中没有集合的概念,所以集合也是数组的一种。如果你Java用的多,那么这个概念就有点儿难以理解,毕竟从Java的文意来说,集合...

    用户1335799
  • 面试算法:lg(k)时间查找两个排序数组合并后第k小的元素

    望月从良
  • javascript大法好,不用记

    数组的操作 ---- Array.prototype.toString ( ) 把数组转变为字符串,返回字符串,arr.toString(); ---- Arr...

    前朝楚水
  • Java数据结构和算法(二)——数组

      上篇博客我们简单介绍了数据结构和算法的概念,对此模糊很正常,后面会慢慢通过具体的实例来介绍。本篇博客我们介绍数据结构的鼻祖——数组,可以说数组几乎能表示一切...

    IT可乐

扫码关注云+社区

领取腾讯云代金券