美文网首页
react-native之lodash,好用的Array数据处理

react-native之lodash,好用的Array数据处理

作者: 既然可以颠覆何必循规蹈矩 | 来源:发表于2018-11-01 13:41 被阅读0次

勤做笔记，方便自己，帮助他人。

数组 Array

_.chunk

_.chunk(array, [size=1])
将数组 array 拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。
参数：

  • array (Array): 传入的数组（允许字符串），如果传入的参数没有length属性，返回空数组；
  • [size=1] (number): 划分的子数组的长度（不传默认为1），如果是非正数，返回空数组；如果是正小数，size=parseInt(size)；

返回：

  • (Array): 返回一个包含拆分区块的新数组（一个二维数组）。
_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

_. compact

__.compact(array)
创建一个新数组，包含原数组中所有的非假值元素。例如false, null, 0, "", undefined, 和 NaN 都是被认为是“假值”。
参数：

  • array (Array): 如果传入字符串，得到的效果类似对字符串执行split（' '）方法。
    返回：
  • (Array): 返回新数组。
_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

_. concat（JS 自带的concat()方法类似，建议使用自带的）

_.concat(array, [values])
创建一个新数组，将array与任何数组 或 值连接在一起。

参数：
  • array (Array): 被连接的数组。
  • [values] (...*): 连接的值。
返回：
  • (Array): 返回连接后的新数组。
let array = [1];
let other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);
// => [1, 2, 3, [4]]
 
console.log(array);  
// => [1]

_. difference

_.difference(array, [values])
创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。(白话就是去掉第一个数组中和第二个数组中相同的元素）)

参数：
  • array (Array): 要检查的数组。
  • [values] (...Array): 排除的值。
返回：
  • (Array): 返回一个过滤值后的新数组。
_.difference([3, 2, 1], [4, 2]);
// => [3, 1]

_. differenceBy

_.differenceBy(array, [values], [iteratee=_.identity])
与 difference 相似，但可以接收一个迭代函数。 首先使用迭代器分别迭代array 和 values中的每个元素，返回的值作为比较值

参数：
  • array (Array): 要检查的数组。
  • [values] (...Array): 排除的值。
  • [iteratee=_.identity] (Array|Function|Object|string): iteratee 调用每个元素。
返回：
  • (Array): 返回一个过滤值后的新数组。
_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
// => [3.1, 1.3]
// 先执行 Math.floor() 后  每个元素相当于下面的样子
_.difference([3, 2, 1], [4, 2]);


// The `_.property` iteratee shorthand.
_.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
// => [{ 'x': 2 }]

_. differenceWith

_.differenceWith(array, [values], [comparator])
与 difference 相似 但可以接收一个比较函数

参数：
  • array (Array): 要检查的数组。
  • [values] (...Array): 排除的值。
  • [comparator] (Function): comparator 调用每个元素。
返回：
  • (Array): 返回一个过滤值后的新数组。
const array = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
 
_.differenceWith(array, [{ 'x': 1, 'y': 2 }], _.isEqual);
// => [{ 'x': 2, 'y': 1 }]

_. drop _. dropRight

_.drop(array, [n=1])
创建一个切片数组，去除array前面的n个元素。
_. dropRight(array, [n=1])
与 drop 相反 去除array尾部的n个元素。

参数：
  • array (Array):要查询的数组。
  • [n=1] (number): 要去除的元素个数。（n默认值为1。）
返回：
  • (Array): 返回array剩余切片。
_.drop([1, 2, 3]);
// => [2, 3]
 
_.drop([1, 2, 3], 2);
// => [3]
 
_.drop([1, 2, 3], 5);
// => []
 
_.drop([1, 2, 3], 0);
// => [1, 2, 3]

_.dropRight([1, 2, 3]);
// => [1, 2]
 
_.dropRight([1, 2, 3], 2);
// => [1]
 
_.dropRight([1, 2, 3], 5);
// => []
 
_.dropRight([1, 2, 3], 0);
// => [1, 2, 3]

_. dropWhile _. dropRightWhile

_.dropWhile(array, [predicate=_.identity])
与 drop 类似，去除array中从起点开始到 predicate 返回假值结束 部分
_.dropRightWhile(array, [predicate=_.identity])
去除array中从 predicate 返回假值开始到尾部的部分

参数：
  • array (Array):要查询的数组。
    [predicate=_.identity] (Function): 这个函数会在每一次迭代调用。
返回：
  • (Array): 返回array剩余切片。
var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
_.dropWhile(users, function(o) { return !o.active; });
// => objects for ['pebbles'] (这个表示返回 pebbles 所在的对象）
// ES6写法
_.dropWhile(users, (o)=> !o.active );

 
// The `_.matches` iteratee shorthand.
_.dropWhile(users, { 'user': 'barney', 'active': false });
// => objects for ['fred', 'pebbles']
 
// The `_.matchesProperty` iteratee shorthand.
_.dropWhile(users, ['active', false]);
// => objects for ['pebbles']
 
// The `_.property` iteratee shorthand.
_.dropWhile(users, 'active');
// => objects for ['barney', 'fred', 'pebbles']

var users = [
  { 'user': 'barney',  'active': true },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': false }
];
 
_.dropRightWhile(users, function(o) { return !o.active; });
// => objects for ['barney']
 
// The `_.matches` iteratee shorthand.
_.dropRightWhile(users, { 'user': 'pebbles', 'active': false });
// => objects for ['barney', 'fred']
 
// The `_.matchesProperty` iteratee shorthand.
_.dropRightWhile(users, ['active', false]);
// => objects for ['barney']
 
// The `_.property` iteratee shorthand.
_.dropRightWhile(users, 'active');
// => objects for ['barney', 'fred', 'pebbles']

_. fill

_.fill(array, value, [start=0], [end=array.length])
使用 value 值来填充（替换） array，从start位置开始, 到end位置结束（但不包含end位置）。

参数：
  • array (Array): 要填充改变的数组。
  • value (*): 填充给 array 的值。
  • [start=0] (number): 开始位置（默认0）。
  • [end=array.length] (number):结束位置（默认array.length,即全部替换）。
返回：
  • (Array): 返回 array。
const array = [1, 2, 3];

_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']
 
_.fill(Array(3), 2);  // Array(3) 新建一个长度为3的数组
// => [2, 2, 2]
 
_.fill([4, 6, 8, 10], '*', 1, 3);
// => [4, '*', '*', 10]

_. findIndex()

_.findIndex(array, [predicate=_.identity], [fromIndex=0])
该方法类似_.find，区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值（index），而不是元素本身。
_. findIndex(array, [predicate=_.identity], [fromIndex=0])
findLastIndex 从右到左的迭代集合array中的元素

参数：
  • array (Array): 要填充改变的数组。
  • [predicate=_.identity] (Array|Function|Object|string): 这个函数会在每一次迭代调用。
  • [fromIndex=0] (number): The index to search from.
返回：
  • (number): 返回找到元素的 索引值（index），否则返回 -1。
const users = [
  { 'user': 'barney',  'active': true },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': false }
];
_.findIndex(users,(o)=> o.user == 'barney' );
// => 0
 
// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
 
// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0
 
// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2

const users = [
  { 'user': 'barney',  'active': true },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': false }
];
 
_.findLastIndex(users, function(o) { return o.user == 'pebbles'; });
// => 2
 
// The `_.matches` iteratee shorthand.
_.findLastIndex(users, { 'user': 'barney', 'active': true });
// => 0
 
// The `_.matchesProperty` iteratee shorthand.
_.findLastIndex(users, ['active', false]);
// => 2
 
// The `_.property` iteratee shorthand.
_.findLastIndex(users, 'active');
// => 0

_. flatten _. flattenDeep _.flattenDepth

_.flatten(array)
减少一级array嵌套深度。
_. flattenDeep(array)
将array递归为一维数组。
_.flattenDepth(array, [depth=1])
根据 depth 递归减少 array 的嵌套层级

参数：
  • array (Array): 需要减少嵌套层级的数组。
    [depth=1] (number):最多减少的嵌套层级数。
返回：
  • (Array): 返回减少嵌套层级后的新数组。
_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]


_.flattenDeep([1, [2, [3, [4]], 5]]);
// => [1, 2, 3, 4, 5]


const array = [1, [2, [3, [4]], 5]];
 
_.flattenDepth(array, 1);
// => [1, 2, [3, [4]], 5]
 
_.flattenDepth(array, 2);
// => [1, 2, 3, [4], 5]

_. head _. tail _. initial _. last (建议使用ES6新特性代替)

_.head(array)
~~获取数组 array 的第一个元素 返回元素 ~~
_. tail(array)
获取除了array数组第一个元素以外的全部元素。 返回切片数组
_. initial(array)
获取除了数组中的所有元素，除了最后一个元素。 返回切片数组。
_. last(array)
~~获取array中的最后一个元素。 返回元素 ~~

_.head([1, 2, 3]);
// 1
_.tail([1, 2, 3]);
// [2, 3]

S6新特性

const [head, ...tail] = [1, 2, 3];


const [last, ...initial] = [1, 2, 3].reverse();
// 如果你讨厌 会改变数据结构，那你可以在调用 reverse 之前使用延展操作符（spread operator）来复制一个数组。

_. fromPairs

_.fromPairs(pairs))
这个方法返回一个由键值对pairs构成的对象。

参数：
  • pairs (Array): 键值对pairs。这里需要注意，传入的数组只能是类对象格式的数组，也就是说传入的数组的子元素必须是数组，而这个方法只会解析子数组的前两个元素，第一个元素构成生成对象的key值，第二个元素构成value值。
返回：
  • (Object): 返回一个新对象。
_.fromPairs([['fred', 30], ['barney', 40]]);
// => { 'fred': 30, 'barney': 40 }

_. indexOf _. lastIndexOf

_.indexOf(array, value, [fromIndex=0])
返回首次 value 在数组array中被找到的 索引值， 如果 fromIndex 为负值，将从数组array尾端索引进行匹配。
_.lastIndexOf(array, value, [fromIndex=array.length-1])
这个方法类似 _.indexOf ，区别是它是从右到左遍历array的元素。

参数：
  • array (Array): 需要查找的数组。
  • value (*): 需要查找的值。
  • [fromIndex=0] (number): 开始查询的位置。
返回：
  • (number): 返回 值value在数组中的索引位置, 没有找到为返回-1。
_.indexOf([1, 2, 1, 2], 2);
// => 1
 
// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3

_. intersection

_.intersection([arrays])
返回重叠的元素放入到数组中。

_.intersection([2, 1], [4, 2], [1, 2]);
// => [2]

_. intersectionBy

_.intersectionBy([arrays], [iteratee=_.identity])
类似 _.intersection，但可以接收一个迭代函数。 首先使用迭代器分别迭代array 和 values中的每个元素，返回的值作为比较值

_.intersectionBy([2.1, 1.2], [4.3, 2.4], Math.floor);
// => [2.1]
 
// The `_.property` iteratee shorthand.
_.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }]

_. intersectionWith

_.intersectionWith([arrays], [comparator])
类似 _.intersection， 但可以接收一个比较函数

_.intersectionBy([2.1, 1.2], [4.3, 2.4], Math.floor);
// => [2.1]
 
// The `_.property` iteratee shorthand.
_.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }]

_. join (类似自带的join()函数)

_.join(array, [separator=','])
将 array 中的所有元素转换为由 separator 分隔的字符串。

_.join(['a', 'b', 'c'], '~');
// => 'a~b~c'

_. nth

_.nth(array, [n=0])
获取array数组的第n个元素。如果n为负数，则返回从数组结尾开始的第n个元素。

const array = ['a', 'b', 'c', 'd'];
_.nth(array, 1);
// => 'b'
 
_.nth(array, -2);
// => 'c';

_. pull 、 _.pullAll 、 _. pullAllBy 、 _. pullAllWith 、 _.pullAt(会改变数组)

_.pull(array, [values])
移除数组array中所有和给定值相等的元素，使用 SameValueZero 进行全等比较。
_. pullAll(array, [values])
这个方法类似 pull ，区别是这个方法接收一个要移除值的数组。
_. pullAllBy(array, [values])
这个方法类似 pullAll ， 但可以接收一个迭代函数。 首先使用迭代器分别迭代array 和 values中的每个元素，返回的值作为比较值
_. pullAllWith(array, [values])
这个方法类似 pullAll ， 但可以接收一个比较函数
_.pullAt(array, [indexes])
根据索引 indexes，移除array中对应的元素，并返回被移除元素的数组。

const array = [1, 2, 3, 1, 2, 3];
_.pull(array, 2, 3);
console.log(array);
// => [1, 1]

const array = [1, 2, 3, 1, 2, 3];
_.pullAll(array, [2, 3]);
console.log(array);
// => [1, 1]

const array = [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }];
_.pullAllBy(array, [{ 'x': 1 }, { 'x': 3 }], 'x');
console.log(array);
// => [{ 'x': 2 }]

const array = [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }];
_.pullAllWith(array, [{ 'x': 3, 'y': 4 }], _.isEqual);
console.log(array);
// => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }]

var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);
 
console.log(array);
// => [5, 15]
 
console.log(evens);
// => [10, 20]

_.remove (会改变数组)

_.remove(array, [predicate=_.identity])
移除数组中predicate（断言）返回为真值的所有元素

返回：
  • (Array): 返回移除元素组成的新数组。
const array = [1, 2, 3, 4];
const evens = _.remove(array, (n) =>n % 2 == 0 );
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

_. reverse

_.reverse(array)
反转array，使得第一个元素变为最后一个元素，第二个元素变为倒数第二个元素，依次类推。

_. slice (数组截取方法， 类似数组的slice方法。)

_.slice(array, [start=0], [end=array.length])
裁剪数组array，从 start 位置开始到end结束，但不包括 end 本身的位置。

_. sortedIndex 、sortedLastIndex、 _.sortedIndexBy _.sortedLastIndexBy

_. sortedIndex(array, value)
使用二进制的方式检索来决定 value值 应该插入到数组中 尽可能小的索引位置，以保证array的排序。
_. sortedLastIndex(array, value)
从后往前进行遍历
_.sortedIndexBy(array, value, [iteratee=_.identity])
它接受一个 iteratee （迭代函数）
_. sortedLastIndexBy(array, value, [iteratee=_.identity])
从后往前进行遍历 它接受一个 iteratee （迭代函数）

返回：
  • (Array): 返回 value值 应该在数组array中插入的索引位置 index。
_.sortedIndex([30, 50], 40);
// => 1

_. sortedIndexOf（类似数组中的indexof()方法） 、sortedLastIndexOf

_.sortedIndexOf(array ,value)
这个方法类似 _.indexOf，但它是在已经排序的数组array上执行二进制检索。
从前往后遍历数组返回，第一个匹配上元素的索引，如果没有匹配到则返回－1。
_. sortedLastIndexOf(array ,value)
从后往前进行遍历

返回：
  • (Array): 返回 value值 应该在数组array中插入的索引位置 index。
_.sortedIndex([30, 50], 40);
// => 1

_. sortedUniq 、 _.uniq

_.sortedUniq(array)
对有序的数组进行去重。如果传入无序数组则返回原数组。
_. uniq(array ,value)
对数组进行去重。

返回：
  • (Array): 返回一个新的不重复的数组。
_.sortedIndex([30, 50], 40);
// => 1

_.sortedUniqBy(array, [iteratee])
_.uniqBy(array, [iteratee=_.identity])
_.uniqWith(array, [comparator]) 同理

_. take 、 _. takeWhile 、 _. takeRight 、 _. takeRightWhile

_.take(array, [n=1])
创建一个数组切片，从array数组的起始元素开始提取n个元素。
_.takeWhile(array, [predicate=_.identity])
从array数组的起始元素开始提取元素，，直到 predicate 返回假值。
_.takeRight(array, [n=1])
从array数组的最后一个元素开始提取n个元素。
_.takeRightWhile(array, [predicate=_.identity])
从array数组的最后一个元素开始提取元素，直到 predicate 返回假值。

返回：
  • (Array): 返回 array 数组的切片（从起始元素开始n个元素）。
_.take([1, 2, 3]);
// => [1]
 
_.take([1, 2, 3], 2);
// => [1, 2]
 
_.take([1, 2, 3], 5);
// => [1, 2, 3]
 
_.take([1, 2, 3], 0);
// => []

_. union 、 _. unionBy 、 _. unionWith

_.union([arrays])
arrays（数组）的并集，按顺序返回，返回数组的元素是唯一的

返回：
  • (Array): 返回一个新的联合数组。
_.union([2], [1, 2]);
// => [2, 1]

_.unionBy([arrays], [iteratee=_.identity])
_.unionWith([arrays], [comparator])同理

_. without

_.without(array, [values])
创建一个剔除所有给定值的新数组， 返回过滤值后的新数组。(不像 _.pull, 这个方法会返回一个新数组。)

_.without([2, 1, 2, 3], 1, 2);
// => [3]

_. xor

_.xor([arrays])
创建一个给定数组唯一值的数组

_.xor([2, 1], [2, 3]);
// => [1, 3]

_.xorBy([arrays], [iteratee=_.identity])
_.xorWith([arrays], [comparator]) 同理

_. unzip 、 _. zip 、 _. unzipWith

_.zip([arrays])
将传入所有数组的第一个元素放到第一个数组，所有第二个元素放到第二个数组，以此类推。

var zipped = _.zip(['fred', 'barney'], [30, 40], [true, false]);
// => [['fred', 30, true], ['barney', 40, false]]
 
_.unzip(zipped);
// => [['fred', 'barney'], [30, 40], [true, false]]

_.unzipWith(array, [iteratee=_.identity])同理

_. zipObject

_.zipObject([props=[]], [values=[]])
将两个数组合并为一个对象，第一个数组的值为对象的键，第二个为对象的值。
_.zipObjectDeep([props=[]], [values=[]])
这个方法类似 _.zipObject，除了它支持属性路径。

_.zipObject(['a', 'b'], [1, 2]);
// => { 'a': 1, 'b': 2 }


_.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);
// => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }

_.xorBy([arrays], [iteratee=_.identity])
_.xorWith([arrays], [comparator]) 同理

_. zipWith

_.zipWith([arrays], [iteratee=_.identity])

_.zipWith([1, 2], [10, 20], [100, 200], function(a, b, c) {
  return a + b + c;
});
// => [111, 222]

集合 Collection 待续。。。

日期 Date 待续。。。

函数 Function 待续。。。

Lang 待续。。。

数学 Math 待续。。。

数字 Number 待续。。。

对象 Object 待续。。。

Seq 待续。。。

Properties 待续。。。

字符串 String 待续。。。

实用函数 Util 待续。。。

Methods 待续。。。

相关文章

  • react-native之lodash,好用的Array数据处理

    勤做笔记，方便自己，帮助他人。 数组 Array _.chunk _.chunk(array, [size=1])...

  • Lodash常用函数

    为什么选择 Lodash？Lodash 通过降低 array、number、objects、string 等等的...

  • Lodash之Array（1）

    _.chunk(array, [size=1]) 将array拆分成多个size长度的块，把这些块组成一个新数组。...

  • 前端常用的库

    lodash https://www.lodashjs.com/ 简介: Lodash 通过降低 array、nu...

  • loadsh常用函数记录[转载]

    lodash是js集Array/Object/String/Function的Util于一身。lodash打包了A...

  • (一)Lodash数组篇

    概念简述 lodash 是一个类库 Lodash 通过降低 array、number、objects、string...

  • Lodash源码解析 Part1：Array、Collectio

    Lodash源码解析 Part1：Array、Collection lodash究竟做了什么？封装封装可能会用到但...

  • Lodash使用入门

    项目里用到了Lodash。感觉有些还是很好用。就自己开研究了下。 参考链接： Lodash 中文文档 Lodash...

  • minimize lodash bundling

    lodash 是一个经常使用的数据处理工具库。它使用起来很便利，但是也有个小问题，就是lodash本身挺大的(未压...

  • Lodash

    Lodash-Array Array _.chunk按照一定的长度将数组均匀切割成 chunk，将切割后的 chu...

网友评论

      本文标题：react-native之lodash,好用的Array数据处理

      本文链接：https://www.haomeiwen.com/subject/tdemmftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|react-native之lodash,好用的Array数据处理|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！