美文网首页我爱编程
js的一些书写技巧

js的一些书写技巧

作者: 澄澄真可爱 | 来源:发表于2018-04-16 21:57 被阅读0次

    数组中是否存在某个元素

    let peoples=[{name:'bob',age:10},{name:'lisa',age:2},{name:'aker',age:8}]
    let lucy={name:'lucy',age:10}
    //下面这句的意思是 如果people 在数组中就执行doSomething() 方法
    ~peoples.map(item=>item.name).indexOf(lucy.name)&&doSomething()
    //代码分解
    var nameArr=arr.map(item=>item.name)// 把数组转换成name数组['bob','lisa'],返回这个新数组
    var indexLucy=nameArr.indexOf(lucy.name)//在数组里查找有没有Lucy的名字,有的话返回下标,没有的话返回-1
    var isLucy=~indexLucy //将indexLucy转换成boolean 类型  ~-1==0==false  ~n(其他数字)==-n-1==true
    isLucy&&doSomething() //逻辑与中断,当isLucy为false才会执行右侧的doSomething()
    

    includes的写法

    peoples.map(item=>item.name).includes(lucy.name)&&doSomething()
    

    数组A是数据,数组B是条件,过滤出A中满足B任意条件的数据

    A.filter(item=>B.includes(item))
    

    逻辑与

    aa&&(c=aa.bb) 加入aa是undefined这样给c赋值的语句就不会执行

    逻辑或

    var a=res.a||[];a.forEach() 这样可以给默认值, 防止 forEach方法报错

    数据转换

    字符串转数字+'555' 等同于Number('555')
    字符串转整数~~'15.8' 等同于parseInt('15.8'),不能转的时候会返回0,而不是NaN
    转布尔值 !!80 !!'ddd' 直接取反两次
    数字转字符串''+5 等同于String(5)

    计算

    5*2*2*2*2 可以表示成 5<<4 利用的二进制的左移 二进制101左移4位1010000

    image.png

    if else 缩写

    如果if else后面的语句只有一行,可以不需要用大括号包住

    if(age>150){
      console.log('成精了')
    }else{
      console.log('没成精呢')
    }
    //可以缩写成
    if(age>150) console.log('成精了');
    else console.log('没成精呢');
    

    方法的参数过多,当对象传进来

    //下载编辑后的图片,入参是原始图片的缩放,图片宽,图片高,图片类型,原地址,位置,背景
    function getImage(scale,width,height,type,src,left,top,background){
       var canvas=document.createElement('canvas')
       var   a=document.createElement('a')
       canvas.width=width
       canvas.height=height
       var ctx=canvas.getContext('2d')
       ctx.fillStyle=background
       ctx.fillRect(0,0,width,height)
       var img=new Image()
       img.crossOrigin = "Anonymous";
       img.src=src
       img.onload=function(img){
            ctx.drawImage(img,top,left,img.width*scale,img.height*scale)
            a.donload='裁剪后的图片'
            a.href=canvas.toDataURL(type||'image/jpeg')
            a.click()
      }
    }
    
    //当参数多余三个的时候就考虑用配置项来配置函数了 
    function getImage(options){
    var opt={//首先给一些默认值,这样options不传也没关系
      scale:1,
      width:500,
      height:500,
      left:10,
      top:10,
      background:'#000'
    }
    var options=Object.assign(opt,options)//合并默认选项
    var {scale,width,height,type,src,left,top,background}=options
       var canvas=document.createElement('canvas')
       var   a=document.createElement('a')
       canvas.width=width
       canvas.height=height
       var ctx=canvas.getContext('2d')
       ctx.fillStyle=background
       ctx.fillRect(0,0,width,height)
       var img=new Image()
       img.crossOrigin = "Anonymous";
       img.src=src
       img.onload=function(img){
            ctx.drawImage(img,top,left,img.width*scale,img.height*scale)
            a.donload='裁剪后的图片.png'
            a.href=canvas.toDataURL(type||'image/png')
            a.click()
      }
    }
    getImage({src:'./xxx.jpg'})
    

    相关文章

      网友评论

        本文标题:js的一些书写技巧

        本文链接:https://www.haomeiwen.com/subject/kchykftx.html