(一)Lodash数组篇

作者: 我拥抱着我的未来 | 来源:发表于2018-09-17 20:11 被阅读0次

(一)Lodash数组篇
Lodash使用避坑小结
lodash简介
面试题目总结
lodash中常用的方法
VUE开发--Lodash组件(四十七)
【ES6学习之对象函数】
使用lodash或纯js把数组对象中相同的字段的值合并
lodash删除数组中的元素和对象数组中的元素
函数式编程（四）——函数组合

概念简述

lodash 是一个类库
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单

数组篇

_.chunk(array,[size=1]) 切割数组

作用: 讲数组array拆分成多个size长度的区块，并将这些区块组成一个新的数组，如果array无法分割成等长的区块，那么最后的剩余元素将组成一个区块。

参数
array :需要处理的数组
size=1(number):每个数组区块的长度
返回
(Array):返回一个包含拆分区块的新数组(相当于二维数组)
demo

 let _ = require("lodash");
    let arr = [1, 2, 3, 4, 5, 6];
    let arr_result = _.chunk(arr, 2);
    console.log(arr_result);
//结果[[1,2],[3,4],[5,6]]
//如果第二个参数要是4则变成 [[1,2,3,4],[5,6]]

_.compact(array) 刨去假值

作用: 创建一个新数组，包含原数组中所有的非假值元素。例如false,null,0,"",undefined,NaN都被认为假值

参数
array(要处理的数组)
返回值
array:返回过滤掉假值的新数组
demo

   let _ = require("lodash");
    let arr = [0, 1, NaN, 2, null, 3, undefined];
    let arr_result = _.compact(arr);
    console.log(arr_result);
//结果 [1,2,3]

_.concat(array,[values]) 两个数组链接起来

创建一个新的数组将array与任何数组或值链接在一起

参数
array:被链接的数组
[values] (...*)连接的值
返回值
(Array):返回连接后的新数组
demo

    let _ = require("lodash");
    let arr = [1];
    let arr2 = _.concat(arr, 2, [3], [[4]], { name: "张三" });
    console.log(arr2);
    console.log(arr);

_.difference(array,[values]) 找到不同的

创建一个具有唯一array值得数组, 每个值不包含在其他给定的数组中

参数
array:要检查的数组
[values] :要排除的值
返回值
(Array):返回一个过滤值后的新数组,他是以第一个数组为基准
demo

let _ = require("lodash");
    let result = _.difference([3, 2, 100], [100, 2]);
    console.log(result);
//结果就是[3]

_.differenceBy(array,[values],condition) 找到不同的带条件

创建一个具有唯一array值得数组,

参数
array:要检查的数组
[values] :要排除的值
条件 :他是先把2个数组里面的所有值都执行一遍条件，然后筛选出来
返回值
(Array):返回一个过滤值后的新数组
demo

    let _ = require("lodash");
    let result = _.differenceBy(
      [{ name: "哈哈" }, { sex: "男" }],
      [{ name: "哈哈" }],
      "name"
    );
    console.log(result);
//结果[{sex:"男"}]

    let _ = require("lodash");
    let result = _.differenceBy([3.1, 4.2, 5.3], [4.6, 5.1], Math.floor);
    console.log(result);
//结果3.1

   let _ = require("lodash");
    let result = _.differenceBy([12, 3, 4], [3, 1], function(item) {
      return item - 4 > 0;
    });
    console.log(result);

_.drop(array,[n=1]) 从左边去掉

创建一个切片数组，去除array前面的n个元素,从左边开始切割

参数
array:要查询的数组
[values] :要去除的元素个数
返回值
(Array):返回array剩余的切片
demo

    let _ = require("lodash");
    let arr = [1, 2, 3, 4, 5, 6];
    let arr_result = _.drop(arr, 3);
    console.log(arr_result);
//结果就是[4,5,6]
//如果要去除的元素个数比总长都大，那么返回一个空数组，要是0就不切割了

_.dropRight(array,[n=1]) 从右边去掉

创建一个切片数组，去除array前面的n个元素,从右边开始切割

参数
array:要查询的数组
[values] :要去除的元素个数
返回值
(Array):返回array剩余的切片
demo

    let _ = require("lodash");
    let arr = [1, 2, 3, 4, 5, 6];
    let arr_result = _.dropRight(arr, 3);
    console.log(arr_result);
//结果就是[1,2,3]
//如果要去除的元素个数比总长都大，那么返回一个空数组

_.dropwhile(array,方法或者条件) 去掉带条件

创建一个切片数组，去除满足方法或者条件的

参数
array:要查询的数组
[condition] : 满足方法或者条件的
返回值
(Array):返回array剩余的切片
demo

    let _ = require("lodash");
    let arr = [1, 2, 3, 4, 5, 6];
    let arr_result = _.dropWhile(arr, function(item) {
      return item < 4;
    });
    console.log(arr_result);
//结果就是[4,5,6]
//如果都不满足，那么返回一个空数组

_.fill(array,value,[start=0],[end=array.length]) 替换

使用value值来替换(array里面的值),从start位置开始到end位置结束

参数
array:要填充改变的数组
value(*): 填充给array的值
start=0 :开始位置(默认0)
end=array.length:结束位置(默认array.length)
返回值
(Array):会改变原数组
demo

    let _ = require("lodash");
    let array = [2, 3, 4];
    let result = _.fill(array, "a", 1, 2);
    console.log(result);
   //结果就是[2,"a",4]
//要是从0开始那么改变的就是第一位

_.findIndex(array,condition,[fromIndex=0]) 找到序号

返回第一个通过条件为真值得元素的索引(index)值,而不是元素本身

参数
array:要搜索的数组
condition: 条件
[fromIndex=0]: 从第几个开始找
返回值
(number):返回找到元素的索引值(index) ,否则返回就是-1
demo

    let _ = require("lodash");
    let user = [
      { user: "哈哈哈", active: true },
      { user: "呵呵呵", active: true },
      { user: "嘿嘿嘿", active: false },
      { user: "哦哦哦", active: false }
    ];
    let result = _.findIndex(user, function(item) {
      return !item.active;
    });
    console.log(result);
//返回的结果就是2因为从0开始

_.head(array) 找到第一个元素等价于 _.first(array)

获取数组array的第一个元素

参数
array:要搜索的数组
返回值
(*):返回数组的第一个元素
demo

 let _ = require("lodash");
    let user = [
      { user: "哈哈哈", active: true },
      { user: "呵呵呵", active: true },
      { user: "嘿嘿嘿", active: false },
      { user: "哦哦哦", active: false }
    ];
    let result = _.first(user);
    console.log(result);
 //结果就是{user:"哈哈哈",active:true}

_.flattenDeep(array) 回归一维数组

将array递归为一维数组

参数
array:要搜索的数组
返回值
(*):返回一个新的一维数组
demo

    let _ = require("lodash");
    let user = [1, [2, 3, 4, [6, 8, [9, 10]]]];
    let result = _.flattenDeep(user);
    console.log(result);
//结果就是[1,2,3,4,6,8,9,10];

_.flattenDepth(array,[depth=1]) 去除数组指定的层数

依据depth递归减少array的嵌套层数

参数
array:要减少嵌套层级的数组
depth:最多减少的嵌套层级数
返回值
(*):返回减少嵌套层级后的新数组
demo

    let _ = require("lodash");
    let user = [1, [2, 3, 4, [6, 8, [9, 10]]]];
    let result = _.flattenDepth(user, 2);
    console.log(result);
    //结果[1,2,3,4,6,7,[9,10]]

_.intersection([arrays]) 求交集

创建唯一值得数组，这个数组包含所有数组的共同元素

参数
array:待检查的数组
返回值
(*):返回一个包含所有传入数组交集元素的新数组
demo

   let _ = require("lodash");
    let result = _.intersection([1, 2], [2, 3], [4, 2]);
    console.log(result);
    //结果[2]

_.intersectionBy([arrays],condition) 求交集

创建唯一值得数组，这个数组包含所有数组的共同元素

参数
array:待检查的数组
condition:条件
返回值
(*):返回一个包含所有传入数组交集元素的新数组
demo

   let _ = require("lodash");
    let result = _.intersectionBy(
      [1.3, 2.2],
      [2.6, 3.9],
      [4.1, 2.1],
      Math.floor
    );
    console.log(result);
  //结果[2.2]

  let _ = require("lodash");
    let result = _.intersectionBy([{ x: 1 }], [{ x: 1 }, { name: 3 }], "x");
    console.log(result);
  //结果[{x:1}]

_.join([arrays],分隔符) 把数组变成字符串

将array中的所有元素转换为由分隔符分割的字符串

参数
array:待检查的数组
分隔符:分割元素
返回值
(*):返回连接字符串
demo

 let _ = require("lodash");
    let result = _.join([1, 2, 3, 4], "~");
    console.log(result);
//结果1~2~3~4

_.last(array) 找到最后一个元素

获取array中最后一个元素

参数
array:待检查的数组
返回值
(*):返回array中的最后一个元素
demo

 let _ = require("lodash");
 let result = _.last([1, 2, 3, 4]);
 console.log(result);
//结果就是4

_.nth(array,[n=0])

获取array中第N个元素，如果N为负数，则返回从数组结尾开始的第N个元素

参数
array:待检查的数组
n=0 要返回的元素的索引值
返回值
(*):返回array中的第N个元素
demo

    let _ = require("lodash");
    let array = [1, 3, 3, 4, 5, 6];
    let result = _.nth(array, 0);
    console.log(result);
   //结果就是1

_.pull(array,[values]) 删除

移除数组array中所有和给定值相等的元素，这个方法会改变原数组。

参数
array:待检查的数组
[values] 要删除的值
返回值
(*):返回array
demo

    let _ = require("lodash");
    let array = [1, 3, 3, 4, 5, 3, 2, 6, 2];
    _.pull(array, 3, 2);
    console.log(array);
//结果就是[1,4,5,6]

_.pullAll(array,values)

移除数组array中所有和给定值相等的元素，这个方法会改变原数组。这个元素必须是数组

参数
array:待检查的数组
[values] 要删除的值,必须是数组
返回值
(*):返回array
demo

 let _ = require("lodash");
    let array = [1, 3, 3, 4, 5, 3, 2, 6, 2];
    _.pullAll(array, [2, 3]);
    console.log(array);
//结果[1,4,5,6]

凡是后面有By都会有迭代器

_.pullAllBy(array,values,迭代器)

移除数组array中所有和给定值相等的元素，这个方法会改变原数组。迭代器会优先过滤下数组

参数
array:待检查的数组
[values] 要删除的值,必须是数组
迭代器:每一个数组里面的值都需要执行
返回值
(*):返回array
demo

    let _ = require("lodash");
    let array = [1.3, 3.2, 3.4, 4.4, 5.3, 3.2, 2.1, 6.7, 2.8];
    _.pullAllBy(array, [2, 3], Math.floor);
    console.log(array);
   //结果就是 [1.3, 4.4, 5.3, 6.7]

_.pullAt(array,[indexes])

根据索引indexes,移除array中对应的元素，并返回被移除元素的数组,这个方法会改变原数组

参数
array:待检查的数组
[indexes] 要移除元素的索引
返回值
(*):返回array
demo

    let _ = require("lodash");
    let array = [1.3, 3.2, 3.4, 4.4, 5.3, 3.2, 2.1, 6.7, 2.8];
    _.pullAt(array, 1);
    console.log(array);
 //结果就是[1.3,3.4, 4.4, 5.3, 3.2, 2.1, 6.7, 2.8];

_.remove(array,迭代器)

移除迭代器中返回是真的元素

参数
array:要修改的数组
迭代器:每次迭代调用的函数
返回值
(*):返回array
demo

  let _ = require("lodash");
    let result = _.remove([1, 2, 3, 4, 5, 6], function(item) {
      return item % 2 == 0 ? true : false;
    });
    console.log(result);

_.reverse(array)

反转array使得第一个元素变成最后一个元素,这个方法会改变原数组

参数
array:要修改的数组
返回值
(*):返回array
demo

  let _ = require("lodash");
    let array = [1, 2, 3, 4, 2, 5, 6];
    _.reverse(array);
    console.log(array);
 //结果[6,5,2,4,3,2,1]

_.slice(array,[start=0],[end=array.length])

裁剪数组array,从start位置开始到end结束(包前不包后) 不改变原数组

参数
array:要裁剪的数组
start=0:开始的位置
[end=array.length]:结束的位置
返回值
(*):返回array
demo

  let _ = require("lodash");
    let array = [1, 2, 3, 4, 2, 5, 6];
    let result = _.slice(array, 0, 4); 
    console.log(array);
    console.log(result);
 //结果[1,2,3,4]

_.uniq(array) 去重

创建一个去重后的array的数组副本，只有第一次出现的元素才能被保留,不会改变原数组

参数
array:要裁剪的数组
返回值
(*):返回array
demo

   let _ = require("lodash");
    let array = [1, 2, 3, 4, 2, 5, 6];
    let result = _.uniq(array);
    console.log(array);
    console.log(result);
//结果[1,2,3,4,5,6]

(一)Lodash数组篇
概念简述 lodash 是一个类库 Lodash 通过降低 array、number、objects、string...
Lodash使用避坑小结
Array篇 1. 使用 Lodash 的 remove 方法删除数组项后，视图不更新想从数组中按照某种筛选条件...
lodash简介
<<模块lodash的作用>> Lodash是一个内部封装了诸多对字符串、数组、对象等常见的数据类型的处理函数的一...
面试题目总结
手写深度比较，模拟lodash中的isEqual split和join split：字符串转数组 join：数组转...
lodash中常用的方法
lodash会拷贝一份新数组，不会对之前的数组进行影响数据的基础处理浅拷贝&&深拷贝数组的分割,将数组（ar...
VUE开发--Lodash组件(四十七)
一、Lodash简介 Lodash是一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，其中...
【ES6学习之对象函数】
函数 js函数库：lodash uniq uniqBy 数组处理函数： concat map() 对...
使用lodash或纯js把数组对象中相同的字段的值合并
1. lodash解决办法 1.1 数组内对象型数据 1.2 数组内数组内对象型数据注：无论samples是单纯...
lodash删除数组中的元素和对象数组中的元素
lodash删除数组中的元素和对象数组中的元素 1.删除普通数组中的元素 var fruits = ['Apple...
函数式编程（四）——函数组合
目录函数组合背景知识管道Lodash中的组合函数 —— flow()/flowRight()函数组合原理模拟函数...