美文网首页我爱编程
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的一些书写技巧

    数组中是否存在某个元素 includes的写法 数组A是数据,数组B是条件,过滤出A中满足B任意条件的数据 逻辑与...

  • 安利一下日常开发中JS的小技巧

    前言 今天给大家安利一波我在做前端开发(crtl+c/v)中的一些提升幸福度 js 使用小技巧,它可以帮助你书写干...

  • Node.js 笔记四: 简单爬虫

    Node.js 笔记四: 爬虫 Python 笔记七:Requests爬虫技巧讲解了一些requests的技巧。同...

  • js 一些小技巧

    for(leti=0,len=_map.length;i

  • JS盒子模型常用属性

    JS盒子模型常用属性 CSS如下: HTML如下: 小技巧:自动生成随机文本 使用方法:在div元素中书写lore...

  • 关于客户端JS性能优化(部分)

    下面是一些关于客户端JS性能的一些优化的小技巧: 1.关于JS的循环,循环是一种常用的流程控制。JS提供了三种循环...

  • 本周JS学习总结

    一,JS的三种书写位置 JS的书写位置:行内,内嵌和外部 1.行内式JS 可以将单行或少量js代码写在HTML标签...

  • 美国申请文书的写作要点介绍

    美国留学文书写作技巧都有哪些呢,关于美国申请文书写作的话相关技巧也是比较重要的,那么美国申请文书写作有哪些技巧呢,...

  • JS开发必须知道的41个技巧

    JS是前端的核心,但有些使用技巧你还不一定知道;本文梳理了JS的41个技巧,帮助大家提高JS的使用技巧 目录Arr...

  • js编程的一些小技巧

    1.用闭包保护对象属性 函数式编程:了解命令式代码的危害 典型的命令式代码就是for循环,它明确的指定操作数组的下...

网友评论

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

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