【javascript】学习Lodash:让你的JS代码更具优雅和易读性

学习Lodash:让你的JS代码更具优雅和易读性

    • 一、前言:
    • 二、入门Lodash
    • 三、Lodash中常用的API
      • 1. 数组相关API
        • _.chunk(array, [size=1])
        • _.compact(array)
        • _.concat(array, [values])
        • _.drop(array, [n=1])
        • _.dropRight(array, [n=1])
        • _.fill(array, value, [start=0], [end=array.length])
        • _.pull(array, [values])
        • _.pullAll(array, [values])
        • _.pullAt(array, [indexes])
        • _.indexOf(array, value, [fromIndex=0])
        • _.lastIndexOf(array, value, [fromIndex=array.length-1])
        • _.reverse(array)
      • 2. 对象相关API
        • _.assign(object, [sources])
        • _.omit(object, [props])
        • _.pick(object, [props])
        • _.isEqual(value, other)
        • _.merge(object, [sources])
        • _.omitBy(object, [predicate=_.identity])
        • _.pickBy(object, [predicate=_.identity])
      • 3. 字符串相关API
        • _.kebabCase
        • _.camelCase
        • _.snakeCase
        • _.startsWith
        • _.endsWith
        • _.repeat
    • 四、总结

一、前言:

随着JavaScript语言的不断发展,越来越多的开发人员依赖它的强大特性和适应性来构建现代Web应用程序和网站。但是,随着代码库变得越来越大和复杂,我们可能会遇到一些处理不同数据结构的问题。这时,我们可以使用 Lodash 工具包来让我们的JS代码更加优雅和易于阅读。

Lodash 是一个很流行的JavaScript实用工具库,提供了很多有用的函数方法来简化我们的日常任务。Lodash提供了很多高效实用的函数,如lodash.map, lodash.filterlodash.groupBy等,可以我们简单地对数组,对象,字符串等常用数据类型进行操作。

如果你还没用过Lodash,那么本文将带领你入门Lodash的一些核心概念,并展示如何使用Lodash来书写清晰、简洁的JS代码。

二、入门Lodash

Lodash可以轻松地通过npm引入并使用。如果您还没有安装Lodash,可以通过在控制台输入以下命令来完成安装:

npm install --save lodash

安装完成之后,你可以通过在JavaScript文件中使用ES6 "import"语句来引入Lodash:

import _ from 'lodash';

当然,你也可以选择直接在HTML文件的"script"标签中包含Lodash:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js">script>

了解如何引入Lodash之后,让我们通过一些示例来对Lodash进行更深入的了解。

三、Lodash中常用的API

因为lodash官方文档给出了很多的操作数据结构的方法,但是并不是每个方法都很实用,有的方法应用场景很少也很鸡肋,我这一篇文章也不可能将每一个方法都讲解到,所以我会着重挑选其中最实用,应用场景广的方法来介绍Lodash中常用的API

1. 数组相关API

在Lodash中,数组是最常用的数据类型之一,下面是常用的API:

_.chunk(array, [size=1])

该函数将一个数组按照指定大小分割成多个数组块,并返回这些块组成的新数组

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let chunks = _.chunk(array, 3);
console.log(chunks);
// 输出结果:
// [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]

_.compact(array)

该函数用于移除数组中的所有假值元素,返回过滤掉假值的新数组falsenull0""undefinedNaN)。

let array = ['foo', false, 0, undefined, NaN, '', 246];
let compacted = _.compact(array);
console.log(compacted);
// 输出结果:
// [ "foo", 246 ]

_.concat(array, [values])

该函数用于创建一个新数组,将array与任何数组或值连接在一起,返回连接后的新数组,这一点和原生JS concat 方法类似,这里也简单的讲解一下:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = [7, 8, 9];
let concatenated = _.concat(array1, array2, array3);
console.log(concatenated);
// 输出结果:
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

_.drop(array, [n=1])

该函数用于移除arrayn个元素,并返回剩余元素组成的新数组

let array = [1, 2, 3, 4, 5, 6];
let dropped = _.drop(array, 3);
console.log(dropped);
// 输出结果:
// [4, 5, 6]

_.dropRight(array, [n=1])

该函数用于移除一个数组的n个元素,并返回剩余元素组成的新数组

let array = [1, 2, 3, 4, 5, 6];
let dropped = _.dropRight(array, 2);
console.log(dropped);
// 输出结果:
// [1, 2, 3, 4]

_.fill(array, value, [start=0], [end=array.length])

该函数用于使用 value 值来填充(替换) array,从start位置开始, 到end位置结束(但不包含end位置)。

let array = [1, 2, 3, 4, 5];
_.fill(array, 'a', 1, 3);
console.log(array);
// 输出结果:
// [1, 'a', 'a', 4, 5]

_.pull(array, [values])

该函数用于移除数组array中所有和给定值相等的元素:

let array = [1, 2, 3, 1, 2, 3];
const result = _.pull(array, 2, 3);
console.log(result); 
// 输出结果:
// [1, 1]

_.pullAll(array, [values])

这个方法类似_.pull,区别是这个方法接收一个要移除值的数组。

var array = [1, 2, 3, 1, 2, 3];
const result = _.pullAll(array, [2, 3]);
console.log(result); // 控制台打印结果:[1, 1]

_.pullAt(array, [indexes])

该函数用于根据索引 indexes,移除array中对应的元素,并返回被移除元素的数组。

var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);
 
console.log(array);
// => [5, 15]
 
console.log(evens);
// => [10, 20]

_.indexOf(array, value, [fromIndex=0])

该函数用于在一个数组中从头部开始查找指定值的位置。

let array = [1, 2, 3, 4, 5];
console.log(_.indexOf(array, 3));
// 输出结果:
// 2

_.lastIndexOf(array, value, [fromIndex=array.length-1])

该函数用于在一个数组中从尾部开始查找指定值的位置。

let array = [1, 2, 3, 4, 5, 3];
console.log(_.lastIndexOf(array, 3));
// 输出结果:
// 5

_.reverse(array)

该函数用于将一个数组中的元素倒序排列,并返回倒序后的数组。

let array = [1, 2, 3, 4, 5];
let reversed = _.reverse(array);
console.log(reversed);
// 输出结果:
// [5, 4, 3, 2, 1]

2. 对象相关API

在Lodash中,对象也是常用的数据类型之一,下面是常用的API:

_.assign(object, [sources])

该函数用于分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右,随后的下一个对象的属性会覆盖上一个对象的属性。

注意: 这方法会改变 object,参考自Object.assign.

let object = {
  name: 'John',
  age: 25,
  score: 80,
};

let source1 = { name: 'Jane' };
let source2 = { age: 28 };
_.assign(object, source1, source2);
console.log(object);
// 输出结果:
// {
//   name: 'Jane',
//   age: 28,
//   score: 80
// }

_.omit(object, [props])

反向版_.pick; 这个方法一个对象,这个对象由忽略属性之外的object自身和继承的可枚举属性组成。

(注:可以理解为删除object对象的属性)。

let object = {
  name: 'John',
  age: 25,
  score: 80,
};

let withoutScore = _.omit(object, 'score');
console.log(withoutScore);
// 输出结果:
// {
//   name: 'John',
//   age: 25,
// }

_.pick(object, [props])

该函数用于创建一个对象的浅拷贝,并只保留指定键的属性。

let object = {
  name: 'John',
  age: 25,
  score: 80,
};

let picked = _.pick(object, ['name', 'age']);
console.log(picked);
// 输出结果:
// {
//   name: 'John',
//   age: 25,
// }

_.isEqual(value, other)

该函数用于比较两个值是否相等,支持比较对象数组正则表达式等。

注意: 这个方法支持比较 arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, 以及 typed arrays.
Object 对象值比较自身的属性,不包括 继承的和可枚举的属性。 不支持 函数和DOM节点比较。

console.log(_.isEqual('abc', 'abc')); // true
console.log(_.isEqual({a: 1}, {a: 1})); // true
console.log(_.isEqual([1, 2], [1, 2])); // true
console.log(_.isEqual(/abc/g, /abc/g)); // true

_.merge(object, [sources])

该函数用于将两个或多个对象合并为一个新对象。

该方法类似_.assign, 除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在,被解析为undefinedsources 来源对象属性将被跳过。数组和普通对象会递归合并,其他对象和值会被直接分配覆盖。源对象从从左到右分配。后续的来源对象属性会覆盖之前分配的属性。

let object1 = { 'a': 1 };
let object2 = { 'b': 2 };
let merged = _.merge(object1, object2);
console.log(merged);
// 输出结果:
// { 'a': 1, 'b': 2 }

.omitBy(object, [predicate=.identity])

该函数用于创建一个对象的浅拷贝,但是过滤掉指定条件满足的属性。

反向版_.pickBy;这个方法一个对象,这个对象忽略 predicate(断言函数)判断不是真值的属性后,object自身和继承的可枚举属性组成。predicate调用与2个参数:(value, key)。

let object = {
  name: 'John',
  age: 25,
  score: 80,
};

let filtered = _.omitBy(object, function(value, key) {
  return key === 'score';
});

console.log(filtered);
// 输出结果:
// {
//   name: 'John',
//   age: 25,
// }

.pickBy(object, [predicate=.identity])

该函数用于创建一个对象,这个对象组成为从 object 中经 predicate 判断为真值的属性。 predicate调用2个参数:(value, key)。

let object = {
  name: 'John',
  age: 25,
  score: 80,
};

let picked = _.pickBy(object, function(value, key) {
  return key !== 'score';
});

console.log(picked);
// 输出结果:
// {
//   name: 'John',
//   age: 25,
// }

3. 字符串相关API

在Lodash中,字符串也是常用的数据类型之一,下面是常用的API:

_.kebabCase

该函数用于将字符串转换为kebab case(短横线连接单词)格式。

console.log(_.kebabCase('foo_bar_baz')); // 'foo-bar-baz'

_.camelCase

该函数用于将字符串转换为camel case(驼峰格式)格式。

console.log(_.camelCase('foo-bar-baz')); // 'fooBarBaz'

_.snakeCase

该函数用于将字符串转换为snake case(下划线连接单词)格式。

console.log(_.snakeCase('fooBarBaz')); // 'foo_bar_baz'

_.startsWith

该函数用于判断字符串是否以指定的字符开始。

console.log(_.startsWith('lodash', 'lod')); // true

_.endsWith

该函数用于判断字符串是否以指定的字符结束。

console.log(_.endsWith('lodash', 'sh')); // true

_.repeat

该函数用于将一个字符串重复n次。

let repeated = _.repeat('abc', 3);
console.log(repeated);
// 输出结果:
// 'abcabcabc'

以上是Lodash中常用的一些API,这些API可以帮助我们更加方便和高效地处理数据。

四、总结

Lodash 是一个必备的JavaScript工具库,可以帮助我们简洁、易读地处理数据。Lodash提供了许多功能强大的函数,主要用于操作数组、对象和字符串等数据类型,同时也提供了许多实用的函数,如mergedebouncethrottle等等。Lodash的使用可以让我们更快速、更高效地编写JavaScript代码,希望这篇文章可以帮助你学习Lodash,并在实际开发中运用它。

你可能感兴趣的:(#,javascript,javascript,学习,开发语言)