随便写写lodash

2024-01-29 17:04:58 浏览数 (3)

随便写写吧,我这周的任务要学习lodash,所以在这里随意记录一下公司常用的lodash方法。

数组: chunk compact concat nth take uniqBy (first last) join

语言: cloneDeep (isNaN isString isEmpty isNil)判断类型

集合:(filter reject) map reduce orderBy includes find groupBy

some size

对象: get has (pick omit) mapKeys result

函数:( debounce throttle)

实用函数: stubTrue identity times

字符串: kebabCase split

代码语言:javascript复制
const arr = [1,2,3,3,0,"",{ name: "yft" },[],false,null,
undefined,NaN,];
const obj = {
  info: {
    name: "y",
    grade: {
      Engish: "100",
    },
    gender: "female",
  },
};
const obj1 = { a: 1, b: 1, c: 3 };
const scores = {
  a: { score: 100 },
  b: { score: 26 },
  c: { score: 55 },
  d: { score: 97 },
};

数组方法

chunk的作用其实就是将一个数组转换为一个二维数组,按照你想要的数量分割。常见的场景就是轮播图,当你一共有8条数据,但是你一页只要展示4条,这时候用二维数组做循环非常的方便。

代码语言:javascript复制
const res = ref("");
res.value = _.chunk(arr, 4);
// [ [ 1, 2, 3, 3 ], [ 0, "", { "name": "yft" }, [] ],
// [ false, null, null, null ] ]

compact就是返回一个不包含假值的元素的数组。其中假值包括false, null,0, "", undefined, 和 NaN 。(我个人认为就是!!XXX为false的就是假值)。得到多组数组后放入一个数组中,然后再过滤掉一些无效数据。

代码语言:javascript复制
res.value = _.compact(arr);
// [ 1, 2, 3, 3, { "name": "yft" }, [] ]

concat就是拼接,可以和任何值拼接, 但是要注意和undefined啥的拼接时会变成null。

代码语言:javascript复制
res.value = _.concat(arr, [{ name: "y" }], ["0"]);
// [ 1, 2, 3, 3, 0, "", { "name": "yft" }, [], false, null, null, null, { "name": "y" }, "0" ]
res.value = _.concat([undefined], [123]); // [ null, 123 ]

这个就是取数组中的第n个元素用的,参数可以是负数,就会从尾部开始取

代码语言:javascript复制
res.value = _.nth(arr, 3); //3

uniq比较简单,就是简单的去重, 只保留第一次出现的那个

代码语言:javascript复制
console.log(_.uniq([1, 2, 2, 2, 3, 45, 4]));

uniqBy对数组中的值调用迭代函数后,会产生同样的值的元素进行去重, 如果有对象, 就是根据对象的某个属性来去重的。

看第二个例子,我们将每个元素转换为绝对值后进行去重,-1和1的绝对值都是1,但是由于-1索引先于1,所以保留的是-1

代码语言:javascript复制
const a1 = [
  { username: "yft" },
  { username: "yft" },
  { username: "ddd" },
  { username: "eee" },
];
console.log(_.uniqBy(a1, "username"));
//[ { username: 'yft' }, { username: 'ddd' }, { username: 'eee' } ]

console.log(_.uniqBy([-1, 1, 2, -2, 3, 4, 5], (i) => Math.abs(i)));
// [ -1, 2, 3, 4, 5 ]

take就是切片,返回 array 数组的切片(从起始元素开始n个元素)。可使用负数 取得datasource, 只要pageSize*当前page条数

代码语言:javascript复制
res.value = _.take(arr, 5); // [ 1, 2, 3, 3, 0 ]

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

代码语言:javascript复制
res.value = _.join(arr, "~"); //1~2~3~3~0~~[object Object]~~false~~~Na

语言方法

isNaN检查 value 是否是 NaN ,注意: 这个方法基于Number.isNaN,和全局的isNaN 不同之处在于,全局的isNaN对 于 undefined 和其他非数字的值返回 true

代码语言:javascript复制
res.value = _.isNaN("6"); // false
res.value = _.isNaN(undefined); // false

isxxx判断类型

代码语言:javascript复制
res.value = _.isString(""); // true

用来判断这个元素是不是null或者undefined。

代码语言:javascript复制
res.value = _.isNil(null); // true

最后是isEmpty,我觉得主要就是用来判断请求的结果(数组或对象)是不是为空的时候会用到。

代码语言:javascript复制
res.value = _.isEmpty(undefined); // true
res.value = _.isEmpty(null); // true
res.value = _.isEmpty(""); // true
res.value = _.isEmpty(1); // true
res.value = _.isEmpty("1"); // false
res.value = _.isEmpty(true); // true
res.value = _.isEmpty([]); // true length为0
res.value = _.isEmpty([1]); // false
res.value = _.isEmpty({}); // true 没有可枚举的字符串键属性
// res.value = _.isEmpty({a: '111'}) // false
// res.value = _.isEmpty(NaN) // true
res.value = _.isEmpty(["1"]); // false

集合方法

用于集合的方法,不过感觉比原生JS更牛逼一点。。

代码语言:javascript复制
res.value = _.filter(arr, (i) => i > 1); // [ 2, 3, 3 ]
res.value = _.map(arr, (i) => i - 1);
// [ 0, 1, 2, 2, -1, -1, null, -1, -1, -1, null, null ]
res.value = _.reduce(
  obj1,
  (result, value, key) => {
    (result[value] || (result[value] = [])).push(key);
    return result;
  },
  {}
); //{ "1": [ "a", "b" ], "3": [ "c" ] }

find返回第一个返回真值的元素 可以查找一个数组里面有没有xx属性和值,这个也有第三个参数,表示开始搜索的索引位置

代码语言:javascript复制
let obj = [
  { vote: 999, name: true },
  { vote: 333, name: true },
  { vote: 777, name: false },
  { vote: 555, name: false },
  { vote: 444, name: false },
];
console.log(_.find(obj, { vote: 999 }, 0));
// [ { vote: 999, name: true }, { vote: 777, name: false } ]

orderBy就是排序,可以给数组中的对象根据属性进行排序, 也可以设置属性为数组,因为有时候 键是相同的,我们要根据后面的数值再一次进行排序,要根据多个属性排序的时候可以用

代码语言:javascript复制
res.value = _.orderBy(scores, "score", "asc");
//[ { "score": 26 }, { "score": 55 }, { "score": 97 }, { "score": 100 } ]

includes有三个参数,第一个参数是传入的数组, 第二个参数是要判断是否被包含的元素, 这两个都和js一样的,第三个参数是lodash才有的,表示下标,可以判断某个具体的位置是否包含这个元素、

代码语言:javascript复制
res.value = _.includes(arr, 1); // true

some 检查collection(集合)中的元素是否存在 任意 truthy(真值)的元素,第一个参数是集合, 第二个参数可以是对象, 可以是数组["键", 值],也可以是单独的属性

代码语言:javascript复制
res.value = _.some([null, 0, "1", false], Boolean); // true

size既可以计算出数组的长度也可以计算出对象中属性的个数。

代码语言:javascript复制
res.value = _.size(scores); // 4

groupBy分组方法,返回一个新对象。key 是 iteratee 遍历 collection(集合) 中的每个元素返回的结果,他会按照调用函数的返回结果来分组, 对象的值则是组成这个结果的数组

代码语言:javascript复制
res.value = _.groupBy(scores, (i) => i.score > 50);
// { "true": [ { "score": 100 }, { "score": 55 }, { "score": 97 } ], "false": [ { "score": 26 } ] }

对象方法

代码语言:javascript复制
-------------------方便看------------------
const arr = [1,2,3,3,0,"",{ name: "yft" },[],false,null,
undefined,NaN,];
const obj = {
  info: {
    name: "y",
    grade: {
      Engish: "100",
    },
    gender: "female",
  },
};
const obj1 = { a: 1, b: 1, c: 3 };
-------------------方便看------------------

get根据 object对象的path路径获取值。如果解析 value 是 undefined 会以 defaultValue 取代。获取对象中的某个属性,适合: 对象.属性.属性....这样的情况,免去我们多次判断

代码语言:javascript复制
res.value = _.get(obj, "info.name.score", "alternative"); // 'alternative'

has检查 path 是否是object对象的直接属性。参数是要检查的路径,可以和get搭配使用, 先判断是否has,然后再用get获取

代码语言:javascript复制
res.value = _.has(obj, "info.name"); // true

omit/pick根据属性组成新的对象, 第二个参数可以是字符串也可以是字符串格式的数组

代码语言:javascript复制
var object = { a: 1, b: "2", c: 3 };
res.value = _.omitBy(object, _.isString); // { "a": 1, "c": 3 }
res.value = _.pickBy(object, _.isString); // { "b": "2" }
res.value = _.omit(obj, "info.name");
// { "info": { "grade": { "Engish": "100" }, "gender": "female" } }
res.value = _.pick(obj, ["info.name", "info.gender"]);
// { "info": { "name": "y", "gender": "female" } }

mapKeys这个简单来说就是元素的值不变,对key进行一些操作,对应的是mapValues

代码语言:javascript复制
res.value = _.mapKeys(scores, (value, key) => {
  console.log(key);
  return `${key}-score`;
});

实用函数

调用 iteratee n 次,每次调用返回的结果存入到数组中。iteratee 调用入1个参数:(index)。

代码语言:javascript复制
res.value = _.times(5, String); // [ "0", "1", "2", "3", "4" ]

这是一个节流方法,防抖就是debounce,和这个一样用法的。

代码语言:javascript复制
window.addEventListener(
   'mousemove',
   _.throttle(() => {
     console.log(123);
   }, 2000)
 );

字符串方法

转换字符串string为 kebab case,短线连接法。

代码语言:javascript复制
res.value = _.kebabCase("---Hello __World--"); // hello-world

将字符串根据分隔符分割,然后返回分割后的数组。

代码语言:javascript复制
res.value = _.split("he-llo", "-"); // [ "he", "llo" ]

Seq

chain就是让了lodash的方法可以用.来链式调用,但是最后一定要记得value()一下。

代码语言:javascript复制
res.value = _.chain(scores)
  .orderBy("score", "asc")
  .find((i) => i.score > 50)
  .value()

就先写这些吧!

1 人点赞