vue---lodash的使用


Lodash就是這樣的一套工具庫,它內部封裝了諸多對字符串、數組、對象等常見數據類型的處理函數,其中部分是目前ECMAScript尚未制訂的規范,但同時被業界所認可的輔助函數。莫倩每天使用npm安裝Lodash的數量在百萬級以上,這在一定程度上證明了其代碼的健壯性,值得我們在項目中一試。

模塊組成:

Array, 適合於數組類型,比如填充數據、查找元素、數組分片等操作
Collocation, 適用於數組和對象類型,部分適用於字符串,比如分組、查找、過濾等操作
Function, 適用於函數類型,比如節流、延遲、緩存、設置鈎子等操作
Lang, 普遍適用於各種類型,常用於執行類型判斷和類型轉換
Math, 使用與數值類型,常用於執行數學運算
Number, 適用於生成隨機數,比較數值與數值區間的關系
Object, 適用於對象類型,常用於對象的創建、擴展、類型轉換、檢索、集合等操作
Seq, 常用於創建鏈式調用,提高執行性能(惰性計算)
String, 適用於字符串類型
lodash/fp 模塊提供了更接近函數式編程的開發方法,其內部的函數經過包裝,具有immutable、auto-curried、iteratee-first、data-last(官方介紹)等特點。
Fixed Arity,固化參數個數,便於柯里化
Rearragned Arguments, 重新調整參數位置,便於函數之間的聚合
Capped Iteratee Argument, 封裝Iteratee參數

安裝使用:

npm install --save lodash
npm install --save-dev babel-plugin-lodash

具體的使用方法:

import _ from 'lodash';
import { add } from 'lodash/fp';

const addOne = add(1);
_.map([1, 2, 3], addOne);

測試的幾個常用的使用方法:

lodashTest:function(){
  // 循環5次數
  _.times(5,function(i){
    console.log(i);
  });
  // 深度 copy 
  let objA = {name:'zzl'};
  let objB = _.cloneDeep(objA);
  console.log(objB);
  // 隨機數
  console.log(_.random(5,80));
  // 對象擴展
  let objC = {"names": "colin", "car": "suzuki"};
  let objD = {"name": "james", "age": 17};
  let objE = _.assign(objC, objD);
  console.log(objE); // 合並到了一起
  // 篩選
  let objF = {"name": "colin", "car": "suzuki", "age": 17};
  console.log(_.omit(objF,['car','age'])); // 移除 car 和 age 保留 name
  console.log(_.omit(objF,'name')); // 移除 name 保留 car 和 age
  console.log(_.pick(objF,['name','age'])); // 篩選出 name age
  // 隨機元素
  let objG = ["Colin", "John", "James", "Lily", "Mary"];
  console.log(_.sample(objG));// 隨機一個
  console.log(_.sample(objG,2));// 隨機兩個
  // JSON.parse 錯誤處理      
  console.log(parseLodash('{"name": "colin"}'));
  function parseLodash(str){
    return _.attempt(JSON.parse.bind(null, str));
  }
},

參考文檔:https://www.cnblogs.com/webbest/p/8268115.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM