JS - Lodash工具库的使用详解5(Array数组函数2:获取部分数组片段)

作者: hgweb 发布时间: 2019-10-11 浏览: 435 次 编辑

四、Array 数组操作函数2:获取部分数组片段(不改变原数组)

1,随机获取部分元素

sampleSize 方法可以从数组中获得 n 个随机元素

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

原文:JS - Lodash工具库的使用详解5(Array数组函数2:获取部分数组片段)

2,获取数组部分片段(通过选择的方式)

(1)take 方法创建一个数组切片,从 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);   // => []

(2)takeRight 方法创建一个数组切片,从 array 数组的最后一个元素开始提取 n 个元素。

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

(3)takeWhile 方法从 array 数组的起始元素开始提取元素,直到 predicate 返回假值。

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

(4)takeRightWhile 方法从 array 数组的最后一个元素开始提取元素,直到 predicate 返回假值。

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

3,获取数组部分片段(通过移除的方式)

(1)drop 方法可以创建一个切片数组,去除 array 前面的 n 个元素。(n 默认值为 1。)

_.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]

2)dropRight 方法可以创建一个切片数组,去除 array 尾部的 n 个元素。(n 默认值为 1。)

_.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]

(3)drop 方法创建一个切片数组,去除 array 中从起点开始到 predicate(作为第二个参数传入)返回假值结束部分。

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
  
_.dropWhile(users, function(o) { return !o.active; });    // => objects for ['pebbles']
  
// 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']

(4)dropRightWhile 方法创建一个切片数组,去除 array 中从 predicate(作为第二个参数传入)返回假值开始到尾部的部分。

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']

4,剔除指定值

without 方法可以创建一个剔除所有给定值的新数组。

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

5,数组去重

(1)uniq 方法创建一个去重后的 array 数组副本(只有第一次出现的元素才会被保留)。

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

(2)uniqBy 方法类似 uniq ,除了它接受一个 iteratee(迭代函数),调用每一个数组(array)的每个元素以产生唯一性计算的标准。

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

(3)uniqWith 方法类似 _.uniq, 除了它接受一个 comparator 调用比较 arrays 数组的每一个元素。

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
  
_.uniqWith(objects, _.isEqual);   // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

6,找出存在一个数组,但不存在另一数组的元素

(1)difference 方法可以创建一个具有唯一 array 值的数组,每个值不包含在其他给定的数组中。

注意:该方法(包括下面的 differenceBydifferenceWith)是创建并返回一个新数组,这个数组中的值,为第一个数组(array 参数)排除了给定数组中的值。该方法并不会改变原数组。

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

(2)differenceBy 方法相较于 difference 方法多了第三个参数, 该参数接受一个 iteratee (迭代器),它会分别迭代两个数组的每个元素,返回的值作为比较值。 结果值是从第一数组中选择。

_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);   // => [3.1, 1.3]
  
// The `_.property` iteratee shorthand.
_.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');   // => [{ 'x': 2 }]


(3)differenceWith 方法相较于 difference 方法多了第三个参数, 该参数接受一个 comparator (比较器),它调用比较 arrayvalues 中的元素。 结果值是从第一数组中选择。

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
  
_.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);   // => [{ 'x': 2, 'y': 1 }]

7,找出多个数组都存在的部分(交集)

(1)intersection 方法创建唯一值的数组,这个数组包含所有给定数组都包含的元素。(可以理解为给定数组的交集)

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

(2)intersectionBy 方法类似 intersection,区别是它接受一个 iteratee 调用每一个 arrays 的每个值以产生一个值,通过产生的值进行了比较。结果值是从第一数组中选择。

_.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 }]


(3)intersectionWith 方法类似 intersection,区别是它接受一个 comparator 调用比较 arrays 中的元素。结果值是从第一数组中选择。

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
  
_.intersectionWith(objects, others, _.isEqual);   // => [{ 'x': 1, 'y': 2 }]

8,找出多个数组互相不重叠的部分(差集)

(1)xor 方法创建一个给定数组唯一值的数组。返回值的顺序取决于他们数组的出现顺序。

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


(2)xorBy 方法类似 xor,除了它接受 iteratee(迭代器),这个迭代器 调用每一个 arrays(数组)的每一个值,以生成比较的新值。

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

(3)xorWith 方法类似 xor,它接受一个 comparator ,以调用比较数组的元素

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
  
_.xorWith(objects, others, _.isEqual);   // => [{ 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]

9,根据指定条件将一个数组分成两个数组

partition 方法创建一个分成两组的元素数组,第一组包含 predicate(断言函数)返回为 truthy(真值)的元素,第二组包含 predicate(断言函数)返回为 falsey(假值)的元素。

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

JS Lodash工具库的使用详解系列:

JS - Lodash工具库的使用详解1(使用debounce函数实现防抖)

JS - Lodash工具库的使用详解2(使用throttle函数实现节流)

JS - Lodash工具库的使用详解3(String字符串操作函数)

JS - Lodash工具库的使用详解4(Array数组函数1:查找指定元素、或索引)

JS - Lodash工具库的使用详解5(Array数组函数2:获取部分数组片段)

JS - Lodash工具库的使用详解6(Array数组函数3:移除、修改原数组内容)

JS - Lodash工具库的使用详解7(Array数组函数4:数组排序、打乱)

JS - Lodash工具库的使用详解8(Array数组函数5:数组与对象间的转换)

JS - Lodash工具库的使用详解9(Array数组函数6:如果不是数组强制转成数组)

JS - Lodash工具库的使用详解10(Array数组函数7:根据指定规则进行分组、统计)

JS - Lodash工具库的使用详解11(Array数组函数8:创建指定范围数字的数组)

JS - Lodash工具库的使用详解12(创建一个只能调用1次、n次的函数)

JS - Lodash工具库的使用详解13(创建一个对某函数结果取反的函数)

JS - Lodash工具库的使用详解14(浅拷贝,深拷贝)

JS - Lodash工具库的使用详解15(深比较,判断是否包含某属性或属性值)

JS - Lodash工具库的使用详解16(判断是否为空)

JS - Lodash工具库的使用详解17(类型检查)

JS - Lodash工具库的使用详解18(生成随机数)