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>