javascript代码简写的几种常用方式汇总


Posted in Javascript onAugust 23, 2021

前言

本文主要介绍一些工作中常用的JavaScript编码技巧。非常有用,建议大家看完赶快实践,keep it in your mind!

首先推荐一个vscode的插件,Quokka.js,调试代码神器,插件的作用是:立即执行你键入的JavaScript代码或者TypeScript代码

javascript代码简写的几种常用方式汇总

箭头函数

简写规则:

  1. 只有一个参数,小括号可以不写
  2. 返回值只有一个,花括号和return可以不写
let arr=[1,2,3]

arr.filter((item)=>{
    return item >1
})

//只有一个参数,小括号可以不写
arr.filter(item=>{
    return item>1
})
//返回值只有一个,花括号和return可以不写
arr.filter(item=>item>1)

掌握数组常见操作方法

掌握数组常见方法,记在脑子里,不要写的时候再去看API了,这样可以有效提升编码效率,毕竟这些方法每天都在用

  • every
  • some
  • filter
  • map
  • forEach
  • find
  • findIndex
  • reduce
  • includes

javascript代码简写的几种常用方式汇总

掌握字符串常用操作函数

  • trim
  • startsWidth
  • includes
let str="Hello JueJue  "
//包含子串
console.log(str.includes("Hello"))
// 以子串开头
console.log(str.startsWith("Hello"))
// 去除收尾空格
console.log(str.trim())

延展运算符

很有用的哟,下面介绍两个使用场景:

对数组进行解构

//数组去重
function removeRepeat(arr){
    return  [...new Set(arr)]
}
//数组求最大值
Math.max(...arr)
Math.min(...arr)

对对象进行解构

//react  用于一次传入多个属性
let props={name:'Ben',age:10,sex:0}
const greeting=<Greeting {...props} />

//组合对象 这种情况可以使用Object.assign代替
let defaultParams={
    pageSize:1,
    pageNumber:10,
    sort:1
}

let reqParams={
    ...defaultParams,
    phone:'15196255885'
}

对象简写

对象的key和value同名,可以只写key,可以少些很多代码哟

let id,age,sex

let person={
    id,
    age,
    sex
}

解构赋值

  • 用于函数参数
  • 用于对对象进行解构

可以少些一些代码哟

class Spirit{
    constructor({x=0,y=0,w=10,h=10,rotate=0}){//函数参数结构
        this.x=x
        this.y=y
        this.w=w
        this.h=h
        this.rotate=rotate
    }
    draw(){
        const {x,y,w,h,rotate}=this
        console.log("draw -> x,y,w,h,rotate", x,y,w,h,rotate)
    }
}

掌握数据类型转换的方法

写JS的人一般没有类型观念,对于Number和String的区分不太敏感,其实JS的数据类型还是挺重要的,不注意的话就有可能会出错,所以希望大家记住下面的方法

Number和String类型互转

我一般喜欢使用构造函数转

Number('001')  //-> 1
String('1')   // ->1

保留n位小数

function cutNumber(value,n=2){//默认保留2位小数
    return Number(value).toFixed(n)
}

总结

到此这篇关于javascript代码简写方式的文章就介绍到这了,更多相关javascript代码简写方式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
xml转json的js代码
Aug 28 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
详谈javascript中的cookie
Jun 03 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
jquery实现抽奖功能
Oct 22 jQuery
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
关于React Native使用axios进行网络请求的方法
Aug 02 #Javascript
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
You might like
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php实现插入排序
2015/03/29 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
村委会主任先进事迹
2014/01/15 职场文书
社团活动总结书
2014/06/27 职场文书
物理课外活动总结
2014/08/27 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
干部培训简讯
2015/07/20 职场文书
岗位聘任协议书
2015/09/21 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python