在項目開發(fā)中,用的比較多的是lodash的JavaScript實用庫
lodash是一個強(qiáng)大的JavaScript庫,提供了許多實用方法,可以處理數(shù)組、對象和字符串等數(shù)據(jù)類型。它具有模塊化、性能高效、穩(wěn)定可靠、靈活易用等特點(diǎn)。
以下是lodash庫中比較常用的方法:
-
chunk():將數(shù)組(array)拆分成多個指定長度的區(qū)塊,并將這些區(qū)塊組成一個新數(shù)組。例如:
let array = [1, 2, 3, 4, 5, 6]; let chunked = _.chunk(array, 2); // [[1, 2], [3, 4], [5, 6]] -
debounce():在執(zhí)行回調(diào)函數(shù)之前,延遲執(zhí)行該函數(shù)。常用于處理重復(fù)的實時事件,防止回調(diào)函數(shù)的頻繁觸發(fā)。
function savePreferences() { // code to save preferences } let save = _.debounce(savePreferences, 1000); // Set the preference and debounced function is called after 1 second with the preference value.save('my preference'); -
isObject():判斷某個值是否為對象。
let isObject = _.isObject({}); // true let isNotObject = _.isObject('string'); // false -
isNaN():判斷某個值是否為NaN。
isNaN函數(shù)用于檢查一個值是否為“非數(shù)字”值。這意味著它可以用來檢測一個值是否是NaN(Not a Number),或者是一個可以被解釋為有效數(shù)字的其他非數(shù)字值。const _ = require('lodash'); console.log(_.isNaN(NaN)); // 輸出: true console.log(_.isNaN(0)); // 輸出: false console.log(_.isNaN('')); // 輸出: false console.log(_.isNaN('123')); // 輸出: false console.log(_.isNaN([1, 2, 3])); // 輸出: false console.log(_.isNaN({ a: 1, b: 2 })); // 輸出: false console.log(_.isNaN(null)); // 輸出: false console.log(_.isNaN(undefined)); // 輸出: false -
isUndefined():判斷某個值是否為undefined。
const _ = require('lodash'); let value1, value2, value3; console.log(_.isUndefined(value1)); *// 輸出: true* console.log(_.isUndefined(value2)); *// 輸出: false* console.log(_.isUndefined(value3)); *// 輸出: true* -
map():創(chuàng)建一個新數(shù)組,數(shù)組中的元素是通過調(diào)用提供的函數(shù)在原始數(shù)組上產(chǎn)生的結(jié)果。
let array = [1, 2, 3]; let doubled = _.map(array, function(num) { return num * 2; }); // [2, 4, 6] -
get():獲取對象指定屬性的值。
它允許你通過指定的路徑獲取對象的屬性。如果路徑不存在,則返回
undefinedconst _ = require('lodash'); let object = { a: { b: { c: 3 } } }; console.log(_.get(object, 'a.b.c')); // 輸出 3 console.log(_.get(object, 'a.b.d')); // 輸出 undefined console.log(_.get(object, 'a.e')); // 輸出 undefined -
set():設(shè)置對象指定屬性的值。
set函數(shù)是用于在對象中設(shè)置指定路徑的屬性值。如果路徑不存在,則會自動創(chuàng)建。const _ = require('lodash'); let object = { a: { b: { c: 3 } } }; _.set(object, 'a.b.c', 4); // 設(shè)置路徑'a.b.c'的屬性值為4 console.log(object); // 輸出 { a: { b: { c: 4 } } } _.set(object, 'a.b.d', 5); // 設(shè)置路徑'a.b.d'的屬性值為5,如果不存在會創(chuàng)建路徑 console.log(object); // 輸出 { a: { b: { c: 4, d: 5 } } } -
isEqual():深度比較兩個對象是否相等。
isEqual函數(shù)用于比較兩個對象或值是否相等。它使用嚴(yán)格比較(deep comparison)來檢查對象和數(shù)組中的值,并且會處理循環(huán)引用。const _ = require('lodash'); let object1 = { a: 1, b: { c: 2 } }; let object2 = { a: 1, b: { c: 2 } }; let object3 = { a: 1, b: { c: 3 } }; console.log(_.isEqual(object1, object2)); // 輸出: true console.log(_.isEqual(object1, object3)); // 輸出: false -
isEmpty():判斷一個對象是否為空。
isEmpty函數(shù)用于檢查一個對象(數(shù)組、字符串、對象等)是否為空。const _ = require('lodash'); let array1 = []; let array2 = [1, 2, 3]; let object1 = {}; let object2 = { a: 1, b: 2 }; let string1 = ''; let string2 = 'abc'; console.log(_.isEmpty(array1)); // 輸出: true console.log(_.isEmpty(array2)); // 輸出: false console.log(_.isEmpty(object1)); // 輸出: true console.log(_.isEmpty(object2)); // 輸出: false console.log(_.isEmpty(string1)); // 輸出: true console.log(_.isEmpty(string2)); // 輸出: false
-
sortBy(): 方法可以按照指定的條件對數(shù)組進(jìn)行排序。
let people = [ { 'name': 'John', 'age': 30 }, { 'name': 'Jane', 'age': 25 }, { 'name': 'Mike', 'age': 35 } ]; let sortedPeople = _.sortBy(people, ['age', 'name']); console.log(sortedPeople); // [{ name: 'Jane', age: 25 }, { name: 'John', age: 30 }, { name: 'Mike', age: 35 }]在上面的例子中,我們首先定義了一個
people數(shù)組,然后使用sortBy方法按照age和name進(jìn)行排序。sortBy方法接受兩個參數(shù),第一個參數(shù)是需要排序的數(shù)組,第二個參數(shù)是一個字符串或數(shù)組,用于指定排序的條件。如果第二個參數(shù)是字符串,則按照該字符串代表的屬性進(jìn)行排序;如果第二個參數(shù)是數(shù)組,則先按照第一個元素指定的屬性進(jìn)行排序,然后按照第二個元素指定的屬性進(jìn)行排序。需要注意的是,
sortBy方法默認(rèn)按照升序排序,如果需要按照降序排序,可以傳入第三個參數(shù)為true。 -
union()函數(shù)用于合并多個數(shù)組,并去除重復(fù)項
// 導(dǎo)入lodash庫 const _ = require('lodash'); // 創(chuàng)建數(shù)組 const array1 = [1, 2, 3]; const array2 = [3, 4, 5]; const array3 = [5, 6, 7]; // 使用union函數(shù)合并數(shù)組并去除重復(fù)項 const result = _.union(array1, array2, array3); // 輸出結(jié)果 console.log(result); // [1, 2, 3, 4, 5, 6, 7] -
intersection()函數(shù)用于獲取數(shù)組的交集
// 導(dǎo)入lodash庫 const _ = require('lodash'); // 創(chuàng)建數(shù)組 const array1 = [1, 2, 3]; const array2 = [3, 4, 5]; const array3 = [5, 6, 7]; // 使用intersection函數(shù)獲取數(shù)組的交集 const result = _.intersection(array1, array2, array3); // 輸出結(jié)果 console.log(result); // [3] -
difference()函數(shù)用于從第一個數(shù)組中移除所有在其他數(shù)組中的元素
// 導(dǎo)入lodash庫 const _ = require('lodash'); // 創(chuàng)建數(shù)組 const array1 = [1, 2, 3, 4, 5]; const array2 = [3, 4]; const array3 = [4, 5]; // 使用difference函數(shù)從array1中移除所有在array2和array3中的元素 const result = _.difference(array1, array2, array3); // 輸出結(jié)果 console.log(result); // [1] -
pluck()從對象中獲取給定鍵的值
const people = [{'name': 'Bob', 'age': 36}, {'name': 'Alice', 'age': 30}]; const names = _.pluck(people, 'name'); // ['Bob', 'Alice'] -
invoke()這個函數(shù)用于調(diào)用對象中的方法。這對于處理包含方法的對象非常有用。
const person = { name: 'John', age: 30, greet: function() { console.log('Hello!'); } }; _.invoke(person, 'greet'); // "Hello!" -
assign()這個函數(shù)用于將對象的屬性復(fù)制到另一個對象。這是一個非常有用的函數(shù),用于合并對象。
const obj1 = { a: 1 }; const obj2 = { b: 2 }; const merged = _.assign({}, obj1, obj2); // { a: 1, b: 2 } -
cloneDeep()這個函數(shù)用于深度克隆一個對象。這對于處理復(fù)雜對象和避免引用問題非常有用
const obj = { a: 1, b: { c: 2 } }; const cloned = _.cloneDeep(obj); // { a: 1, b: { c: 2 } }
以上僅是 Lodash 的一些常用庫和函數(shù)示例,還有很多其他的實用工具和函數(shù)可以幫助開發(fā)人員解決各種編程問題。