做建筑设计网站,linux做网站服务器,深圳网页技术开发公司,备案 网站 收录文章目录 一、数组1、chunk分组2、difference、differenceBy、differenceWith3、findIndex4、intersection、intersectionBy、intersectionWith5、union、unionBy、unionWith 二、对象1、pick、omit 2、get、set三、数学1、sum、sumBy2、range 四、工具函数1、isEqual、isEmpty… 文章目录 一、数组1、chunk分组2、difference、differenceBy、differenceWith3、findIndex4、intersection、intersectionBy、intersectionWith5、union、unionBy、unionWith 二、对象1、pick、omit 2、get、set三、数学1、sum、sumBy2、range 四、工具函数1、isEqual、isEmpty2、clone、cloneDeep3、debounce 防抖4、throttle 节流5、lodash对象 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 一、数组
1、chunk分组 _.chunk(array, [size1])size表示间隔 _.chunk([a, b, c, d, e], 2);
// [[a, b], [c, d], [e]]2、difference、differenceBy、differenceWith isEqual函数表示深度比较difference 代表基础数据类型的对比differenceBy 表示对值进行转化后对比differenceWith 表示两个数据整体的对比取差异集合 // 找不同
_.difference([3, 2, 1], [4, 2]);
// [3, 1]// array: 目标 values排除值iteratee调用每个元素后返回值再对比该返回值
// _.differenceBy(array, [values], [iteratee_.identity])
_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
// 等同于
_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], (value) Math.floor(value));
// [3.1, 1.3] // 2.2 2.5 调用后都是2所以被识别成同一个值var objects [{ x: 1, y: 2 }, { x: 2, y: 1 }];_.differenceWith(objects, [{ x: 1, y: 2 }], _.isEqual);
// [{ x: 2, y: 1 }]
_.differenceWith(objects, [{ x: 1, y: 2 }], (arrVal, othVal) arrVal.x othVal.x);
// [{ x: 1, y: 2 }]3、findIndex findIndex(array, [iteratee_.identity], [fromIndex0]), [] 中括号表示可选参数可传可不传但是不能跨可选也就是说连续两个可选参数想要使用第二个参数也必须使用第一个参数[predicate_.identity] (Array|Function|Object|string) 该参数可以有多种参数类型Function基本就是js中的findIndex实现也可以使用其他快捷方式由于一些用户的浏览器版本比较低当使用最新的ECMAScript新语法可能出现异常直接导致线上问题自己本地开发不一定有问题所以一些函数可以借用lodash库辅助实现即可当然也可以自己定义实现 var users [{ user: barney, active: false },{ user: fred, active: false },{ user: pebbles, active: true }
];_.findIndex(users, function(o) { return o.user barney; }); // Function
// 0
_.findIndex(users, { user: fred, }) // Object
// 14、intersection、intersectionBy、intersectionWith 类似于difference只不过函数结果是取交集 _.intersection([2, 1], [4, 2], [1, 2]); // 基础数据类型
// [2]
_.intersectionBy([2.1, 1.2], [4.3, 2.4], Math.floor); // 值进行转化
// [2.1]
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 }]5、union、unionBy、unionWith 取合集注意有去重效果 _.union([2], [1, 2]);
// [2, 1]
// 另外两种就不一一举例了跟交集、差集类似二、对象
1、pick、omit pick挑选部分属性omit排除部分属性 // _.pick(object, [props])
var object { a: 1, b: 2, c: 3 };_.pick(object, [a, c]);
// { a: 1, c: 3 }
_.omit(object, [a, c]);
// { b: 2 }2、get、set _.get(object, path, [defaultValue]); 注意path表示动态的路径_.set(object, path, value); 设置值 var object { a: [{ b: { c: 3 } }] };_.get(object, a[0].b.c);
// 3_.set(object, a[0].b.c, 5);
console.log(object.a[0].b.c);
// 5三、数学
1、sum、sumBy 快速计算总数 _.sum([4, 2, 8, 6]);
// 20var objects [{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }];_.sumBy(objects, function(o) { return o.n; }); // 函数更加灵活
// 202、range _.range([start0], end, [step1]) // 包含起始点不包含终止点跟Array.slice有些类似可以快速创建范围数的集合
_.range(1, 5, 1);
// [1, 2, 3, 4]四、工具函数
1、isEqual、isEmpty isEqual数据深度比较是否全等返回booleanisEmpty返回是否是空对象 var object { a: 1 };
var other { a: 1 };_.isEqual(object, other);
// true_.isEmpty({})
// true
2、clone、cloneDeep clone表示浅拷贝一般被解构赋值代替cloneDeep表示深拷贝注意如果数据量大有性能问题一般使用JSON性能比较高JSON.parse(JSON.stringify([{}]))当然JSON存在function、undefined无法转化的问题 var objects [{ a: 1 }, { b: 2 }];var deep _.cloneDeep(objects);
console.log(deep[0] objects[0]);
// false3、debounce 防抖 _.debounce(func, [wait0], [options])options.leading 表示是否延迟开始前调用默认false options.maxWait 表示fun被推迟的最大值options.maxWait 表示是否延迟开始后调用默认true function click(params) {console.log(click)
}
document.body.addEventListener(click, _.debounce(click, 300))4、throttle 节流 _.throttle(func, [wait0], [options])options.leading 表示是否延迟开始前调用默认trueoptions.maxWait 表示是否延迟开始后调用默认false document.body.addEventListener(click, _.throttle(() console.log(click), 1000))5、lodash对象 lodash对象可以链式调用 _([1, 2, 3]).map(item item * item).reduce(_.add)
