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 EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
浅谈js闭包理解
Mar 28 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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/11/20 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
python 命令行传入参数实现解析
2019/08/30 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
大学新生欢迎词
2014/01/10 职场文书
八年级数学教学反思
2014/01/31 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书