<html> <head> <meta name="viewport" content="width=device-width" /> <title>Lodash使用示例</title> <script src="~/Js/lodash.core.min.js"></script> <script> var users = [ { 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }, { 'user': 'pebbles', 'age': 18 } ]; var nums = [1, 2, 3]; /*****************************查找****************************************/ var names = _ .chain(users) .map(function (o) { return o.user; }) .join(",") .value(); console.log(names); // => barney,fred,pebbles console.log(_.find(users, function (o) { return o.age >= 40; })); // => object for 'fred' /******************************查找***************************************/ var oldest = _ .chain(users) .sortBy('age') .map(function (o) { return '最年長的是：' + o.user + ' is ' + o.age; }) .last() .value(); console.log(oldest); // => 最年長的是：fred is 40 /*************************************************************************/ var youngest = _ .chain(users) .sortBy('age') .map(function (o) { return '最年輕的是：' + o.user + ' is ' + o.age; }) .head() .value(); console.log(youngest); // => 最年輕的是：pebbles is 18 /*************************************************************************/ var userObj = _.chain(users) .map(function (o) { return [o.user, o.age]; }) .value(); console.log(userObj[0]); // => ["barney", 36] /*************************************************************************/ /* 創建一個新數組，包含原數組中所有的非假值元素。 例如false, null, 0, "", undefined, 和 NaN 都是被認為是“假值”。 */ var compact = _.compact([0, 1, false, 2, '', 3]); console.log(compact); // => [1, 2, 3] /*************************************************************************/ /* _.difference(array, [values]) array (Array): 要檢查的數組。 [values] (...Array): 排除的值。 */ //var difference = _.difference([3, 2, 1], [4, 2]); console.log(_.difference([3, 2, 1], [4, 2])); // => [3, 1] /*************************************************************************/ var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; var differenceWith = _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual); console.log(differenceWith); // => [{ 'x': 2, 'y': 1 }] /*************************************************************************/ //創建一個切片數組，去除array前面的n個元素。（n默認值為1。） console.log(_.drop(nums, nums.length - 1)); // => [3] /*************************************************************************/ //創建一個切片數組，去除array尾部的n個元素。（n默認值為1。） console.log(_.dropRight(nums, nums.length - 1)); // => [1] /*************************************************************************/ console.log(_.dropWhile(users, function (o) { return o.age == 36; })); // => objects for ['fred', 'pebbles'] /*************************************************************************/ //返回找到元素的 索引值（index），找不到則返回 -1。 console.log(_.findIndex(users, function (o) { return o.user == 'fred'; })); // => 1 /*************************************************************************/ console.log(_.head([3, 2, 1])); console.log(_.first([3, 2, 1])); // => 3 /*************************************************************************/ //返回 值value在數組中的索引位置, 沒有找到為返回-1。 console.log(_.indexOf([1, 2, 3, 2], 2)); // => 1 /*************************************************************************/ //去除數組array中的最后一個元素 console.log(_.initial([1, 2, 3])); // => [1, 2] /*************************************************************************/ //返回一個包含所有傳入數組交集元素的新數組 console.log(_.intersection([2, 1], [4, 2], [1, 2])); // => [2] /*************************************************************************/ var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }]; console.log(_.intersectionWith(objects, others, _.isEqual)); // => [{ 'x': 1, 'y': 2 }] console.log(_.join(['a', 'b', 'c'], ',')); // => a,b,c //返回array中的最后一個元素 console.log(_.last([1, 2, 3])); // => 3 //獲取array數組的第n個元素 索引從0開始，如果n為負數，則返回從數組結尾開始的第n個元素 console.log(_.nth([1, 2, 3], 1)); // => 2 console.log(_.nth([1, 2, 3, 4], -1)); // => 4 /*************************************************************************/ //移除數組array中所有和給定值相等的元素 console.log(_.pull([1, 2, 3, 1, 2, 3], 2, 3)); // => [1, 1] console.log(_.pullAll([1, 2, 3, 1, 2, 3], [2, 3])); // => [1, 1] //這個方法類似於_.pullAll //區別是這個方法接受一個 iteratee（迭代函數），通過產生的值進行了比較。 console.log(_.pullAllBy( [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }], [{ 'x': 1 }, { 'x': 3 }], 'x')); // => [{ 'x': 2 }] console.log(_.pullAllWith( [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }], [{ 'x': 3, 'y': 4 }], _.isEqual)); // => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }] /*************************************************************************/ //返回被移除元素組成的新數組。 var array = [5, 10, 15, 20]; var evens = _.pullAt(array, 1, 3); console.log(array); // => [5, 15] console.log(evens); // => [10, 20] /*************************************************************************/ //返回被移除元素組成的新數組。 var array = [1, 2, 3, 4]; var evens = _.remove(array, function (n) { return n % 2 == 0; }); console.log(array); // => [1, 3] console.log(evens); // => [2, 4] console.log(_.reverse([1, 2, 3])); // => [3, 2, 1] //_.slice(array, [start=0], [end=array.length]) //裁剪數組array，從 start 位置開始到end結束，但不包括 end 本身的位置 console.log(_.slice([1, 2, 3], 1)); // => [2, 3] //返回一個新的不重復的數組 console.log(_.uniq([1, 1, 2, 1, 1, 2, 3])); // => [1, 2, 3] var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }]; console.log(_.uniqWith(objects, _.isEqual)); // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }] /*************************************************************************/ var arr = [ { name: 'aa', age: 22 }, { name: 'bb', age: 18 }, { name: 'cc', age: 40 } ]; console.log(_.sortBy(arr, function (o) { return o.age; })); console.log(_.sortBy(arr, ['age'])); //可多字段排序['name','age'] console.log(_.groupBy([6.1, 4.2, 6.6], Math.floor)); // => { '4': [4.2], '6': [6.1, 6.3] } /*****************************循環***************************************/ _([1, 2]).forEach(function (value) { console.log(value); }); // => Logs '1' then '2' _.forEach({ 'a': 1, 'b': 2 }, function (value, key) { console.log(key + " " + value); }); // => Logs 'a 1' then 'b 2' /*****************************查找***************************************/ var collection1 = [ { name: 'aa', age: 20, gender: 'm' }, { name: 'bb', age: 21, gender: 'f' }, { name: 'cc', age: 22, gender: 'm' } ]; /*****************************包含***************************************/ console.log(_.includes({ 'user': 'fred', 'age': 40 }, 'fred')); // => true /*****************************包含***************************************/ function square(n) { return n * n; } console.log(_.map([4, 8], square)); // => [16, 64] /*****************************排序***************************************/ var users = [ { 'user': 'fred', 'age': 48 }, { 'user': 'barney', 'age': 34 }, { 'user': 'fred', 'age': 40 }, { 'user': 'barney', 'age': 36 } ]; // 以 `user` 升序排序 再 `age` 以降序排序。 console.log(_.orderBy(users, ['user', 'age'], ['asc', 'desc'])); // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]] /*****************************長度***************************************/ console.log(_.size([1, 2, 3])); // => 3 console.log(_.size('pebbles')); // => 7 console.log(_.size('歌曲abc')); // => 5 //now 獲得 Unix 紀元 (1 January 1970 00:00:00 UTC) 直到現在的毫秒數。 //var temp = _.defer(function (stamp) { // console.log(_.now() - stamp); //}, _.now()); //console.log(_.now() + "______" + temp); /*****************************強制轉換數組************************************/ //如果不是數組, 那么強制轉為數組。 console.log(_.castArray(1)); // => [1] console.log(_.castArray({ 'a': 1 })); // => [{ 'a': 1 }] console.log(_.castArray('abc')); // => ['abc'] /*****************************拷貝************************************/ //_.clone(value) 創建一個 value 的淺拷貝 var objects = [{ 'a': 1 }, { 'b': 2 }]; var shallow = _.clone(objects); console.log(shallow[0] === objects[0]); // => true /*****************************等於************************************/ var object = { 'a': 1 }; var other = { 'a': 1 }; console.log(_.eq(object, object)); // => true console.log(_.eq(object, other)); // => false console.log(_.eq(1, 1)); // => false console.log("--------------------------------------------------------"); /*****************************大於************************************/ console.log(_.gt(3, 1)); // => true /*****************************大於等於********************************/ console.log(_.gte(3, 3)); // => true /*****************************小於************************************/ console.log(_.lt(1, 3)); // => true /*****************************小於等於********************************/ console.log(_.lte(3, 3)); // => true //是否數組 console.log(_.isArray([1, 2, 3])); // => true console.log(_.isArray('abc')); // => false //是否boolean型 console.log(_.isBoolean(false)); // => true console.log("--------------------------------------------------------"); //是否日期類型 console.log(_.isDate('02 31 2017')); // => false console.log(_.isDate(new Date)); // => true //是否整數 console.log(_.isInteger(3)); // => true console.log(_.isInteger(3.1)); // => false console.log(_.isInteger('3')); // => false //是否字符串 console.log(_.isString('abc')); // => true console.log(_.isString(1)); // => false /*****************************轉換成數組********************************/ console.log(_.toArray('abc')); // => ['a', 'b', 'c'] //向上取精度 _.ceil(number, [precision=0]) console.log(_.ceil(6.014, 2)); // => 6.02 //向下取精度 _.floor(number, [precision=0]) console.log(_.floor(6.014, 2)); // => 6.01 //四舍五入取精度 console.log(_.round(4.006, 2)); // => 4.01 //返回最大數 console.log(_.max([4, 2, 8, 6])); // => 8 console.log(_.maxBy(users, function (o) { return o.age })); // => {user: "fred", age: 48} //返回平均值 console.log(_.mean([4, 2, 8, 6])); // => 5 console.log(_.meanBy(users, function (o) { return o.age })); // => 39.5 //返回最小數 console.log(_.min([4, 2, 8, 6])); // => 2 console.log(_.minBy(users, function (o) { return o.age })); // => {user: "barney", age: 34} //求和 console.log(_.sum([4, 2, 8, 6])); // => 20 console.log(_.sumBy(users, function (o) { return o.age })); // => 158 //檢查字符串string是否以給定的target字符串開始 console.log(_.startsWith('abc', 'a')); // => true //檢查字符串string是否以給定的target字符串結尾 console.log(_.endsWith('abc', 'c')); // => true /*****************************Pad填充********************************/ console.log(_.pad('abc', 8, '#')); // => ##abc### console.log(_.padEnd('abc', 8, '#')); // => abc##### console.log(_.padStart('abc', 8, '#')); // => #####abc console.log(_.repeat('abc', 2)); // => 'abcabc' console.log(_.repeat('abc', 0)); // => '' console.log(_.replace('Hi Fred Fred', 'Fred', 'Barney')); // => 'Hi Barney Fred' console.log(_.trim('##abc###', '#')); // => abc console.log(_.trimStart('##abc###', '#')); // => abc### console.log(_.trimEnd('##abc###', '#')); // => #abc console.log(_.truncate('hi-diddly-ho there, neighborino', { 'length': 5 })); // => hi... </script> </head> <body> <div> </div> </body> </html>