前端小整理

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