随便写写lodash
随便写写吧，我这周的任务要学习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
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条，这时候用二维数组做循环非常的方便。
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的就是假值)。得到多组数组后放入一个数组中，然后再过滤掉一些无效数据。
res.value = _.compact(arr);
// [ 1, 2, 3, 3, { "name": "yft" }, [] ]concat就是拼接,可以和任何值拼接, 但是要注意和undefined啥的拼接时会变成null。
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个元素用的,参数可以是负数,就会从尾部开始取
res.value = _.nth(arr, 3); //3uniq比较简单,就是简单的去重, 只保留第一次出现的那个
console.log(_.uniq([1, 2, 2, 2, 3, 45, 4]));uniqBy对数组中的值调用迭代函数后,会产生同样的值的元素进行去重, 如果有对象, 就是根据对象的某个属性来去重的。
看第二个例子，我们将每个元素转换为绝对值后进行去重，-1和1的绝对值都是1，但是由于-1索引先于1，所以保留的是-1
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条数
res.value = _.take(arr, 5); // [ 1, 2, 3, 3, 0 ]join将 array 中的所有元素转换为由 separator 分隔的字符串。
res.value = _.join(arr, "~"); //1~2~3~3~0~~[object Object]~~false~~~Na
语言方法
isNaN检查 value 是否是 NaN ，注意: 这个方法基于Number.isNaN，和全局的isNaN 不同之处在于，全局的isNaN对 于 undefined 和其他非数字的值返回 true。
res.value = _.isNaN("6"); // false
res.value = _.isNaN(undefined); // falseisxxx判断类型
res.value = _.isString(""); // true用来判断这个元素是不是null或者undefined。
res.value = _.isNil(null); // true最后是isEmpty，我觉得主要就是用来判断请求的结果（数组或对象）是不是为空的时候会用到。
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更牛逼一点。。
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属性和值,这个也有第三个参数,表示开始搜索的索引位置
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就是排序,可以给数组中的对象根据属性进行排序, 也可以设置属性为数组,因为有时候 键是相同的,我们要根据后面的数值再一次进行排序,要根据多个属性排序的时候可以用
res.value = _.orderBy(scores, "score", "asc");
//[ { "score": 26 }, { "score": 55 }, { "score": 97 }, { "score": 100 } ]includes有三个参数，第一个参数是传入的数组, 第二个参数是要判断是否被包含的元素, 这两个都和js一样的,第三个参数是lodash才有的,表示下标,可以判断某个具体的位置是否包含这个元素、
res.value = _.includes(arr, 1); // truesome 检查collection（集合）中的元素是否存在 任意 truthy（真值）的元素,第一个参数是集合, 第二个参数可以是对象, 可以是数组["键", 值],也可以是单独的属性
res.value = _.some([null, 0, "1", false], Boolean); // truesize既可以计算出数组的长度也可以计算出对象中属性的个数。
res.value = _.size(scores); // 4groupBy分组方法，返回一个新对象。key 是 iteratee 遍历 collection(集合) 中的每个元素返回的结果,他会按照调用函数的返回结果来分组, 对象的值则是组成这个结果的数组
res.value = _.groupBy(scores, (i) => i.score > 50);
// { "true": [ { "score": 100 }, { "score": 55 }, { "score": 97 } ], "false": [ { "score": 26 } ] }对象方法
-------------------方便看------------------
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 取代。获取对象中的某个属性,适合: 对象.属性.属性....这样的情况,免去我们多次判断
res.value = _.get(obj, "info.name.score", "alternative"); // 'alternative'has检查 path 是否是object对象的直接属性。参数是要检查的路径,可以和get搭配使用, 先判断是否has,然后再用get获取
res.value = _.has(obj, "info.name"); // trueomit/pick根据属性组成新的对象, 第二个参数可以是字符串也可以是字符串格式的数组
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
res.value = _.mapKeys(scores, (value, key) => {
console.log(key);
return `${key}-score`;
});实用函数
调用 iteratee n 次，每次调用返回的结果存入到数组中。iteratee 调用入1个参数：(index)。
res.value = _.times(5, String); // [ "0", "1", "2", "3", "4" ]这是一个节流方法，防抖就是debounce，和这个一样用法的。
window.addEventListener(
'mousemove',
_.throttle(() => {
console.log(123);
}, 2000)
);字符串方法
转换字符串string为 kebab case，短线连接法。
res.value = _.kebabCase("---Hello __World--"); // hello-world将字符串根据分隔符分割，然后返回分割后的数组。
res.value = _.split("he-llo", "-"); // [ "he", "llo" ]Seq
chain就是让了lodash的方法可以用.来链式调用，但是最后一定要记得value()一下。
res.value = _.chain(scores)
.orderBy("score", "asc")
.find((i) => i.score > 50)
.value()就先写这些吧!