JavaScript代码简写常用技巧有哪些汇总？

本文共计1187个文字，预计阅读时间需要5分钟。

目录前言箭头函数掌握数组常见操作方法扩展运算符对象简写结构赋值掌握数据类型转换的方法总结前言本文主要介绍一些JavaScript中常用的工作技巧，包括箭头函数、数组操作、扩展运算符、对象简写、结构赋值、数据类型转换等，旨在帮助读者快速掌握JavaScript编程。

箭头函数箭头函数是ES6引入的一种更简洁的函数定义方式，它没有自己的this，会捕获其所在上下文的this值。

掌握数组常见操作方法JavaScript数组提供了丰富的操作方法，如push、pop、map、filter、reduce等，这些方法可以帮助我们轻松处理数组数据。

扩展运算符扩展运算符可以将数组或对象解构为一系列的值，常用于函数参数的传递、数组复制等场景。

对象简写ES6允许我们使用对象简写，将变量名直接作为对象的属性名，简化代码。

结构赋值结构赋值可以同时从数组或对象中提取多个值，提高代码的可读性和可维护性。

掌握数据类型转换的方法JavaScript中，数据类型转换是常见的操作，如使用parseInt、parseFloat、Number、String等函数进行转换。

总结本文介绍了JavaScript中一些常用的工作技巧，希望对您的编程有所帮助。非非常用技巧，建议大 家根据实际情况进行选择。

目录

• 前言
• 箭头函数
• 掌握数组常见操作方法
• 延展运算符
• 对象简写
• 解构赋值
• 掌握数据类型转换的方法
• 总结

前言

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

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

箭头函数

简写规则：

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

掌握字符串常用操作函数

• 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代码简写方式内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！