常用的js整理

  • 1. 设置按钮不能重复点击
  • 2. 三元运算符替换if-else
  • 3.改变对象中某一属性值
  • 4.数组相关
  • 字符串分割成数组
  • 合并数组
  • 去除重复元素
  • 扩展运算符将字符串转为数组
  • 判断对象中是否存在某个属性时，hasOwnProperty 是唯一可用的方法
  • 数组对象根据字段去重
  • 5.异步执行Promise的使用
  • 6.浮点数快速向下取整
  • 7.循环
  • map 和 forEach
  • reduce
  • filter
  • sort
  • every
  • find 和 findIndex
  • 8.脱敏
  • 手机号
  • 身份证号
  • 银行卡号


1. 设置按钮不能重复点击

<button class='btnlogin' bindtap="{{!canSubmit?'submit':''}}">提交</button>
canSubmit默认false
  submit: function () {
    this.setData({
      canSubmit: true
    })
    //执行操作，操作结束后
    this.setData({
      canSubmit: false
    })
  }

2. 三元运算符替换if-else

this.type == 'add'? requsetAdd() : requestChange()

3.改变对象中某一属性值

var user = wx.getStorageSync('user');
 user['teamType'] = data.teamType;
 wx.setStorageSync('user', user);
this.setData({
   info: data,
   ['info.teamProfile']: data.teamProfile,
})

4.数组相关

字符串分割成数组

var arr = data.split("、");
this.setData({
  list: arr 
})

合并数组

//使用扩展运算符（...）

var arr1 = [1, 2, 3, 4];
var arr2 = [...arr1, 5, 6, 7, 8];
console.log(arr2);

结果：
[1, 2, 3, 4, 5, 6, 7, 8]

去除重复元素

//使用扩展运算符
var arr1 = [1, 1, 2, 2, 3, 3, 3];
var arr2 = [...new Set(arr1)];
console.log(arr2);

结果：
[1, 2, 3]
//使用filter
var arr = [1, 1, 2, 2, 3, 3, 3];
var arrNew = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});
console.log(arrNew);

结果：
[1, 2, 3]
//通过Set对象，对数组去重，结果又返回一个Set对象
//通过from方法，将Set对象转为数组
Array.from(new Set(arr))

扩展运算符将字符串转为数组

var str = "hello";
var strArr = [...'hello']
console.log(strArr)

结果：
[ "h", "e", "l", "l", "o" ]

判断对象中是否存在某个属性时，hasOwnProperty 是唯一可用的方法

for(var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, ':' + obj[i]);
    }
}

数组对象根据字段去重

export const uniqueArrayObject = (arr, key) => {
  if (arr.length === 0) return
  let list = []
  const map = {}
  arr.forEach((item) => {
    if (!map[item[key]]) {
      map[item[key]] = item
    }
  })
  list = Object.values(map)
  return list
}

const arrList = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
    { id: 1, name: '王五' },
    { id: 2, name: '张三' },
    { id: 3, name: '李四' },
    { id: 1, name: '李四' },
    { id: 2, name: '王五' },
    { id: 3, name: '张三' },
]
uniqueArrayObject(arrList, 'name')
// [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王五' }]

5.异步执行Promise的使用

获取审核状态根据状态判断是否跳转完善信息

//获取审核状态
var getState = function () {
  var app = getApp();
  return new Promise(function (resolve, reject) {
    wx.request({
      url: app.globalData.url,
      method: "POST",
      success: function (res) {
        console.log("审核状态", res)
        if (res.data.success == true) {
          var data = res.data.data;
          resolve(data.platformAuditStatus);
        } else {
          resolve(0);
        }
      },
      fail: function () {
        reject(0);
      }
    })
  })

}
//根据状态判断跳转还是继续执行
var judge = function (state) {
  return new Promise(function (resolve) {
    if (state != 1) {
      wx.showToast({
        title: '请完善个人信息',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.redirectTo({
          url: '/pages/myMessage/myMessage',
        })
      }, 1000)
      resolve(false);
    } else {
      resolve(true);
    }
  })

}
//验证是否已审核，否则跳去完善个人信息
function canNavigate() {
  var isTrue = getState().then(res => {
    judge(res).then(result => {
      return result;
    })
  })
  return isTrue;
}
if (utils.canNavigate()) {
   //需要执行的操作
}

6.浮点数快速向下取整

(12.4 / 4.13) | 0
// => 3
~~(12.4 / 4.13)
// => 3

7.循环

【1】遍历对象用for…in(数组也可以用实际还是把数组当成对象去遍历)
【2】简单遍历数组用for或forEach或for of
【3】需要将数组按照某种规则映射为另一个数组就应该用map()

map 和 forEach

  • forEach允许callback更改原始数组的元素，没有返回值。对于空数组是不会执行回调函数的。
    使用场景： 并不改变数据，而只是想存入数据库或者打印出来。
var arr = [1, 2, 3, 4, 5];
var a=arr.forEach(function(value,index,arr){
    value=value+7
})
console.log(a)
console.log(arr)

结果：
undefined
[1, 2, 3, 4, 5]

forEach()针对每一个元素执行提供的函数，对数据的操作会改变原数组。

var arr = [1, 2, 3, 4, 5];
var a=arr.forEach(function(value,index,arr){
    arr[index] = value+7
})
console.log(a)
console.log(arr)

结果：
undefined
[8, 9, 10, 11, 12]
  • map返回一个新数组，不会改变原数组。map() 不会对空数组进行检测。
    使用场景： 要改变数据值，返回一个新数组的时候。
var arr = [1, 2, 3, 4, 5];
var a=arr.map(function(value,index,arr){
    return value + 7
})
console.log(a)
console.log(arr)

结果：
[8, 9, 10, 11, 12]
[1, 2, 3, 4, 5]

forEach()和 map() 相同点：
（1）只能循环遍历数组，遍历对象报错forEach/map is not a function
（2）forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中当前项item,当前项的索引index,原始数组arr。
（3）匿名函数中的this都是指Window。

forEach()和 map() 不同点：
（1）forEach() 没有返回值；map() 有返回值，可以return 出来。

reduce

这个函数必须接收两个参数，把结果继续和序列的下一个元素做累积计算

//比如对Array求和，就可以用reduce实现：
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

filter

“筛选”，把Array的某些元素过滤掉，然后返回剩下的元素

sort

“排序”，sort()方法默认把所有元素先转换为String再排序，不能直接对数字排序
[10, 20, 1, 2].sort(); //结果： [1, 10, 2, 20]

arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]
//sort()方法直接对Array进行修改，它返回的结果仍是当前Array
var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一对象

every

every()方法判断数组的所有元素是否满足测试条件。

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.every(function (s) {
    return s.length > 0;
})); // true, 因为每个元素都满足s.length>0

console.log(arr.every(function (s) {
    return s.toLowerCase() === s;
})); // false, 因为不是每个元素都全部是小写

find 和 findIndex

find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined
findIndex()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素的索引，否则，返回-1

8.脱敏

手机号

export const hideMobile = (mobile) => {
  //显示前3和后4
  return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
}

身份证号

export const hideIdCard = (idCard) => {
  //显示前6和后4
  return idCard.replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
}

银行卡号

export const hideCard = (card) => {
  //显示前4和后4
  let str = ""
  for (var i = 0; i < card - 8; i++) {
    str += '*'
  }
  return card.replace(/^(.{4})(?:\d+)(.{4})$/, `$1${str}$2`)
}