快捷導航

vue項目中l(wèi)oadsh庫常用方法說明

更新時間：2023年11月15日 09:16:08 作者：Wyyyy1024

這篇文章主要介紹了vue項目中l(wèi)oadsh庫常用方法說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

lodash

1.下載

npm i lodash

2.使用

全局使用

import _ form lodash

按需使用

import { 要使用的函數(shù) } from lodash

常用方法

_.cloneDeep(value)(深拷貝)

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

_.chunk(數(shù)組)

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

將數(shù)組（array）拆分成多個 size 長度的區(qū)塊，并將這些區(qū)塊組成一個新數(shù)組。

如果array 無法被分割成全部等長的區(qū)塊，那么最后剩余的元素將組成一個區(qū)塊

array：要拆分的數(shù)組（目標數(shù)組）
size=1：每個數(shù)組區(qū)塊的長度

返回值：(Array)*: 返回一個包含拆分區(qū)塊的新數(shù)組（注：相當于一個二維數(shù)組）

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

_.compact(array)(過濾數(shù)組)

創(chuàng)建一個新數(shù)組，包含原數(shù)組中所有的非假值元素。

例如 false, null,0, "", undefined, 和 NaN 都是被認為是“假值”。

返回值：(Array)：返回過濾掉假值的新數(shù)組

_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

_.concat(array, [values])

創(chuàng)建一個新數(shù)組，將array與任何數(shù)組或值連接在一起。

array (Array): 被連接的數(shù)組。
[values] (…*): 連接的值。

返回值 : (Array): 返回連接后的新數(shù)組。

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);
// => [1, 2, 3, [4]]
 
console.log(array);
// => [1]

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

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

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

返回值:(Array): 返回array剩余切片。

_.drop([1, 2, 3]);
// => [2, 3]
 
_.drop([1, 2, 3], 2);
// => [3]
 
_.drop([1, 2, 3], 5);
// => []
 
_.drop([1, 2, 3], 0);
// => [1, 2, 3]

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

創(chuàng)建一個切片數(shù)組，去除array尾部的n個元素。（n默認值為1。）

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

返回值：(Array): 返回array剩余切片。

_.dropRight([1, 2, 3]);
// => [1, 2]
 
_.dropRight([1, 2, 3], 2);
// => [1]
 
_.dropRight([1, 2, 3], 5);
// => []
 
_.dropRight([1, 2, 3], 0);
// => [1, 2, 3]

常用函數(shù)

_.debounce(防抖)

_.debounce(func, [wait=0], [options=])

func：要防抖的函數(shù)
wait=0：需要延遲的毫秒數(shù)

 searchText: {
      // lodash中的debounce防抖處理
      handler: debounce(function (val) {
        this.localSearchSuggestions(val)
      }, 300),
      // handler (val) {
      //   this.localSearchSuggestions(val)
      // },
      immediate: true
    }

_.merge

該方法類似_.assign，除了它遞歸合并 sources 來源對象自身和繼承的可枚舉屬性到 object 目標對象。

如果目標值存在，被解析為undefined的sources 來源對象屬性將被跳過。

數(shù)組和普通對象會遞歸合并，其他對象和值會被直接分配覆蓋。

源對象從從左到右分配。

后續(xù)的來源對象屬性會覆蓋之前分配的屬性。

_.merge(object, [sources])

object (Object)：目標對象
[sources] (…Object)：來源對象

對應(yīng)數(shù)據(jù)會合并到并覆蓋，不對應(yīng)數(shù)據(jù)會添加

var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }