1、N次循環
<script type="text/javascript"> console.log('------- javascript -------'); //js原生的循環方法 for(var i = 0; i < 5; i++){ console.log(i); } console.log('------- lodash -------'); //ladash的times方法 _.times(5,function(a){ console.log(a); }); </script>
for
語句是執行循環的不二選擇,但在上面代碼的使用場景下,_.times()
的解決方式更加簡潔和易於理解。
2、深層查找屬性值
<script type="text/javascript"> var ownerArr = [{ "owner": "Colin", "pets": [{"name": "dog1"}, {"name": "dog2"}] }, { "owner": "John", "pets": [{"name": "dog3"}, {"name": "dog4"}] }]; var jsMap = ownerArr.map(function (owner) { return owner.pets[0].name; }); console.log('------- jsMap -------'); console.log(jsMap); var lodashMap = _.map(ownerArr, 'pets[0].name'); console.log('------- lodashMap -------'); console.log(lodashMap); </script>
Lodash中的_.map
方法和JavaScript中原生的數組方法非常的像,但它還是有非常有用的升級。 你可以通過一個字符串而不是回調函數來瀏覽深度嵌套的對象屬性。
3、深克隆對象
<script type="text/javascript"> var objA = { "name": "戈德斯文" }; var objB = _.cloneDeep(objA); console.log(objA); console.log(objB); console.log(objA === objB); </script>
深度克隆JavaScript對象是困難的,並且也沒有什么簡單的解決方案。你可以使用原生的解決方案:
JSON.parse(JSON.stringify(objectToClone))
進行深度克隆。但是,這種方案僅在對象內部沒有方法的時候才可行
4、在指定范圍內獲取一個隨機值
<script type="text/javascript"> function getRandomNumber(min, max){ return Math.floor(Math.random() * (max - min)) + min; } console.log(getRandomNumber(15, 20)); console.log(_.random(15, 20)); </script>
Lodash中的 _.random
方法要比上面的原生方法更強大與靈活。你可以只傳入一個參數作為最大值, 你也可以指定返回的結果為浮點數_.random(15,20,true)
5、擴展對象
<script type="text/javascript"> Object.prototype.extend = function(obj) { for (var i in obj) { if (obj.hasOwnProperty(i)) { //判斷被擴展的對象有沒有某個屬性, this[i] = obj[i]; } } }; var objA = {"name": "戈德斯文", "car": "寶馬"}; var objB = {"name": "柴碩", "loveEat": true}; objA.extend(objB); console.log(objA); console.log(_.assign(objA, objB)); </script>
_.assign
方法也可以接收多個參數對象進行擴展,都是往后面的對象上合並
6、從列表中隨機的選擇列表項
<script type="text/javascript"> var smartTeam = ["戈德斯文", "楊海月", "柴碩", "師貝貝"]; function randomSmarter(smartTeam){ var index = Math.floor(Math.random() * smartTeam.length); return smartTeam[index]; } console.log(randomSmarter(smartTeam)); // Lodash console.log(_.sample(smartTeam)); console.log(_.sampleSize(smartTeam,2)); </script>
此外,你也可以指定隨機返回元素的個數_.sampleSize(smartTeam,n)
,n為需要返回的元素個數
7、判斷對象中是否含有某元素
<script type="text/javascript"> var smartPerson = { 'name': '戈德斯文', 'gender': 'male' }, smartTeam = ["戈德斯文", "楊海月", "柴碩", "師貝貝"]; console.log(_.includes(smartPerson, '戈德斯文')); console.log(_.includes(smartTeam, '楊海月')); console.log(_.includes(smartTeam, '楊海月',2)); </script>
_.includes()
第一個參數是需要查詢的對象,第二個參數是需要查詢的元素,第三個參數是開始查詢的下標
8、遍歷循環
<script type="text/javascript"> _([1, 2]).forEach(function(value) { console.log(value); }); _.forEach([1, 3] , function(value, key) { console.log(key,value); }); </script>
這兩種方法都會分別輸出‘1’和‘2’,不僅是數組,對象也可以,數組的是后key
是元素的下標,當傳入的是對象的時候,key
是屬性,value
是值
9、遍歷循環執行某個方法
<script type="text/javascript"> function square(n) { return n * n; } console.log(_.map([4, 8], square)); // => [16, 64] console.log(_.map({ 'a': 4, 'b': 8 }, square)); // => [16, 64] (iteration order is not guaranteed) var users = [ { 'user': 'barney' }, { 'user': 'fred' } ]; // The `_.property` iteratee shorthand. console.log(_.map(users, 'user')); // => ['barney', 'fred'] </script>
10、檢驗值是否為空
<script type="text/javascript"> _.isEmpty(null); // => true _.isEmpty(true); // => true _.isEmpty(1); // => true _.isEmpty([1, 2, 3]); // => false _.isEmpty({ 'a': 1 }); // => false </script>
12、數組去重
<script type="text/javascript"> var arr1 = [2, 1, 2]; var arr2 = _.uniq(arr1); function unique(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { if(newArr.indexOf(arr[i]) == -1){ newArr.push(arr[i]); } } return newArr; } console.log(arr1); console.log(arr2); console.log(unique(arr1)); </script>
13、根據下標選擇元素,分到兩個數組
var array = [5, 10, 15, 20]; var evens = _.pullAt(array, 1, 3); console.log(array); // => [5, 15] console.log(evens); // => [10, 20]
14、返回從結尾元素開始n個元素的數組切片
// 倒數解構 const [beforeLast, last] = lodash.takeRight([1, 2, 3, 4], 2) console.log(beforeLast, last) // 3 4
14、zipObject
lodash.zipObject(['a', 'b'], [1, 2]); // => { 'a': 1, 'b': 2 }
15、zipObjectDeep
lodash.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]); // => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }
16、xor( 創建一個給定數組唯一值的數組 )
_.xor([2, 1], [2, 3]); // => [1, 3]