前端小整理

javascript

剔除对象不须要的属性的值

const obj = {
name: 'detanx',
age: 24,
height: 180
}
// 剔除height
const { height, ...otherObj } = obj;
// otherObj => {name: 'detanx', age: 24}
复制代码

剔除数组不须要的项

const arr = ['detanx', 24, 180]
// 剔除 第一项
const [ name, ...otherArr ] = arr;
// otherArr => [24, 180]
复制代码

在解构中使用别名

const object = { number: 10 }

const { number } = object

// 使用别名
const { number: otherNumber } = object

console.log(otherNumber) //10
复制代码

es6合并对象/数组

const result = {...obj1, ...obj2, ...obj3}
const result2 = [...arr1, ...arr2, ...arr3]
复制代码

很容易的实现数组和对象的 浅拷贝

const obj = { ...oldObj }
const arr = [ ...oldArr ]
复制代码

寻找数组中的最大值/计算数组的总和

// 寻找数组中的最大值
const max = (arr) => Math.max(...arr);
max([123, 321, 32]) // outputs: 321
// 计算数组的总和
const sum = (arr) => arr.reduce((a, b) => (a + b), 0)
sum([1, 2, 3, 4]) // output: 10
复制代码

ES6语法find查找id，匹配数组

let myId = 3;
let data = [
    {id:1,value:false},
    {id:2,value:false},
    {id:3,value:false}
];
var findVal = data.find(item => {
    return item.id === myId;
});
findVal.value = true; //修改匹配项的值
console.log(findVal); // 打印匹配项数据
复制代码

JavaScript 使小数点后面不足2位数补0

function formatnumber(value, num){
  let _value = value.toString();
  let _dot = _value.indexOf(".");
  let _valueLen  = _value.length;
  if (num == 0) {
      if (_dot != -1) {
          _value = _value.substring(0, _dot);
      }
  } else {//若是没有小数点
      if (_dot == -1) {
          _value = _value + ".";
          for (let i = 1; i <= num; i++) {
              _value = _value + "0";
          }
      } else {//有小数点，超出位数自动截取，不然补0
          _value = _value.substring(0, _dot + num + 1);
          for (let i = _valueLen; i <= _dot + num; i++) {
              _value = _value + "0";
          }
      }
  }
  return _value;
}

formatnumber(3.1,2) // 3.10
复制代码

错误状态码处理

根据状态的不一样，而后方法也不一样，能够这样作

var codeFun = {
    0:function(){
        //do
        //正确
    },
    1:function(){
        //do
        alert('帐号错误')
    },
    2:function(){
        //do
        alert('密码错误')
    }
}
调用： codeFun[code]();
复制代码

小程序

微信小程序商品抢购倒计时

timeFormat:function(n) {
    return n >= 0 && n < 10 ? '0' + n : '' + n;
  },
  getDate: function () {
    var obj = null;
    var countDownArr = [];
    var oDate = new Date(); //获取如今日期对象
    var oldTime = oDate.getTime(); //如今距离1970年的毫秒数
    var newDate = new Date('2019/1/30 00:00:00'); //获取指定日期对象
    var newTime = newDate.getTime(); //2018年距离1970年的毫秒数
    var second = Math.floor((newTime - oldTime) / 1000); //将来时间距离如今的秒数
    var day = Math.floor(second / 86400); //整数部分表明的是天；一天有24*60*60=86400秒 ；
    second = second % 86400; //余数表明剩下的秒数；
    var hour = Math.floor(second / 3600); //整数部分表明小时；
    second %= 3600; //余数表明 剩下的秒数；
    var minute = Math.floor(second / 60);
    second %= 60;
    obj = {
      day: this.timeFormat(day),
      hou: this.timeFormat(hour),
      min: this.timeFormat(minute),
      sec: this.timeFormat(second)
    } 
    countDownArr.push(obj);
    this.setData({
      countDownList: countDownArr
    })
    setInterval(this.getDate, 1000); //
},
 onLoad: function (options) {
    this.getDate();
 }
 


<view wx:for="{{countDownList}}" wx:key="countDownList">
    <text>{{item.day}}</text>天
    <text>{{item.hou}}</text>时
    <text>{{item.min}}</text>分
    <text>{{item.sec}}</text>秒
  </view>
复制代码

小程序多图上传

uploadimg: function (data) { // 2M
      var i = data.i ? data.i : 0, //当前上传的哪张图片
      success = data.success ? data.success : 0, //上传成功的个数
      fail = data.fail ? data.fail : 0; //上传失败的个数
    wx.uploadFile({
      url: data.url,
      filePath: data.path[i],
      name: 'file', //这里根据本身的实际状况改
      formData: { //这里是上传图片时一块儿上传的数据
        scope: 'qpp', 
        auth: 'Px50C^t*&k7mGSnu'
      },
      success: (res) => {
        var data = JSON.parse(res.data)
        let uploadimgPath = []
        uploadimgPath.push(data.data.items.file[0].filename);
        wx.setStorageSync('uploadimgPath', uploadimgPath);
        success++; //图片上传成功，图片上传成功的变量+1
        console.log(res.data)
        console.log(i);
        //这里可能有BUG，失败也会执行这里,因此这里应该是后台返回过来的状态码为成功时，这里的success才+1 
      },
      fail: (res) => {
        fail++; //图片上传失败，图片上传失败的变量+1
        console.log('fail:' + i + "fail:" + fail);
      },
      complete: () => {
        console.log(i);
        i++; //这个图片执行完上传后，开始上传下一张            
        if (i == data.path.length) { //当图片传完时，中止调用          
          console.log('执行完毕');
          console.log('成功：' + success + " 失败：" + fail);
        } else { //若图片尚未传完，则继续调用函数                
          console.log(i);
          data.i = i;
          data.success = success;
          data.fail = fail;
          this.uploadimg(data);
        }
      }
    });
  },
复制代码

使用

遍历图片得到新数组：
const { list } = this.data;
let arrList = []; // 数据内的团图片
for (let value of list.pictures) {
  arrList.push(value.url)
}
this.uploadimg({
    url: `接口地址`,
    path: arrList //这里是选取的图片的地址数组
});
复制代码

另外一种 设置微信程序导航标题

onLoad() {
    wx.setNavigationBarTitle({
      title: `首页`
    })
  },
复制代码

react

vue