前端开发笔记

数组对象去重

在一个对象数组中，找出某一个对象在数组中的位置，直接使用 indexOf 不好使，因为对象是引用值，即使形状都一样，也是不相等的，因为他们引用的是不同的地址。
需要使用JSON.stringify() 进行转换之后作比较就可以了。

聊天界面时间段的区分

聊天的时间段拆分，五分钟之内发的消息放在一起，聊天只需要第一条展示时间，其他不用
每次都拿后面一个与前面一个作比较，找到某一个比较大于规定的值，则给这个值做一个标记。

/**
  * 拆分时间段
  * 连续的时间只要不大于五分钟，就判断为同一个时间段
  * 增加一个 showTime 标识，渲染的时候使用
  */
splitTimePeriod() {
  let {msgList} = this.data
  const tenMinutes = 5 * 60 * 1000
  for(let i = 0; i < msgList.length - 1; i ++) {
    if (msgList[i + 1].createTime - msgList[i].createTime > tenMinutes) {
      msgList[i + 1].showTime = true
    } 
  }
  msgList[0].showTime = true
  this.setData({
    msgList
  })
},

微信小程序的属性绑定

微信小程序中 data-后面的参数不能写驼峰，可以在驼峰之间加 -
data-curIndex => 使用 e.currentTarget.curindex 才可以访问
也可通过 - 连接驼峰
data-cur-Index => e.currentTarget.curIndex

如何对一个对象数组去重？

1）使用 JSON.stringify() 对每一项序列化，再配合使用 indexOf() 实现去重，
2）把对象的每一项中的某个属性的值设置为另外一个对象的key，如果key不存在，则表示没有重复。

function unique(arr) {
  const tempObj = {};
  const tempArr = [];
  arr.forEach(ele => {
  if (!tempObj[ele.id]) {
    tempObj[ele.id] = true
    tempArr.push(ele)
    }
  })
  return tempArr
}

function uniqueTwo(arr) {
  const tempObj = {}
  return arr.filter(ele => {
    if (!tempObj[ele.id]) {
      tempObj[ele.id] = true
      return ele
    }
  })
}

function uniqueThree(arr) {
  const tempObj = {}
  const targetArr = arr.reduce((cur, next) => {
    tempObj[next.id] ? '' : tempObj[next.id] = true && cur.push(next)
    return cur
    }, [])
  return targetArr
}

Vue 给对象新增属性页面不刷新

给一个对象新增一个属性，通过 . 或者 [] 的方法添加 vue 是无法做到响应式的
在接下来的操作中修改了这个属性，页面是不会刷新的，除非使用 this.set(obj, propName, value)

副作用

了解过函数式编程的同学对副作用这词肯定不陌生。它大致可以理解成：一个函数会、或者可能会对函数外部变量产生影响的行为。

如果判断当前代码的运行环境

typeof window !== 'undefined' && window.navigator.userAgent
首先判断是不是浏览器，如果是浏览器再会返回后面的浏览器信息
再根据 window.navigator.userAgent 中存在的设备信息字段对应即可（android/iphone/ipad）

vue 项目中安装 sass-loader 报错

// 报错
sass-loader && node-sass || less && less-loader
TypeError: this.getOptions is not a function

原因：sass-loader 或 less-loader 版本过高
解决：yarn add [email protected] -D
npm install [email protected] -D

如何让 console.log() 在生产环境中失效

在项目目录下，新建一个 xx.js 文件

export function rewirteLog() {
console.log = (function (log) {
  return process.env.NODE_ENV == 'development'? log : function() {}
  }(console.log))
}

然后在入口 js 文件中（vue为 main.js）引入该 js 即可，

微信小程序

• 小程序 button 点击反馈设置颜色
  有一个类名，button-active

• 微信小程序的属性绑定
  微信小程序中 data-后面的参数不能写驼峰，可以在驼峰之间加 -
  data-curIndex => 使用 e.currentTarget.curindex 才可以访问
  也可通过 - 连接驼峰
  data-cur-Index => e.currentTarget.curIndex

• 如何在微信小程序开发工具中识别小程序码中的内容？
  二维码编译

• 微信小程序button设置样式不生效
  去除微信小程序的默认边框

• open-data 样式 当type未 userAvatarUrl 时，需要给外层的容器设置 overflow:hidden; 才能实现圆角展示

• 一段不报错也不执行的代码

const num = 1
this.setData({
  num: num++
})
// 不报错，也不执行

• 微信小程序自定义tabbar