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 相关文章推荐
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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生成HTML静态页面实例代码
2008/08/31 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
python实现rest请求api示例
2014/04/22 Python
Python二分法搜索算法实例分析
2015/05/11 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
旅游管理专业生自荐信范文
2014/01/02 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python