在vue-cli中引入lodash.js并使用

2024-04-03 20:40:22

在vue-cli中引入lodash.js并使用

lodash是一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数。
中文文档： https://www.lodashjs.com/docs/4.17.5.html
lodash的所有函数都不会在原有的数据上进行操作，而是复制出一个新的数据而不改变原有数据
模块的组成：
- Lodash 提供的辅助函数主要分为以下几类：
  Array，适用于数组类型，比如填充数据、查找元素、数组分片等操作
  Collection，适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作
  Function，适用于函数类型，比如节流、延迟、缓存、设置钩子等操作
  Lang，普遍适用于各种类型，常用于执行类型判断和类型转换
  Math，适用于数值类型，常用于执行数学运算
  Number，适用于生成随机数，比较数值与数值区间的关系
  Object，适用于对象类型，常用于对象的创建、扩展、类型转换、检索、集合等操作
  Seq，常用于创建链式调用，提高执行性能（惰性计算）
  String，适用于字符串类型

常用方法：（有很多，可查看文档）

times：循环N次
_.times(5, function(){ // ... });
cloneDeep：深度克隆JavaScript对象
var objB = _.cloneDeep(objA);
random：在指定范围内获取一个随机值
_.random(20); // 返回 0 到 20的随机数 _.random(15, 20, true); // 返回 15 到 20的浮点型随机数;

assign：扩展对象

var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};

_.assign(objA, objB););

omit：从对象中删除属性

var objA = {"name": "colin", "car": "suzuki", "age": 17};
bjA = _.omit(objA, ['car', 'age']); // {"name": "colin"}

forEach：对集合中的元素进行遍历，调用function （迭代函数）遍历 collection中的每个元素，function如果显式的返回 false ，迭代会提前退出。
_.forEach(collection, function (value, index, collection){})
map: 创建一个数组，value（值）是 function（迭代函数）遍历 collection中的每个元素后返回的结果。某次迭代的返回值可能是null
_.map(collection, function (value, index, collection){})

			    
			let arr = [
			    {
			       id: '1',
			       name: '山有木兮木有枝',
			       age: 23,
			       createTime: '2018-12-12'
			    },
			    {
			       id: '2',
			       name: '心悦君兮君不知',
			       age: 31,
			       createTime: '2018-12-13'
			    }
			    // 其余省略
			    _.map(arr, 'id')    // => [1, 2]  //只用到id

find: 返回 function（断言函数）第一个返回真值的第一个元素。如果没有匹配元素返回undefined

_.find(collection, function (value, index, collection){})

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

_.find(users, function(o) { return o.age < 40; });
// => object for 'barney'

_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'

_.find(users, 'active');

// => object for 'barney'

在vue里面使用lodash.js
下载: npm i --save lodash,在package.json中显示，则表示下载成功
在main.js中使用：
import _ from "lodash";
在页面中使用： let data = _.cloneDeep(this.userInfoData)
在项目中使用：

    roleAll.post({projectCode:projectCode,organizeId:organizeId}, this).then(res => {
        if (this._.isArray(res)) {  //判断后端返回的数据类型
          //console.log(res)
          this.roleARR = res
        }
      })

webpack按需打包lodash.js

下载：

npm install lodash --save
npm install lodash-webpack-plugin babel-plugin-lodash --save-dev

第二行的部分插件 webpack 模板已经默认安装

修改 .babelrc
plugins 中添加 lodash，我的项目添加完如下：
"plugins": ["transform-vue-jsx", "transform-runtime", "lodash"]

修改 webpack.prod.config.js
由于我只需要打包时体积小即可，所以添加到这个配置文件中

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

  // 省略
  plugins: [
    new LodashModuleReplacementPlugin(),
    // 你的其他配置
  ]

补充：如何在vue项目打包去掉console？
在项目中的build/webpack.prod.conf.js文件中

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_debugger: true,
    drop_console: true
  },

添加此配置就可以在打包之后去掉控制台的打印输出

码农公寓

在vue-cli中引入lodash.js并使用

相关文章