React--》學習Lodash：讓你的JS代碼更加優(yōu)雅和易于閱讀

這篇具有很好參考價值的文章主要介紹了React--》學習Lodash：讓你的JS代碼更加優(yōu)雅和易于閱讀。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

????????此時隔壁?vue專欄正在項目實戰(zhàn)，為了不打斷它的文章連續(xù)性，我們把lodash的講解文章搬到react專欄來進行學習，當然是否用框架或用什么框架都不會影響我們學習的恒心！

初識Lodash

操作數(shù)組方法

操作語言方法

操作數(shù)學方法

操作對象方法

操作字符串方法

初識Lodash

Lodash是一個流行的JavaScript實用工具庫，提供了高效、靈活和模塊化的操作數(shù)組、對象、字符串、函數(shù)等數(shù)據(jù)類型的工具函數(shù)。Lodash相對于原生JavaScript，可以讓你更快捷地編寫代碼，減少重復工作和出錯風險。其主要特點如下：

Lodash 以模塊化的方式構(gòu)建，可以按需載入所需的功能。

提供了很多對JavaScript內(nèi)置對象方法的擴展，可以方便地進行常用的數(shù)據(jù)處理。

優(yōu)化了內(nèi)置方法的性能，提高了應用程序的運行效率。

對于跨瀏覽器兼容性、緩存機制、錯誤處理等方面都進行了增強。

為什么要學習lodash？學習過ES6+語法的朋友都知道，它已經(jīng)提供了很多的方法來操作我們的數(shù)據(jù)結(jié)構(gòu)，但是Lodash提供了更加全面和完善的API支持，并且兼容更多的瀏覽器版本。Lodash還提供了許多實用的函數(shù)，如deepClone、debounce、throttle等，可以幫助開發(fā)者更快速地實現(xiàn)常見的編程任務，提高開發(fā)效率。

雖然ES6/ES7在語言特性上有很大的提升，但Lodash仍然是一個非常有價值的工具庫，使用它可以讓我們更輕松地開發(fā)和維護JavaScript應用程序。如果你是一名前端開發(fā)者，學習Lodash仍然是非常有必要的。本篇文章將用react框架為基礎(chǔ)，簡單介紹一下lodash的使用，當然如果想了解更多的lodash知識，推薦查閱官方文檔：https://www.lodashjs.com/ ，lodash的安裝官方文件已經(jīng)講解的很清除了，因為本篇文章采用的是react框架進行講解，所以我們在終端執(zhí)行如下命令進行安裝lodash第三方庫：

npm i --save lodash

因為lodash官方文檔給出了很多的操作數(shù)據(jù)結(jié)構(gòu)發(fā)方法，但是并不是每個方法都很實用，有的方法應用場景很少也很雞肋，我這一篇文章也不可能將每一個方法都講解到，所以我會著重挑選其中最實用，應用場景廣的方法進行講解。

操作數(shù)組方法

_.compact(array)：創(chuàng)建一個新數(shù)組，包含原數(shù)組中所有的非假值元素，返回過濾掉假值的新數(shù)組

import _ from 'lodash';

// 例如false, null,0, "", undefined, 和 NaN 都是被認為是“假值”。
const result = _.compact([0, 1, false, 2, '', 3]);
console.log(result); // 控制臺打印結(jié)果：[1, 2, 3]

const App = () => {
  return <div>{result}</div>;
};
export default App;

_.concat(array, [values])：創(chuàng)建一個新數(shù)組，將array與任何數(shù)組或值連接在一起，返回連接后的新數(shù)組，這一點和原生JS concat 方法類似，這里也簡單的講解一下：

import _ from 'lodash';

var array = [0,1];
const result = _.concat(array, 2, [3], [[4]]);
console.log(result); // 控制臺打印結(jié)果：[0, 1, 2, 3, [4]]

const App = () => {
  return <div>{result}</div>;
};
export default App;

_.difference(array, [values])：創(chuàng)建一個新數(shù)組，這個數(shù)組中的值，為第一個數(shù)字（array 參數(shù)）排除了給定數(shù)組中的值。（這個方法還挺新穎的）

import _ from 'lodash';

// 參數(shù)1：要檢查的數(shù)組。參數(shù)2：排除的值。
const result = _.difference([5, 4, 3, 2, 1], [4, 2, 1]);
console.log(result); // 控制臺打印結(jié)果：[5, 3]

const App = () => {
  return <div>{result}</div>;
};
export default App;

該方法也衍生出其它類似方法，使得排除的條件變得更加嚴格，如下：

import _ from 'lodash';

// 參數(shù)1：要檢查的數(shù)組。參數(shù)2：排除的值。參數(shù)3：調(diào)用每個元素
const result = _.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
console.log(result); // 控制臺打印結(jié)果：[3.1, 1.3]

const App = () => {
  return <div>{result}</div>;
};
export default App;

_.drop(array, [n=1])：創(chuàng)建一個切片數(shù)組，去除array前面的n個元素。（n默認值為1。）

import _ from 'lodash';

// 參數(shù)1：要查詢的數(shù)組。參數(shù)2：要去除的元素個數(shù)。
const result = _.drop([1, 2, 3], 2);
console.log(result); // 控制臺打印結(jié)果：[3]

const App = () => {
  return <div>{result}</div>;
};
export default App;

該方法也衍生出其它類似方法，使得切片數(shù)組變得更加靈活，如下：

// 參數(shù)1：要查詢的數(shù)組。參數(shù)2：要去除的元素個數(shù)。
const result = _.dropRight([1, 2, 3], 2); // 去除array尾部的n個元素。
console.log(result); // 控制臺打印結(jié)果：[1]

_.fill(array, value, [start=0], [end=array.length])：使用 value 值來填充（替換） array，從start位置開始, 到end位置結(jié)束（但不包含end位置）。

import _ from 'lodash';

// 參數(shù)1：要填充改變的數(shù)組。參數(shù)2：填充給 array 的值。參數(shù)3：開始位置（默認0）。參數(shù)4：結(jié)束位置（默認array.length）。
const result = _.fill([4, 6, 8, 10], '*', 1, 3);
console.log(result); // 控制臺打印結(jié)果：[4, '*', '*', 10]

const App = () => {
  return <div>{result}</div>;
};
export default App;

_.pull(array, [values])：移除數(shù)組array中所有和給定值相等的元素：

import _ from 'lodash';

var array = [1, 2, 3, 1, 2, 3];
const result = _.pull(array, 2, 3);
console.log(result); // 控制臺打印結(jié)果：[1, 1]

const App = () => {
  return <div>{result}</div>;
};
export default App;

該方法也衍生出其它類似方法，使得移除數(shù)組指定元素變得更加靈活，如下：

var array = [1, 2, 3, 1, 2, 3];
const result = _.pullAll(array, [2, 3]);// 這個方法類似_.pull，區(qū)別是這個方法接收一個要移除值的數(shù)組。
console.log(result); // 控制臺打印結(jié)果：[1, 1]

var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);// 根據(jù)索引 indexes，移除array中對應的元素，并返回被移除元素的數(shù)組。
 
console.log(array);
// => [5, 15]
 
console.log(evens);
// => [10, 20]

_.sortedUniq(array)：優(yōu)化排序數(shù)組，返回一個新的不重復的數(shù)組。

import _ from 'lodash';

const result = _.sortedUniq([1, 1, 2]);
console.log(result); // 控制臺打印結(jié)果：[1, 2]

const App = () => {
  return <div>{result}</div>;
};
export default App;

該方法也衍生出其它類似方法，使得優(yōu)化數(shù)組變得更加靈活，如下：?

_.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor);
// => [1.1, 2.3]

操作語言方法

_.eq(value, other)：比較兩者的值，來確定它們是否相等。

var object = { 'a': 1 };
var other = { 'a': 1 };
 
_.eq(object, object);
// => true
 
_.eq(object, other);
// => false
 
_.eq('a', 'a');
// => true
 
_.eq('a', Object('a'));
// => false
 
_.eq(NaN, NaN);
// => true

_.isSafeInteger(value)：檢查 value 是否是一個安全整數(shù)。一個安全整數(shù)應該是符合 IEEE-754 標準的非雙精度浮點數(shù)。

_.isSafeInteger(3);
// => true
 
_.isSafeInteger(Number.MIN_VALUE);
// => false
 
_.isSafeInteger(Infinity);
// => false
 
_.isSafeInteger('3');
// => false

_.isMatch(object, source)：執(zhí)行一個深度比較，來確定 object 是否含有和 source 完全相等的屬性值。

var object = { 'a': 1, 'b': 2 };
// 參數(shù)1：要檢查的對象。參數(shù)2：屬性值相匹配的對象。
_.isMatch(object, { 'b': 2 });
// => true
 
_.isMatch(object, { 'b': 1 });
// => false

操作數(shù)學方法

_.add(augend, addend)：兩個數(shù)相加。

_.add(6, 4);
// => 10

_.subtract(minuend, subtrahend)：亮數(shù)相減。

_.subtract(6, 4);
// => 2

_.multiply(multiplier, multiplicand)：兩個數(shù)相乘。

_.multiply(6, 4);
// => 24

_.divide(dividend, divisor)：兩個數(shù)相除。

_.divide(6, 4);
// => 1.5

_.max(array)：計算 array 中的最大值。如果 array 是空的或者假值將會返回 undefined。

_.max([4, 2, 8, 6]);
// => 8
 
_.max([]);
// => undefined

_.mean(array)：計算 array 的平均值。

_.mean([4, 2, 8, 6]);
// => 5

_.min(array)：計算 array 中的最小值。如果 array 是空的或者假值將會返回 undefined。

_.min([4, 2, 8, 6]);
// => 2
 
_.min([]);
// => undefined

_.sum(array)：計算 array 中值的總和。

_.sum([4, 2, 8, 6]);
// => 20

操作對象方法

_.get(object, path, [defaultValue])：根據(jù) object對象的path路徑獲取值。如果解析 value 是 undefined 會以 defaultValue 取代。

var object = { 'a': [{ 'b': { 'c': 3 } }] };
// 參數(shù)1：要檢索的對象。參數(shù)2：要獲取屬性的路徑。參數(shù)3：如果解析值是 undefined ，這值會被返回。
_.get(object, 'a[0].b.c');
// => 3
 
_.get(object, ['a', '0', 'b', 'c']);
// => 3
 
_.get(object, 'a.b.c', 'default');
// => 'default'

_.has(object, path)：檢查 path 是否是object對象的直接屬性。

var object = { 'a': { 'b': 2 } };
var other = _.create({ 'a': _.create({ 'b': 2 }) });
// 參數(shù)1：要檢索的對象。參數(shù)2：要檢查的路徑path。
_.has(object, 'a');
// => true
 
_.has(object, 'a.b');
// => true
 
_.has(object, ['a', 'b']);
// => true
 
_.has(other, 'a');
// => false

操作字符串方法

_.camelCase([string=''])：轉(zhuǎn)換字符串string為駝峰寫法。

// 將要轉(zhuǎn)換的字符串，返回駝峰寫法的字符串。
_.camelCase('Foo Bar');
// => 'fooBar'
 
_.camelCase('--foo-bar--');
// => 'fooBar'
 
_.camelCase('__FOO_BAR__');
// => 'fooBar'

_.kebabCase([string=''])：轉(zhuǎn)換字符串string為kebab case。

_.kebabCase('Foo Bar');
// => 'foo-bar'
 
_.kebabCase('fooBar');
// => 'foo-bar'
 
_.kebabCase('__FOO_BAR__');
// => 'foo-bar'

_.capitalize([string=''])：轉(zhuǎn)換字符串string首字母為大寫，剩下為小寫。

_.capitalize('FRED');
// => 'Fred'

_.lowerFirst([string=''])：轉(zhuǎn)換字符串string的首字母為小寫。

_.lowerFirst('Fred');
// => 'fred'
 
_.lowerFirst('FRED');
// => 'fRED'

_.endsWith([string=''], [target], [position=string.length])：檢查字符串string是否以給定的target字符串結(jié)尾。

// 參數(shù)1：要檢索的字符串。參數(shù)2：要檢索字符。參數(shù)3：檢索的位置。
_.endsWith('abc', 'c');
// => true
 
_.endsWith('abc', 'b');
// => false
 
_.endsWith('abc', 'b', 2);
// => true

_.repeat([string=''], [n=1])：重復 N 次給定字符串。

_.repeat('*', 3);
// => '***'
 
_.repeat('abc', 2);
// => 'abcabc'
 
_.repeat('abc', 0);
// => ''

????????當然lodash這個js庫還有很多實用的API，但是文章講解有限，想了解更多l(xiāng)odash知識可以去官方文檔自行查閱，本篇文章關(guān)于lodash的講解就到這，關(guān)注博主學習更多前端技術(shù)！文章來源地址http://www.zghlxwxcb.cn/news/detail-527697.html

到了這里，關(guān)于React--》學習Lodash：讓你的JS代碼更加優(yōu)雅和易于閱讀的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！