vue中判断数据是否在数组中_vue开发中随机生成mock数据

写在前言

这是一篇很简短的文章，主要是总结我平常开发的一些小技巧，如果你是大佬，就没必要再往下读了，还不如去玩2077

正文

在平常用vue写页面的时候，比如那些列表数据，table啊,list啊，tags等等这种，通过v-for循环跑出来的列表数据，

有时候我们为了看页面效果，都要在data里面自己手写一些数据进去，

如果纯手写就太浪费时间了，10条还好，假设是100条，总不能copy100次吧。

假设现在我们要开发一个表格功能，我这里使用的ui组件是ant-design-vue,从官网copy一个简单的demo下来查看他的代码，发现data是这样定义的假设我们要给他加上100条数据，那么我们可以这么操作

const data = [...new Array(100).keys()].map((idx) => ({
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
  tags: ['nice', 'developer']
}));

可以看到100条数据加载出来了

但是有个问题，每一条数据都是一样的，并且key是一样，for循环会报错，怎么解决，很简单，把idx带上去就行了

const data = [...new Array(100).keys()].map(() => ({
  key: idx, // 加上idx
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
  tags: ['nice', 'developer']
}));

第一个问题解决了，还有个问题，如果我想生成随机字符串呢，那我们可以搞个随机字符串数组

const textArr = ['测试','内容','反正随便写','我卧推能推150斤','贼强好吧兄弟'] 

让他随机起来，每次都取随机的

const getRandomText=(textArr)=>(textArr[Math.floor(Math.random()*textArr.length)]) //随机取字符串

然后把它们丢进循环里面，每次取随机

const textArr = ['测试','内容','反正随便写','我卧推能推150斤','贼强好吧兄弟']
const getRandomText=(textArr)=>(textArr[Math.floor(Math.random()*textArr.length)])
getRandomText(textArr)
const data = [...new Array(100).keys()].map((idx) => ({
  key: idx,
  name: getRandomText(textArr),
  age:getRandomText(textArr),
  address: getRandomText(textArr),
  tags: [getRandomText(textArr), getRandomText(textArr)]
}));

运行下，效果还是可以的

封装

额，想到以后其他地方可能还要用，封装成一个公共方法吧

/**
 * @param {object} objType 生成的对象类型
 * @param {number} nums 生成多少个
 * @returns
 */
const createRandomData = (objType, nums) => {
  return [...new Array(nums).keys()].map(item => {
    const text =  ['测试','内容','反正随便写','我卧推能推150斤','贼强好吧兄弟']
    const arr = Object.keys(objType)
    const obj = {}
    while (arr.length) {
      obj[arr.pop()] = text[Math.floor(Math.random() * text.length)]
      obj.id = item
    }
    return obj
  })
}

使用的时候就根据后端接口文档类型生成对应字段的对象数组

createRandomData(
        {
          key: '',
          name: '',
          age: '',
          address: '',
          tags: '',
        },
        10
      )

嗯，，好像tags是数组来着的，那么我们继续优化下，抽离下通用逻辑，然后再用加上一些类型判断

/**
 *
 * 生成随机数
 * @param {number} n
 * @returns number
 */
const handleRandom = n => Math.floor(Math.random() * n)

/**
 * 生成随机字符串数组
 *
 * @param {array} textArr 字符串数据模板
 * @param {number} nums 次数
 * @returns array
 */
const randomText = (textArr, nums) => {
  const arr = [...new Array(nums).keys()]
  return arr.slice(handleRandom(arr.length)).map(idx => textArr[Math.floor(Math.random() * textArr.length)] + idx)
}

const textArr = ['测试', '内容', '反正随便写', '我卧推能推150斤', '贼强好吧兄弟']

/**
 *
 *
 * @param {array} textArr 字符串模板数组
 * @param {object} objType 生成的对象类型
 * @param {number} nums 生成多少个
 * @returns array
 */
const createRandomData = (textArr, objType, nums) => {
  return [...new Array(nums).keys()].map(idx => {
    const arr = Object.keys(objType)
    const obj = {}
    while (arr.length) {
      const key = arr.pop()
      // 如果是惟一的
      if (objType[key] === 'id') {
        obj[key] = idx
      }
      // 如果是数组
      if (Array.isArray(objType[key])) {
        // 最大循环几次
        const n = objType[key][0]
        obj[key] = randomText(textArr, n)
      }
      obj[arr.pop()] = textArr[handleRandom(textArr.length)]
    }
    return obj
  })
}

使用

const data = createRandomData(textArr, {
  key: 'id',
  name: '',
  age: '',
  address: '',
  tags: [3] //最多循环3次
},100);

看下效果，简直完美

扩展优化

那么还可以怎么优化，比如我是个懒比，我讨厌写模板字符串数组，咋整？

那可以这么做，对字符串中某个符号进行分割，不就成数组了吗，比如逗号

/**
 * 根据不同分隔符分割文本成数组
 *
 * @param {string} text 文本
 * @param {*} separator 分隔符
 */
const splitText = (text, separator) => text.replace(/\n+|\s+|\r+/g, '').split(separator)

去找一段文本先，就找我以前写的那篇node.js抢票里随便一段文本，比如这个

let text = `根据上面的分析，总结下内容：
整个项目用户身份验证是使用cookie和session方案，请求数据用的是form data方式，请求字段啥的我们也都清楚，唯独有一点，就是请求余票的时候，返回的是html节点代码，而不是我们预期的json数据，这样就有个麻烦，我们没办法一目了然的明白他余票的时候是如何显示的
所以我们只能通过chrome进行调试，才能得出他是如何判断余票的。
我们找个记事本，记录下信息，记录的内容有：
请求余票接口和购票接口的url地址
cookie信息
各自的request参数字段
user-Agent信息
各自的response返回内容
作者：西岚
链接：https://juejin.cn/post/6844903975301595150
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`;
const splitText = (text, separator) =>
  text.replace(/\n+|\s+|\r+/g, '').split(separator);
const textArr = splitText(text, '，');
console.log(textArr); 

打印一下，发现能切割成数组(这不废话吗..)

然后把它丢进我们的写的那个js里面,运行下额。。效果贼烂

改下分割函数，试下歌曲，就拿十二生肖吧看下效果嗯，，还可以，

写在最后

总之，我只是提供一个思路，你们可以根据自己情况自定义

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。——文森特・梵高