lodash常用

1) Loop for N times

// 1. Basic for loop.
for(var i = 0; i < 5; i++) {
    // ....
}

// 2. Using Array‘s join and split methods
Array.apply(null, Array(5)).forEach(function(){
    // ...
});

// Lodash
_.times(5, function(){
    // ...
});

2) Loop through a collection and return a deeply-nested property from each item

// Fetch the name of the first pet from each owner
var ownerArr = [{
    "owner": "Colin",
    "pets": [{"name":"dog1"}, {"name": "dog2"}]
}, {
    "owner": "John",
    "pets": [{"name":"dog3"}, {"name": "dog4"}]
}];

// Array‘s map method.
ownerArr.map(function(owner){
   return owner.pets[0].name;
});

// Lodash
_.map(ownerArr, ‘pets[0].name‘);

3) Create an array of N size and populate them with unique values of the same prefix

// Create an array of length 6 and populate them with unique values. The value must be prefix with "ball_".
// eg. [ball_0, ball_1, ball_2, ball_3, ball_4, ball_5]

// Array‘s map method.
Array.apply(null, Array(6)).map(function(item, index){
    return "ball_" + index;
});

// Lodash
_.times(6, _.uniqueId.bind(null, ‘ball_‘));

4) Deep-cloning Javascript object

var objA = {
    "name": "colin"
}

// Normal method? Too long. See Stackoverflow for solution: http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript

// Lodash
var objB = _.cloneDeep(objA);
objB === objA // false

5) Get Random Number between a range

// Get a random number between 15 and 20.

// Naive utility method
function getRandomNumber(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomNumber(15, 20);

// Lodash
_.random(15, 20);

6) Extending object

// Adding extend function to Object.prototype
Object.prototype.extend = function(obj) {
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            this[i] = obj[i];
        }
    }
};

var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};

objA.extend(objB);
objA; // {"name": "james", "age": 17, "car": "suzuki"};

// Lodash
_.assign(objA, objB);

Extending multiple objects

var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};
var objC = {"pet": "dog"};

// Lodash
_.assign(objA, objB, objC)
// {"name": "james", "car": "suzuki", "age": 17, "pet": "dog"}

7) Removing properties from object

// Naive method: Remove an array of keys from object
Object.prototype.remove = function(arr) {
    var that = this;
    arr.forEach(function(key){
        delete(that[key]);
    });
};

var objA = {"name": "colin", "car": "suzuki", "age": 17};

objA.remove([‘car‘, ‘age‘]);
objA; // {"name": "colin"}

// Lodash objA = _.omit(objA, [‘car‘, ‘age‘]); // {"name": "colin"}

More use-cases

var objA = {"name": "colin", "car": "suzuki", "age": 17};

// Lodash
objA = _.omit(objA, ‘car‘); // {"name": "colin", "age": 17};
objA = _.omit(objA, _.isNumber); // {"name": "colin"};

8) Select properties from another object to form new object

// Naive method: Returning a new object with selected properties
Object.prototype.pick = function(arr) {
    var _this = this;
    var obj = {};
    arr.forEach(function(key){
        obj[key] = _this[key];
    });

    return obj;
};

var objA = {"name": "colin", "car": "suzuki", "age": 17};

var objB = objA.pick([‘car‘, ‘age‘]);
// {"car": "suzuki", "age": 17}

// Lodash
var objB = _.pick(objA, [‘car‘, ‘age‘]);
// {"car": "suzuki", "age": 17}

9) Selecting a random item from a list

var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];

function pickRandomPerson(luckyDraw){
    var index = Math.floor(Math.random() * (luckyDraw.length));
    return luckyDraw[index];
}

pickRandomPerson(luckyDraw); // John

// Lodash
_.sample(luckyDraw); // Colin

10) Error handling for JSON.parse

// Using try-catch to handle the JSON.parse error
function parse(str){
    try {
        return JSON.parse(str);
    }

    catch(e) {
        return false;
    }
}

// With Lodash
function parseLodash(str){
    return _.attempt(JSON.parse.bind(null, str));
}

parse(‘a‘); // false
parseLodash(‘a‘); // Return an error object

parse(‘{"name": "colin"}‘); // Return {"name": "colin"}
parseLodash(‘{"name": "colin"}‘); // Return {"name": "colin"}

转载至: https://colintoh.com/blog/lodash-10-javascript-utility-functions-stop-rewriting#2)_loop_through_a_collection_and_return_a_deeply-nested_property_from_each_item

时间: 2024-10-11 22:27:25

lodash常用的相关文章

Lodash,npm包仓库中依赖最多的库

简介 lodash,是具有一致接口.模块化.高性能等特性的 JavaScript 工具库.提供了大量的工具函数,也正是因为这个原因,使得lodash成为了npm包库中被其它库依赖最多的库. 就像jQuery在全部函数前加全局的$一样,lodash使用全局的_来提供对工具的快速访问. var _ = require('lodash'); 提高开发者效率 //copy一个JS对象 //原生方法 var a = {a:1,b:2,c:3}; var b = {}; for(var key in a)

前端JavaScript规范

JavaScript规范 目录 类型 对象 数组 字符串 函数 属性 变量 条件表达式和等号 块 注释 空白 逗号 分号 类型转换 命名约定 存取器 构造器 事件 模块 jQuery ES5 兼容性 HTML.CSS.JavaScript分离 使用jsHint 前端工具 类型 原始值: 相当于传值(JavaScript对象都提供了字面量),使用字面量创建对象. string number boolean null undefined var foo = 1, bar = foo; bar = 9

lodash

什么是lodash? lodash是一个javascript库,也是Node JS的常用模块,可以用 npm install -g lodash 命令安装. lodash可以用来做什么? 软件产品大都是根据广泛的需求应运而生的,很少有东西先做出来,然后再看看它可以应用到哪些地方.原生的javascript在功能实现上面更原子化,很多常用功能没有形成模块.lodash做了这些事情.比如,合并数组: _.union([1,2,3],[2,3,4]); //result: [1,2,3,4] JQue

Node填坑教程——常用库

作为函数式编程来说,流程控制和函数库是必不可少的(应该吧). 下面我们介绍两个常用的库. lodash:完整的api请参阅,https://lodash.com/docs.这里我们只演示几个简单的例子. 安装 E:\project\heron-lesson\demo4>npm install lodash --save 1 var data1 = [1, 2, 3, 4, 5]; 2 var data2 = [ 3 {'user': 'barney', 'age': 36, 'active':

lodash 常用方法汇总

1.代码 import _ from 'lodash' const wenger = { // 数组常用函数 /** * drop:裁剪数组中的前 N 个元素,返回剩余的部分. * @param (array, [n=1]) n表示裁剪个数 * @return Array返回数组的剩余的部分. * 示例:wenger.drop([1, 2, 3], 2) == [3] */ drop: _.drop, /** * first:获得数组的首个元素. * @param (array) * @retu

postman tests实例记录(还没看,一些常用的)

这段时间准备测试api接口,postman这个工具很是方便,特别是里面的tests的javascript脚本. 记录一下测试接口常用的tests验证的实例. 1.设置环境变量 postman.setEnvironmentVariable("key", "value"); 2.将嵌套独享设置为环境变量var array = [1, 2, 3, 4];postman.setEnvironmentVariable("array", JSON.strin

lodash源码分析之去重--uniq方法

lodash.js包是node开发中常用的js工具包,里面有许多实用的方法,今天分析常用的一个去重方法---uniq 用法 _.uniq([2, 1, 2]) // => [2, 1] 源码包 // uniq.js import baseUniq from './.internal/baseUniq.js' function uniq(array) { return (array != null && array.length) ? baseUniq(array) : [] } ex

VSCode 常用插件

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化.软件跨平台支持 Win.Mac 以及 Linux. VSC中文网:http://www.vscode.org/ vscode  作为一款逐渐火热的编辑器.它的特点免费.开源.多平台,以及集成git,代码调试,插件

lodash入门,使用 。throttle和debounce

简介 Lodash是一个著名的javascript原生库,不需要引入其他第三方依赖.是一个意在提高开发者效率,提高JS原生方法性能的JS库.简单的说就是,很多方法lodash已经帮你写好了,直接调用就行,不用自己费尽心思去写了,而且可以统一方法的一致性.Lodash使用了一个简单的 _ 符号,就像Jquery的 $ 一样,十分简洁. 类似的还有Underscore.js和Lazy.js Lodash 中文文档 https://www.html.cn/doc/lodash/ 支持 chrome 4