快捷導(dǎo)航

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

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

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

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）拆分成多個(gè) size 長(zhǎng)度的區(qū)塊，并將這些區(qū)塊組成一個(gè)新數(shù)組。

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

array：要拆分的數(shù)組（目標(biāo)數(shù)組）
size=1：每個(gè)數(shù)組區(qū)塊的長(zhǎng)度

返回值：(Array)*: 返回一個(gè)包含拆分區(qū)塊的新數(shù)組（注：相當(dāng)于一個(gè)二維數(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)建一個(gè)新數(shù)組，包含原數(shù)組中所有的非假值元素。

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

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

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

_.concat(array, [values])

創(chuàng)建一個(gè)新數(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)建一個(gè)切片數(shù)組，去除array前面的n個(gè)元素。（n默認(rè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)建一個(gè)切片數(shù)組，去除array尾部的n個(gè)元素。（n默認(rè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 來源對(duì)象自身和繼承的可枚舉屬性到 object 目標(biāo)對(duì)象。

如果目標(biāo)值存在，被解析為undefined的sources 來源對(duì)象屬性將被跳過。

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

源對(duì)象從從左到右分配。

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

_.merge(object, [sources])

object (Object)：目標(biāo)對(duì)象
[sources] (…Object)：來源對(duì)象

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

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 }] }