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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
JS将unicode码转中文方法
May 08 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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代码
2008/09/10 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
php制作文本式留言板
2015/03/18 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
食品厂厂长岗位职责
2014/01/30 职场文书
教师专业自荐书范文
2014/02/10 职场文书