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

赞 (0)

相关推荐

  • JavaScript ES6中的简写语法总结与使用技巧

    ES6为一些已有的功能提供了非破坏性更新,这类更新中的大部分我们可以理解为语法糖,称之为语法糖,意味着,这类新语法能做的事情其实用ES5也可以做,只是会稍微复杂一些.本章我们将着重讨论这些语法糖,看完之后,可能你会对一些你很熟悉的ES6新语法有不一样的理解. JavaScript ES6对象字面量 对象字面量是指以{}形式直接表示的对象,比如下面这样: var book = { title: 'Modular ES6', author: 'Nicolas', publisher: 'O´Reil

  • 分享19个JavaScript 有用的简写写法

    原文链接,最近很火的一篇文章 This really is a must read for any JavaScript-based developer. I have written this article as a vital source of reference for learning shorthand JavaScript coding techniques that I have picked up over the years. To help you understand

  • JavaScript中最常用的10种代码简写技巧总结

    JavaScript中最常用的10种代码简写技巧总结

    前言 本文主要给大家整理了一份10个程序员常用的代码简写技术,看懂一种是入门,全懂就是大神,你能知道几个呢?下面话不多说了,来看看详细的介绍: 一.三元操作符 当想写if-else语句时,使用三元操作符来代替. const x = 20;let answer;if (x > 10) { 简写: const answer = x > 10 ? 'is greater' : 'is lesser'; 也可以嵌套if语句: const big = x > 10 ? " greater

  • javascript简写效果“神秘的眼睛”

    www.jb51.net神秘的眼睛我们 .eye{ display:inline; overflow:hidden; position:relative; float:left; margin:50px 0 0 50px; width:50px; height:50px; font-size:50px; line-height:106%; +line-height:normal; cursor:default; } @media all and (min-width:0px){ .eye{lin

  • Javascript简写条件语句(推荐)

    经常在各处牛人的代码中看到许多简写的条件表达语句,看了一些介绍这方面的文章,觉得3 ways 2 say if这篇文章(http://www.thomasfrank.se/3_ways_2_say_if.html)还不错.在这篇文章中作者对传统的if...else....?:.&&/||三种条件表达的写法的特点及用处进行了总结归纳,简述如下: 1. if...else结构 // Set r to 0 or 1 var r= Math.floor(2*Math.random()) // Se

  • javascript简写常用的12个技巧（可以大大减少你的js代码量）

    前言 本文主要给大家分享了javascript简写常用的12个技巧,无论你是初学者还是资深人士,都值得一读!下面话不多说了,来一起看看详细的介绍: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或者未定义(undefined).这对于JavaScript编程来说,是一个经常要考虑到的验证. 如果直接写,像下面这样: if (variable1 !== null || variable1 !== undefined || v

  • 史上最全JavaScript常用的简写技巧（推荐）

    JavaScript 是属于网络的脚本语言!被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用.同时很容易使用,所以越来越多的开发者选择js代码来实现自己想要的效果,但开发过程中,为了更高的效率和良好的代码规范要求,我们不得不知晓js一些常用的简写技巧,如下我帮大家整理了下,一起进来看看吧~ 1. 三元运算符 当你想用一行代码来写if...else语句的时候,使用三元操作符是非常好的选择,例如: const x = 20; let answer; if (x

  • javascript代码简写的几种常用方式汇总

    javascript代码简写的几种常用方式汇总

    目录 前言 箭头函数 掌握数组常见操作方法 延展运算符 对象简写 解构赋值 掌握数据类型转换的方法 总结 前言 本文主要介绍一些工作中常用的JavaScript编码技巧.非常有用,建议大家看完赶快实践,keep it in your mind! 首先推荐一个vscode的插件,Quokka.js,调试代码神器,插件的作用是:立即执行你键入的JavaScript代码或者TypeScript代码 箭头函数 简写规则: 只有一个参数,小括号可以不写 返回值只有一个,花括号和return可以不写 let

  • JavaScript实现继承的6种常用方式总结

    目录 1.原型链继承 2.借用构造函数继承 3.组合继承(经典继承) 4.原型式继承 方法一:借用构造函数 方法二:Object.create() 5.寄生式继承 6.寄生组合式继承 7.ES6.Class实现继承 JavaScript想实现继承的目的:重复利用另外一个对象的属性和方法. 1.原型链继承 让一个构造函数的原型是另一个类型的实例,那么这个构造函数new出来的实例就具有该实例的属性. 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依

  • JavaScript实现页面跳转的几种常用方式

    本文实例讲述了JavaScript实现页面跳转的几种常用方式.分享给大家供大家参考,具体如下: 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script language="j

  • JS实现继承的几种常用方式示例

    JS实现继承的几种常用方式示例

    本文实例讲述了JS实现继承的几种常用方式.分享给大家供大家参考,具体如下: 1,原型链继承 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原型链继承</title> </head> <body> <script> /** * 优点: * 实例是父类的实例也是子类的实例

  • JavaScript实现创建自定义对象的常用方式总结

    本文实例讲述了JavaScript实现创建自定义对象的常用方式.分享给大家供大家参考,具体如下: 1. 对象字面量方式 对象字面量方式是创建自定义对象的首选模式,简单方便. var per = { name:'zhangsan', age:25, job:'html', sayName:function(){ alert(this.name); } } 缺点:使用同一个接口创建很多对象,会产生大量的重复代码.比如我想再创建一个per1对象,我就得把上面的代码再重新写一遍,改变不同的属性值. 2.

  • Selenium Webdriver元素定位的八种常用方式(小结)

    Selenium Webdriver元素定位的八种常用方式(小结)

    在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下. 1. By.name() 假设我们要测试的页面源码如下: <button id="gbqfba" aria-label="Google Search" name="btnK" class="gbqfba"><

  • python里读写excel等数据文件的6种常用方式(小结)

    下面整理下python有哪些方式可以读取数据文件. 1. python内置方法(read.readline.readlines) read() : 一次性读取整个文件内容.推荐使用read(size)方法,size越大运行时间越长 readline() :每次读取一行内容.内存不够时使用,一般不太用 readlines() :一次性读取整个文件内容,并按行返回到list,方便我们遍历 2. 内置模块(csv) python内置了csv模块用于读写csv文件,csv是一种逗号分隔符文件,是数据科学

  • SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式

    SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式

    目录 前言 获取参数的几种常用注解 一.请求路径参数get请求 二.Body参数POST请求 四.HttpServletRequest 五.参数校检 最终选择交互方式 参考文献 总结 前言 现在大多数互联网项目都是采用前后端分离的方式开发,前端人员负责页面展示和数据获取,后端负责业务逻辑处理和接口封装.当与前端交互的过程当中,常用json数据与前端进行交互,这样想取出前端传送过来的json数据的时候,就需要用到@RequestBody这个注解.@RequestBody注解用于读取http请求的内

  • JavaScript中常见的几种继承方式

    JavaScript中常见的几种继承方式

    目录 原型继承 内存图 分析 盗用构造函数继承 分析 组合继承 原型链继承 寄生式继承 寄生组合式继承 原型继承 function Parent(name) { this.name = name } Parent.prototype.getName = function(){ return 'parentPrototype' + ' ' + this.name; } function Son() { } Son.prototype = new Parent(); console.log(new

  • 分享Vue组件传值的几种常用方式(一)

    分享Vue组件传值的几种常用方式(一)

    目录 前言 第一种:父向子传值 新建文件导入结构 引入 注册 使用子组件 子组件内部代码完善 父组件内部代码完善 操作main.js文件 思路总结 前言 大家好,这个系列我们来讲解一下vue组件传值的几种常见方法和逻辑链路.最常见的vue组件传值分为三种,第一种是父向子传值,第二种是子向父传值,第三种是兄弟组件之间的传值,下面我们先就第一种情况来进行分析和编写. 第一种:父向子传值 父向子传值意思就是要把父组件里的值传递给子组件,方法是在子组件内部自定义一个props属性,通过props属性来完

随机推荐