我爱编程

js的一些书写技巧

2018-04-16  本文已影响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'})
上一篇 下一篇

猜你喜欢

热点阅读