lodash

Lodash是一個流行的JavaScript實用工具庫，提供了對JavaScript常見任務的高效和模塊化的實現，使開發者可以更容易地編寫高質量、可維護和可讀性強的代碼。Lodash庫提供了大量的函數，如數組處理、字符串操作、對象處理、函數式編程、日期處理等功能，可以大大提高開發效率。
Lodash庫的特點包括：
高效的性能：Lodash的實現是經過優化的，可以有效地提高JavaScript應用程序的性能。
模塊化的架構：Lodash的函數被組織成了模塊，可以根據需要選擇加載，而不是一次性加載整個庫。
簡潔易懂的API：Lodash提供了簡潔易懂的API，可以輕鬆地完成常見的任務，減少了開發者的代碼量。
支持鏈式調用：Lodash的函數支持鏈式調用，可以方便地進行函數組合和操作。

1 _.groupBy(): groupBy()方法可以將一個集合中的元素按照指定的屬性分組，並返回一個對象。它接受兩個參數：要遍歷的集合和一個屬性名。

console.log(
    _.groupBy([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 25 }], 'age'),
    'groupBy-groupBy-groupBy-groupBy-groupBy'
)

2 _.debounce(): 防抖 debounce()方法可以限制一個函數在短時間內多次調用，就是在規定時間連續輸入時只取最後一次的值（只要輸入時停頓的時間不超過規定值那麼就不會執行）並返回一個新的函數。它接受兩個參數：要限制的函數和延遲時間（以毫秒為單位）。

const debounceFunc = _.debounce((num) => console.log(num), 1000);
// debounceFunc('0')
// setTimeout(() => {debounceFunc('300')}, 300)
// setTimeout(() => {debounceFunc('500')}, 500)
// setTimeout(() => {debounceFunc('1000')}, 1000)
// setTimeout(() => {debounceFunc('1500')}, 1500)
// setTimeout(() => {debounceFunc('2600')}, 2600)

3 _.throttle():節流 throttle()方法可以限制一個函數在一段時間內只能調用一次，

以規定數值為一個時間節點，當小於當前時間時取最後觸發的值，
並返回一個新的函數。它接受兩個參數：要限制的函數和時間間隔（以毫秒為單位）。

const throttleFunc = _.throttle((num) => console.log(num), 1000);
// throttleFunc(0); // 第一次調用
// setTimeout(() => { throttleFunc(500) }, 500);
// setTimeout(() => { throttleFunc(600) }, 600);
// setTimeout(() => { throttleFunc(1000) }, 1000);
// setTimeout(() => { throttleFunc(1500) }, 1500);
// setTimeout(() => { throttleFunc(1600) }, 1600);

4 _.cloneDeep(): cloneDeep()方法可以深度複製一個對象或數組，返回一個新的對象或數組。

const cloneDeepObj = { a: { b: { c: 1 } } };
const newObj = _.cloneDeep(cloneDeepObj);
newObj.a.b.c = 2;
console.log(cloneDeepObj.a.b.c, newObj.a.b.c, 'cloneDeep-cloneDeep-cloneDeep-cloneDeep');

5 _.pick(): pick()方法可以從一個對象中選擇指定的屬性，並返回一個新的對象。

const pickObj = { a: 1, b: 2, c: 3 };
const newPickObj = _.pick(pickObj, ['a', 'c']);
console.log(newPickObj, 'pick-pick-pick-pick');

6 _.omit(): omit()方法可以從一個對象中排除指定的屬性，並返回一個新的對象

const omitObj = { a: 1, b: 2, c: 3 };
const newOmitObj = _.omit(omitObj, ['b']);
console.log(newOmitObj, 'omit-omit-omit-omit');

7 _.flattenDeep(): flatten()方法可以將一個嵌套的數組展開成一個一維數組

const flattenArr = [1, [2, [3, [4]], 5]];
const newFlattenArr = _.flattenDeep(flattenArr);
console.log(newFlattenArr, 'flattenDeep-flattenDeep-flattenDeep-flattenDeep');

8 _.initial():去除數組array中的最後一個元素

const initialArr = [{ a: 1 }, { a: 2 }]
console.log(_.initial(initialArr), 'initial-initial-initial-initial')

9 _.isEqual():執行深比較來確定兩者的值是否相等。經常需要比較兩個表單數據是否相等，以便判斷用户是否修改了數據

var object = { 'a': 1, b: 1 };
var other = { 'a': 1, 'b': 1 };
console.log(_.isEqual(object, other), 'isEqual-isEqual-isEqual-isEqual')

10 _.camelCase():轉換字符串為駝峯一般前端命名駝峯，而後端接口返回的 JSON 數據中可能採用下劃線格式。為了方便操作這些數據，需要將屬性名轉換為駝峯格式。

console.log(_.camelCase('foo_bar'), 'camelCase-camelCase-camelCase-camelCase')

11 _.endsWith():檢查字符串string是否以給定的target字符串結尾。驗證文件類型：在上傳文件的時候，常常需要驗證文件的類型是否符合要求，如果文件名以特定的字符串結尾，那麼就可以判斷文件類型是否正確。處理URL：在使用URL進行頁面跳轉或者發送請求時，有時需要檢查URL是否以某個固定的字符串結尾，以此來確定需要跳轉到哪個頁面或者發送到哪個服務器。

console.log(_.endsWith('abc/v', 'bc/v'), 'endsWith-endsWith-endsWith')

12 _.escape():轉義string中的 "&", "<", ">", '"', "'", 和 "`" 字符為HTML實體字符。當用户在表單中輸入文本時，我們需要檢查文本是否包含 HTML 實體，如果包含則需要進行轉義，以防止惡意腳本的注入。當我們將數據渲染到頁面上時，需要將其中包含的 HTML 實體轉義，以避免將實體當成 HTML 標籤來解析。

console.log(_.escape('<script src="./loadsh"></script>'), 'escape-escape-escape-escape')

13 _.zipObject():它接受2個數組，第一個數組中的值作為屬性名，第二個數組中的值作為相應的屬性值。當後端為了避免少建字段時，前端給table賦值時又需要屬性名，那麼可以前端定義屬性名使用這種方式組成對象方便取值

[
    {
        name:'xxxx',
        sum:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
    },
    {
        name:'yyyy',
        sum:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
    },
]

const frontArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K'];
const backendArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
console.log(_.zipObject(frontArr, backendArr), 'zipObject-zipObject-zipObject-zipObject')

14 _.truncate():截斷string字符串，如果字符串超出了限定的最大值。 被截斷的字符串後面會以 omission 代替，omission 默認是 "..."。當我們需要在 UI 中顯示一些過長的字符串時，通常需要將其截斷以適應顯示區域

const truncateStr = _.truncate('hi-diddly-ho there, neighborino', {
    'length': 24,//截斷長度
    // 'separator': ' ',//根據哪個字符截斷，
    // 'omission': ' [...]'//截斷之後顯示內容
});
console.log(truncateStr, 'truncateStr-truncateStr-truncateStr')

15 _.merge():_.merge 和 _.assign 都是用於合併對象的函數，但它們的合併策略不同。

_.merge 將源對象的屬性遞歸地合併到目標對象上。如果目標對象中有相同的屬性名，則使用源對象的屬性值覆蓋目標對象的屬性值。

_.assign 將所有源對象的屬性簡單地合併到目標對象上。如果源對象和目標對象有相同的屬性名，則用源對象的屬性值覆蓋目標對象的屬性值。如果有多個源對象有相同的屬性，則後面的源對象的屬性值會覆蓋前面的源對象和目標對象的屬性值。

因此，相比於 _.assign，_.merge 更適合處理複雜的對象嵌套情況，能夠遞歸地合併對象。而 _.assign 更適合簡單的對象合併，具有覆蓋性，後面的對象的屬性會覆蓋前面的對象的屬性。


var object = {
    'a': [{ 'b': 2 }, { 'd': 4 }, { 'f': 6 }]
};

var other = {
    'a': [{ 'c': 3 }, { 'e': 5 }, { f: 7 }]
};

console.log(_.merge(object, other))
console.log(_.assign(object, other))