js优化项目常用小技巧

1.等一个函数执行完之后，再执行另一个(es6中promise)

 

methods:{
    checkForm(){
         return new Promise((resolve,reject)=>{
              if(flag)  {
                resolve(66); //当满足条件后，才resolve
              } 
         })
     },
    submit(){
       this.checkForm().then(res=>{
        console.log(res)  //66
        })
    }
}

当有多个方法的时候，用以下的方法

 

let P1 = new Promise(function (resolve, reject) {
    setTimeout(function () {
        resolve("p1 data")
    }, 500)
})
 
let P2 = new Promise(function (resolve, reject) {
    setTimeout(function () {
        resolve("p2 data")
    }, 500)
})
 
Promise.all([P1, P2]).then(function (results) {
    console.log(results) // ["p1 data", ""p2 data""]
})

2.用三目运算符代替if else

 

var judge = 1;
  judege == 1 ? console.log(1) : console.log(0);

3.async 和await代替promise

 

methods:{
    checkForm(){
        return new Promise((resolve,reject)=>{
            console.log(2)
            resolve()
         })
     },
    async submit(){
        await this.checkForm()
        console.log(1)
    }
}

结果  先打印2，再打印1
//2
//1

4.Object.is 比较两个值是否相等

Object.is() 严格比较两个值是否相等,弥补== 和=== 的缺点

 

== 缺点
null == undefined   //true
+0 == -0     //true

=== 缺点
+0 === -0     //true
NaN === NaN   //false

Object.is   只要值一样，就相等
.is(+0,-0)  // false
Object.is(NaN,NaN) // true

5.数组深拷贝的几种方法

方法A

 

let arr = [1,2,3,4]
let b = JSON.parse(JSON.stringify(arr))
这样就能得到一个新的数组，而且即便修改数据b的值，也不会对数据arr有任何影响

方法B

 

let arr = [1,2,3,4]
let b = arr.slice(0)

6.点击分页，页面滑倒最顶部

 

 if (document.body.scrollTop) {
        document.body.scrollTop = 0
      } else {
        document.documentElement.scrollTop = 0
      }

7.将数据转化为树状结构的数据

 

export const toTree = function (data) {
    let result = []
    if (!Array.isArray(data)) {
        return result
    }
    data.forEach(item => {
        delete item.children;
    });
    let map = {};
    data.forEach(item => {
        map[item.id] = item;
    });
    data.forEach(item => {
        let parent = map[item.pid]; //这个可根据自己项目中父与子数据的关联进行修改
        if (parent) {
            (parent.children || (parent.children = [])).push(item);
        } else {
            result.push(item);
        }
    });
    return result;
}

8.循环对比数组数据，有这个值就直接返回ture

推荐

 

let  name="aa"
 let flag =  Array.some(item=>{
     return item.name ===name
})
如果数组中有这个值就返回true,没有就返回false

如下是之前的写法,out啦....

 

let flag = false 
for(let a = 0;a<Array.length;a++){
   if(Array.name===name){
      flag  =true
      break
  }
}
console.log(flag)

9.深拷贝

 

deepCopy(obj){        
    let newObj = null        
    if(typeof obj ==='object'&&obj !== null){                     
      newObj = obj instanceof Array?[]:{}            
      for(var i in obj){                
          newObj[i] = deepCopy(obj[i])             
      }        
    }else{            
         newObj = obj // 最终会走这一步        
     }        
         return newObj    
}

把数组或字符串按照长度分成新的数组

 

  chunk(array, size) {
      //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
      const length = array.length
      //判断不是数组，或者size没有设置，size小于1，就返回空数组
      if (!length || !size || size < 1) {
        return []
      }
      //核心部分
      let index = 0 //用来表示切割元素的范围start
      let resIndex = 0 //用来递增表示输出数组的下标

      //根据length和size算出输出数组的长度，并且创建它。
      let result = new Array(Math.ceil(length / size))
      //进行循环
      while (index < length) {
        //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
        result[resIndex++] = array.slice(index, (index += size))
      }
      //输出新数组
      return result
    },

10 计算两个时间之间的大小关系

 

Date.parse(date2) - Date.parse(date1) >= 0

11.base64编码转换成blob对象的方法

 

 // base64编码转换成blob对象的方法：
    function getBlobBydataURI(dataURI, type) {
      var binary = atob(dataURI.split(',')[1]);
      var array = [];
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], { type: type });
    },

12.base64转化为file对象的方法

dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
//转换成file对象
return new File([u8arr], filename, {type:mime});

作者：候鸟与暖风
链接：https://www.jianshu.com/p/3681ad22e243
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。