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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
javascript获取元素的计算样式
May 24 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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/12/10 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
2014年质检员工作总结
2014/11/18 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015国庆节宣传语
2015/07/14 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python