Lodash是一個輕量級的JavaScript工具函數庫，它方便了日常開發中對數據的操作，提高了開發效率。

? 日常開發中，通常會對數據，特別是數組和對象進行各種讀寫等操作：比如去重，拷貝，合并，過濾，求交集，求和等等。根據平時開發中對數據的操作，我對Lodash常見的用法做了以下總結，方便今后的學習和整理。

Array

Create

• 創建一個數組，元素為0, 1, 2, ... , 23

  _.range([start=0], end, [step=1]) let arr = _.range(24)console.log(arr) // [0, 1, 2, 3, ... , 23]

• 創建一個數組，元素為100, 100, 100, 100, 100

  _.fill(array, value, [start=0], [end=array.length]) let arr = _.fill(Array(5), 100)console.log(arr) // [100, 100, 100, 100, 100]

Read

• 獲取數組中最后一個元素

  _.last(array) let arr = [1, 2, 3, 4, 5] let lastElement = _.last(arr) console.log(lastElement) // 5

• 獲取數組中倒數第二個元素

  _.nth(array, [n=0]) let arr = [1, 2, 3, 4, 5] let lastSecondElement = _.nth(-2) console.log(lastSecondElement) // 4

• 獲取對象數組中某一同名屬性的屬性值集合

  _.map(collection, [iteratee=_.identity]) let users = [{id: 12,name: 'Adam',hobbies: [{name: 'running', index: 100},{name: 'cycling', index: 95}]},{id: 14,name: 'Bob',hobbies: [{name: 'movie', index: 98},{name: 'music', index: 85}]},{id: 16,name: 'Charlie',hobbies: [{name: 'travelling', index: 90},{name: 'fishing', index: 88}]},{id: 18,name: 'David',hobbies: [{name: 'walking', index: 99},{name: 'football', index: 85}] } ] let userIds = _.map(users, 'id') let mostFavouriteHobbies = _.map(users, 'hobbies[0].name')console.log(userIds) // [12, 14, 16, 18] console.log(mostFavouriteHobbies) // ["running", "movie", "travelling", "walking"]

• 獲取對象數組中某一屬性值最大的對象

  _.maxBy(array, [iteratee=_.identity]) let arr = [{a:1, b: 2, c: {d:4}}, {a:3, b: 4, c: {d:6}}] let maxBObj = _.maxBy(arr, 'b')console.log(maxBObj) // {a: 3, b: 4, c: {d: 6}}

• 找出兩個數組中元素值相同的元素

  _.intersection([arrays]) let arr1 = [2, 1, {a: 1, b: 2}] let arr2 = [2, 3, {a: 1, b: 2}] let intersection = _.intersection(arr1, arr2) console.log(intersection) // [2]

• 求數值數組中元素值的平均數

  _.mean(array) let numbers = [1, 2, 3, 4, 5] let average = _.mean(numbers)console.log(average) // 3

• 求對象數組中某個屬性值的平均數

  _.meanBy(array, [iteratee=_.identity]) let objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }] let average = _.meanBy(objects, 'n')console.log(average) // 5

• 獲取數組中前n個元素，不改變原數組

  _.take(array, [n=1]) let arr = [1, 2, 3, 4, 5] let part1Arr = _.take(arr, 4) let part2Arr = _.take(arr, 6) let part3Arr = _.take([], 5)console.log(part1Arr) // [1, 2, 3, 4] console.log(part2Arr) // [1, 2, 3, 4, 5] console.log(part3Arr) // []

Delete

• 刪除數組中值為falsy的元素

  _.compact(array) let arr = [0, 1, false, 2, '', 3, null, undefined, NaN] let truthyArr = _.compact(arr) console.log(truthyArr) // [1, 2, 3]

Format

• 去重。

  _.uniq(array) let arr = [2, 1, 2, '2', true] let uniqArr = _.uniq(arr)console.log(uniqArr) // [2, 1, '2', true]

• 排序。對象數組，根據對象中的某個屬性的值，升序或降序排序

  _.orderBy(collection, [iteratees=[_.identity]], [orders]) let users = [{user: 'Tom', age: 25},{user: 'Amy', age: 23},{user: 'Perter', age: 22},{user: 'Ben', age: 29} ] let sortedUsers = _.orderBy(users, 'age', 'desc')console.log(sortedUsers) // [{user: "Ben", age: 29}, {user: "Tom", age: 25}, {user: "Amy", age: 23}, {user: "Perter", age: 22}]

• 分割數組[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]為 [1, 2, 3, 4, 5] 和 [6, 7, 8, 9, 10]

  _.chunk(array, [size=1]) let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] let [left, right] = _.chunk(arr, 5)console.log(left) // [1, 2, 3, 4, 5] console.log(right) // [6, 7, 8, 9, 10]

• 脫掉一層[]

  _.flatten(array) let address = {'江蘇省': ['南京市', '蘇州市'],'浙江省': ['杭州市', '紹興市'] } let cities = _.flatten(_.values(address))console.log(cities) // ["南京市", "蘇州市", "杭州市", "紹興市"]

• 將多維數組轉為一維數組

  _.flattenDeep(array) let flattenedArr = _.flattenDeep([1, [2, [3, [4]], 5]]);console.log(flattenedArr) // [1, 2, 3, 4, 5]

Object

Create

• 通過數組["x", "y"] 和 數組[10, 10] 創建對象 {x: 10, y: 10}

  _.zipObject([props=[]], [values=[]]) let keys = ["x", "y"] let values = [10, 10] let obj = _.zipObject(keys, values) console.log(obj) // {x: 10, y: 10}

• 合并對象

  _.assign(object, [sources]) let desObj = {name: '', gender: 'male', job: 'developer'} let sourceObj = {name: 'Tom', job: ''} let mergedObj = _.assign(desObj, sourceObj)console.log(mergedObj) // {name: "Tom", gender: "male", job: ""}

• 深拷貝對象

  _.cloneDeep(value) let sourceObj = {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14]}} let desObj = _.cloneDeep(sourceObj) desObj.permissions.store.push(15, 16)console.log(desObj) // {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14, 15, 16]}} console.log(sourceObj) // {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14]}}

• 合并多個對象中key值相同的鍵值對

  _.merge(object, [sources]) let obj1 = {'9': {name: '樂購超市'}} let obj2 = {'9': {storeToken: 'xxx'}} let obj3 = {'9': {storePosition: 'Hangzhou'}} let mergedObj = _.merge(obj1, obj2, obj3) console.log(mergedObj) // 9: {name: "樂購超市", storeToken: "xxx", storePosition: "Hangzhou"}

Read

• 判斷對象中是否有某個屬性

  _.has(object, path) let obj = {a: [{b: {c: 3}}]} let hasC = _.has(obj, 'a[0].b.c')console.log(hasC) // true

• 獲取對象中的某個屬性的值

  _.get(object, path, [defaultValue]) let obj = {a: [{b: {c: 3}}]} let c = _.get(obj, 'a[0].b.c')console.log(c) // 3

Update

• 設置對象中的某個屬性的值

  _.set(object, path, value) let obj = {a: [{b: {c: 3}}]} let newObj = _.set(obj, 'a[0].b.c', 4);console.log(obj.a[0].b.c); // 4

• 對多個對象相同屬性的屬性值求和。

  let customers = {new_customer: {0: 33, 1: 5, ... , 23: 0},old_customer: {0: 22, 1: 7, ... , 24: 0} } let customer = {} let keys = _.keys(customers.new_customer) let values = _.values(customers) _.map(keys, key => {customer[key] = _.sumBy(values, key) })customers.customer = customerconsole.log(customers) // console {customer: {0: 55, 1: 12, ... , 23: 0}new_customer: {0: 33, 1: 5, ... , 23: 0}old_customer: {0: 22, 1: 7, ... , 23: 0} }

Number

• 生成一個隨機數，范圍n~m

  _.random([lower=0], [upper=1], [floating]) let random1 = _.random(2, 5) let random2 = _.random(5)console.log(random1) // 2, 3, 4, 5 console.log(random2) // 0, 1, 2, 3, 4, 5

Data Type

• 判斷數據類型

  _.isNumber(value)

  _.isInteger(value)

  ...

  _.isPlainObject(value)

  let variable = 'hello'; // Number console.log(_.isNumber(variable)); // Integer console.log(_.isInteger(variable)); // Boolean console.log(_.isBoolean(variable)); // String console.log(_.isString(variable)); // Null console.log(_.isNull(variable)); // Undefined console.log(_.isUndefined(variable)); // Array console.log(_.isArray(variable)); // Function console.log(_.isFunction(variable)); // Object console.log(_.isPlainObject(variable)); // Date console.log(_.isDate(variable));// DOM element console.log(_.isElement(variable));

• 數據類型轉換

  • _.toArray

    _.toArray('abc') // ["a", "b", "c"]

  • _.toInteger

    _.toInteger(3.2); // 3 _.toInteger('3.2'); // 3

  • _.toNumber

    _.toNumber('3.2') // 3.2

  • _.toString

    _.toString(1); // "1" _.toString([1, 2, 3]); // "1,2,3"

Util

• 重復多次某個元素

  _.times(n, [iteratee=_.identity]) const dateParams = _.times(2, () => '2018-08-27'); console.log(dateParams) // ["2018-08-27", "2018-08-27"]

總結

以上是生活随笔為你收集整理的Lodash常用用法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。