vue项目中lodash的使用

最新推荐文章于 2024-12-25 16:59:03 发布

原创最新推荐文章于 2024-12-25 16:59:03 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5

本文介绍了如何通过npm安装并引入Lodash，展示了其丰富的功能，如循环、深拷贝、随机数生成、对象操作和错误处理等，帮助开发者提升JavaScript开发效率。

1，安装Lodash，通过npm安装，如下：

npm install --save lodash

2，引入loadsh,在组件的行为区域，在export default{}前导入lodash

import _ from 'lodash';

3.在页面中可以用 “_”来应用

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));
  }
},