zoukankan      html  css  js  c++  java
  • JS lodash学习笔记

    <template>
      <div>Hello Lodash</div>
    </template>
    
    <script>
    var _ = require("lodash");
    export default {
      mounted() {
        this.test();
      },
      methods: {
        test1: function() {
          //N次循环
          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);
          });
        },
        test2: function() {
          //深层查找属性值/
          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);
        },
        test3: function() {
          //深克隆对象
          var objA = {
            name: "Tom"
          };
          var objB = _.cloneDeep(objA);
          console.log(objA);
          console.log(objB);
          console.log(objA === objB);
        },
        test4: function() {
          //在指定范围内获取一个随机值
          function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
          }
          console.log(getRandomNumber(15, 20));
          console.log(_.random(15, 20));
          console.log(_.random(15, 20, true));
        },
        test5: function() {
          //扩展对象
          Object.prototype.extend = function(obj) {
            for (var i in obj) {
              if (obj.hasOwnProperty(i)) {
                //判断被扩展的对象有没有某个属性,
                this[i] = obj[i];
              }
            }
          };
          var objA = {
            name: "Tom",
            car: "宝马"
          };
          var objB = {
            name: "Sam",
            loveEat: true
          };
          objA.extend(objB);
          console.log(objA);
          console.log(_.assign(objA, objB));
        },
        test6: function() {
          //从列表中随机的选择列表项
          var smartTeam = ["Tom", "Bob", "Sam", "Jack"];
    
          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));
        },
        test7: function() {
          //判断对象中是否含有某元素
          var smartPerson = {
              name: "Tom",
              gender: "male"
            },
            smartTeam = ["Tom", "Bob", "Sam", "Jack"];
          console.log(_.includes(smartPerson, "Tom"));
          console.log(_.includes(smartTeam, "Bob"));
          console.log(_.includes(smartTeam, "Bob", 2));
        },
        test8: function() {
          //遍历循环
          _([1, 2]).forEach(function(value) {
            console.log(value);
          });
          _.forEach([1, 3], function(value, key) {
            console.log(key, value);
          });
          _.forEach(
            {
              name: "Tom",
              age: 26
            },
            function(value, key) {
              console.log(key, value);
            }
          );
        },
        test9: function() {
          //遍历循环执行某个方法
          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']
        },
        test10: function() {
          //检验值是否为空
          console.log(_.isEmpty(null));
          console.log(_.isEmpty(0));
          // => true
          console.log(_.isEmpty(true));
          // => true
          console.log(_.isEmpty(1));
          // => true
          console.log(_.isEmpty([1, 2, 3]));
          // => false
          console.log(
            _.isEmpty({
              a: 1
            })
          );
          // => false
        },
        test11: function() {
          //查找属性
          var users = [
            {
              user: "barney",
              age: 36,
              active: true
            },
            {
              user: "fred",
              age: 40,
              active: false
            },
            {
              user: "pebbles",
              age: 1,
              active: true
            }
          ];
          console.log(
            _.find(users, function(o) {
              return o.age < 40;
            })
          );
          console.log(
            _.find(users, {
              age: 1,
              active: true
            })
          );
          console.log(
            _.filter(users, {
              age: 1,
              active: true
            })
          );
          console.log(_.find(users, ["active", false]));
          console.log(_.filter(users, ["active", false]));
          console.log(_.find(users, "active"));
          console.log(_.filter(users, "active"));
        },
        test: function() {
          //数组去重
          // 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));
          console.log(_.uniqBy([2.1, 1.2, 2.3], Math.floor));
          // => [2.1, 1.2]
          console.log(_.uniqBy([{ x: 1 }, { x: 2 }, { x: 1 }], "x"));
          // => [{ 'x': 1 }, { 'x': 2 }]
        }
      }
    };
    </script>
    
    <style>
    </style>
    
    
  • 相关阅读:
    LeetCode OJ 107. Binary Tree Level Order Traversal II
    LeetCode OJ 116. Populating Next Right Pointers in Each Node
    LeetCode OJ 108. Convert Sorted Array to Binary Search Tree
    LeetCode OJ 105. Construct Binary Tree from Preorder and Inorder Traversal
    LeetCode OJ 98. Validate Binary Search Tree
    老程序员解Bug的通用套路
    转载 四年努力,梦归阿里,和大家聊聊成长感悟
    转载面试感悟----一名3年工作经验的程序员应该具备的技能
    Web Service和Servlet的区别
    关于spring xml文件中的xmlns,xsi:schemaLocation
  • 原文地址:https://www.cnblogs.com/KevinTseng/p/13164366.html
Copyright © 2011-2022 走看看