Lodash中常用函数,不建议经常使用,容易让人变懒忘了原生函数
1、N次循环
<script type="text/javascript">
console.log('------- javascript -------');
//js原生的循环方法
for(var i = 0; i < 5; i++){
console.log(i);
}
console.log('------- lodash -------');
//ladash的times方法
_.times(5,function(a){
console.log(a);
});
</script>
for语句是执行循环的不二选择,但在上面代码的使用场景下,_.times()的解决方式更加简洁和易于理解。
2、深层查找属性值
<script type="text/javascript">
var ownerArr = [{
"owner": "Colin",
"pets": [{"name": "dog1"}, {"name": "dog2"}]
}, {
"owner": "John",
"pets": [{"name": "dog3"}, {"name": "dog4"}]
}];
var jsMap = ownerArr.map(function (owner) {
return owner.pets[0].name;
});
console.log('------- jsMap -------');
console.log(jsMap); var lodashMap = _.map(ownerArr, 'pets[0].name');
console.log('------- lodashMap -------');
console.log(lodashMap);
</script>
Lodash中的_.map方法和JavaScript中原生的数组方法非常的像,但它还是有非常有用的升级。 你可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性。
3、深克隆对象
<script type="text/javascript">
var objA = {
"name": "戈德斯文"
};
var objB = _.cloneDeep(objA);
console.log(objA);
console.log(objB);
console.log(objA === objB);
</script>
JSON.parse(JSON.stringify(objectToClone)) 进行深度克隆。但是,这种方案仅在对象内部没有方法的时候才可行4、在指定范围内获取一个随机值
<script type="text/javascript">
function getRandomNumber(min, max){
return Math.floor(Math.random() * (max - min)) + min;
}
console.log(getRandomNumber(15, 20)); console.log(_.random(15, 20)); </script>
Lodash中的 _.random 方法要比上面的原生方法更强大与灵活。你可以只传入一个参数作为最大值, 你也可以指定返回的结果为浮点数_.random(15,20,true)
5、扩展对象
<script type="text/javascript">
Object.prototype.extend = function(obj) {
for (var i in obj) {
if (obj.hasOwnProperty(i)) { //判断被扩展的对象有没有某个属性,
this[i] = obj[i];
}
}
}; var objA = {"name": "戈德斯文", "car": "宝马"};
var objB = {"name": "柴硕", "loveEat": true}; objA.extend(objB);
console.log(objA); console.log(_.assign(objA, objB));
</script>
_.assign 方法也可以接收多个参数对象进行扩展,都是往后面的对象上合并
6、从列表中随机的选择列表项
<script type="text/javascript">
var smartTeam = ["戈德斯文", "杨海月", "柴硕", "师贝贝"]; function randomSmarter(smartTeam){
var index = Math.floor(Math.random() * smartTeam.length);
return smartTeam[index];
} console.log(randomSmarter(smartTeam)); // Lodash
console.log(_.sample(smartTeam));
console.log(_.sampleSize(smartTeam,2));
</script>
此外,你也可以指定随机返回元素的个数_.sampleSize(smartTeam,n),n为需要返回的元素个数
7、判断对象中是否含有某元素
<script type="text/javascript">
var smartPerson = {
'name': '戈德斯文',
'gender': 'male'
},
smartTeam = ["戈德斯文", "杨海月", "柴硕", "师贝贝"]; console.log(_.includes(smartPerson, '戈德斯文'));
console.log(_.includes(smartTeam, '杨海月'));
console.log(_.includes(smartTeam, '杨海月',2));
</script>
_.includes()第一个参数是需要查询的对象,第二个参数是需要查询的元素,第三个参数是开始查询的下标
8、遍历循环
<script type="text/javascript">
_([1, 2]).forEach(function(value) {
console.log(value);
});
_.forEach([1, 3] , function(value, key) {
console.log(key,value);
});
</script>
这两种方法都会分别输出‘1’和‘2’,不仅是数组,对象也可以,数组的是后key是元素的下标,当传入的是对象的时候,key是属性,value是值
9、遍历循环执行某个方法
<script type="text/javascript">
function square(n) {
return n * n;
} console.log(_.map([4, 8], square));
// => [16, 64] console.log(_.map({ 'a': 4, 'b': 8 }, square));
// => [16, 64] (iteration order is not guaranteed) var users = [
{ 'user': 'barney' },
{ 'user': 'fred' }
]; // The `_.property` iteratee shorthand.
console.log(_.map(users, 'user'));
// => ['barney', 'fred']
</script>
10、检验值是否为空
<script type="text/javascript">
_.isEmpty(null);
// => true _.isEmpty(true);
// => true _.isEmpty(1);
// => true _.isEmpty([1, 2, 3]);
// => false _.isEmpty({ 'a': 1 });
// => false
</script>
12、数组去重
<script type="text/javascript">
var arr1 = [2, 1, 2]; var arr2 = _.uniq(arr1); function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
return newArr;
} console.log(arr1);
console.log(arr2);
console.log(unique(arr1));
</script>
13、根据下标选择元素,分到两个数组
var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3); console.log(array);
// => [5, 15] console.log(evens);
// => [10, 20]
14、返回从结尾元素开始n个元素的数组切片
// 倒数解构
const [beforeLast, last] = lodash.takeRight([1, 2, 3, 4], 2)
console.log(beforeLast, last) // 3 4
14、zipObject
lodash.zipObject(['a', 'b'], [1, 2]);
// => { 'a': 1, 'b': 2 }
15、zipObjectDeep
lodash.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);
// => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }
16、xor( 创建一个给定数组唯一值的数组 )
_.xor([2, 1], [2, 3]);
// => [1, 3]
Lodash中常用函数,不建议经常使用,容易让人变懒忘了原生函数的更多相关文章
- lodash 中常用的方法
odash是js集Array/Object/String/Function的Util于一身. lodash打包了Array/Object/String/Function里一些Api,好处是连ES6的也 ...
- PHP5中常用的魔术函数有哪些,举例说明各自的用法。
所谓魔术函数,是指不同时刻为了完成特定的功能,而自动调用的方法. __sleep 在serialize()序列化对象之前会调用这个函数__wakeup 在unserialize()解 ...
- string中常用的函数
string中常用的函数 发现在string在处理这符串是很好用,就找了一篇文章放在这里了.. 用 string来代替char * 数组,使用sort排序算法来排序,用unique 函数来去重1.De ...
- 工作中常用的QTP操作Excel函数
前言 本文只是对工作中常用的EOM相关函数的整理,并不是要写个大而全的操作手册,如果想对EOM有更多的了解可以参考QTP的帮助文档或查看QTP安装目录\CodeSamplesPlus\UsingExc ...
- 5. openCV中常用函数学习
一.前言 经过两个星期的努力,一边学习,一边写代码,初步完成了毕业论文系统的界面和一些基本功能,主要包括:1 数据的读写和显示,及相关的基本操作(放大.缩小和移动):2 样本数据的选择:3 数据归一化 ...
- Python常用模块中常用内置函数的具体介绍
Python作为计算机语言中常用的语言,它具有十分强大的功能,但是你知道Python常用模块I的内置模块中常用内置函数都包括哪些具体的函数吗?以下的文章就是对Python常用模块I的内置模块的常用内置 ...
- jQuery中常用的函数方法
jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...
- SQL点滴30—SQL中常用的函数
原文:SQL点滴30-SQL中常用的函数 该文章转载自http://www.cnblogs.com/jiajiayuan/archive/2011/06/16/2082488.html 别人的总结,很 ...
- Mysql中常用的函数汇总
Mysql中常用的函数汇总: 一.数学函数abs(x) 返回x的绝对值bin(x) 返回x的二进制(oct返回八进制,hex返回十六进制)ceiling(x) 返回大于x的最小整数值exp(x) 返回 ...
- php中常用的字符串查找函数strstr()、strpos()实例解释
string strstr ( string $haystack , mixed $needle [, bool $before_needle = false ] ) 1.$haystack被查找的字 ...
随机推荐
- iframe 嵌套别的系统不显示,父窗口不响应
显示不全,没有登录界面,检查了代码渲染了,只是display:none :换了网址 ,别的都可以,只有这个不行 搜索 复制
- 随机生成不重复的几个数(Unity)
using System.Collections.Generic; using UnityEngine; /// <summary> /// 随机数管理类 /// </summary ...
- 【JSON】Python读取JSON文件报错json.decoder.JSONDecodeError的问题
报错 json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes: line * column * ...
- UI自动化之【maven+selenium环境搭建】
一.下载maven包 官网: http://maven.apache.org/download.cgi 二.配置maven环境变量 配置完之后验证一下:(若出现以下信息可看到maven的版本号就表示 ...
- 修改mysql root密码,在workbench中导入.sql文件
修改mysql root密码: 1.如果没有配置环境变量,在 \Program Files\MySQL\MySQL Server 8.0\bin 文件下 Shit+右键打开 Powershell 窗口 ...
- vue导出文件
/**导出 */ async toExcel() { // let result = await this.axios({ // method: 'get', // url: `issdc-manag ...
- .netCore Nuget包引用记录
1.画图 System.Drawing.Common 2.
- node.js 数据模拟
Node: js在服务端的一个运行环境 node框架:express koa egg (本文采用express) express: 是基于node的一个web框架 restful api:是目前流 ...
- weblogic修改jdk版本方法
首先,得知道JDk 的安装目录: /usr/local/ 第一种方法:weblogic控制台直接指定JDK 版本: 第二种方法:修改weblogic中默认的JDK版本: weblogic/Oracle ...
- [Leetcode 111]二叉树的最短深度 BFS/DFS
题目 给定二叉树,求最短路径包含的节点个数 https://leetcode.com/problems/minimum-depth-of-binary-tree/ Given a binary tre ...