您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

Javascript 代码简化常用写法

时间:2022-07-04 12:27:40  来源:  作者:milesmatheson

1、利用“或”(||)短路逻辑,给变量赋值。

  // a应该是一个有意义的字符串,不能说null,undefined,null
const getData = (a) => {
       // let b = "";
        // if (a !== null || a !== undefined || a !== false) {
         //  b = a;
       //  }
  
        // 简化
        let b = a || "";
      };

2、利用箭头函数简化函数

// 求两个数的和
// const sum = function (a, b) {
//   return a + b;
// };

// 简化
 const sum = (a, b) => a + b;

3、利用三元运算符号简化if else

const difNum = (a, b) => {
        // let res;
        // if (a > b) {
        //   res = a - b;
        // } else {
        //   res = b - a;
        // }
        // return res;

        // 简化
        return a > b ? a - b : b - a;
};

4、利用ES6对象解构简化

const data = {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5,
        f: 6,
};
const sum = (data) => {
        // const a = data.a,
        //   b = data.b,
        //   c = data.c;

        // 简化
        const { a, b, c } = data;
};

5、利用数组中元素检测进行条件判断

	const isShow = (a) => {
        // let res = false;
        // if (a === "你好") {
        //   res = true;
        // }
        // if (a === "你好啊") {
        //   res = true;
        // }
        // if (a === "哈喽") {
        //   res = true;
        // }
        // if (a === "hello") {
        //   res = true;
        // }
        // if (a === "嗨") {
        //   res = true;
        // }
        // return res

        // 简化
        const hello = ["你好", "你好啊", "哈喽", "hello", "嗨"];
        return hello.indexOf(a) > -1;
      };

6、利用ES6中的模板字符串生产字符串

const sethtml = (a, b, c) => {
        // let str = "<div>" + a + "<div>";
        // str += "<div>" + b + "<div>";
        // str += "<div>" + c + "<div>";

        // 简化
        let str = `<div>${a}</div><div>${b}</div><div>${c}</div>`;
        return str;
};

其他还有很多代码简化的方法,希望大家发出来交流,敲代码的时候少打点字



Tags:Javascript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前段时间有一个叫做“人类高质量男性”的视频火了,相信很多同学都刷到过。所以今天给大家分享下,什么叫做“人类高质量代码”,哈哈,开个玩笑。其实分享的都是一些自己平时总结的...【详细内容】
2022-10-11  Tags: Javascript  点击:(13)  评论:(0)  加入收藏
在创建 JavaScript 模块时,export 语句用于从模块中导出实时绑定的函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。...【详细内容】
2022-09-23  Tags: Javascript  点击:(32)  评论:(0)  加入收藏
框架之战是 JavaScript 社区中的热门话题,也是业界众多圣战之一。一开始,jQuery 崭露头角,接下来 AngularJS 初露锋芒,再到现代框架混战,战争一直很激烈。然而现在框架之战已经...【详细内容】
2022-09-02  Tags: Javascript  点击:(68)  评论:(0)  加入收藏
你将要创造什么在本教程中,我将向您展示如何使用 JavaScript 和画布以饼图和圆环图的形式显示数字信息。什么是饼图?图表是一种统计工具,用于以图形方式表示数值数据。饼图将...【详细内容】
2022-08-31  Tags: Javascript  点击:(46)  评论:(0)  加入收藏
在本教程中,我们将看到一个使用无限滚动方法分解页面内容的简单实现。我们将使用 HTML、CSS 和 vanilla JavaScript 来构建无限滚动功能的高性能且可访问的版本。什么是无限...【详细内容】
2022-08-31  Tags: Javascript  点击:(65)  评论:(0)  加入收藏
直接调用(异步调异步)function fn1() { setTimeout(() => { console.log(&#39;fn1执行&#39;) fn2(&#39;fn1传递过去的参数&#39;) }, 1000)}function fn2(data) { setTimeout...【详细内容】
2022-08-25  Tags: Javascript  点击:(84)  评论:(0)  加入收藏
有许多最好的 JavaScript 框架可供 Web 开发人员使用,它们各有利弊。JavaScript 框架为 JavaScript 开发人员提供了开发 JavaScript 应用程序所需的基本基础。这为 JavaScrip...【详细内容】
2022-08-10  Tags: Javascript  点击:(62)  评论:(0)  加入收藏
Python Tutor是一个代码可视化工具,能够把代码运行的过程一步一步可视化展现出来,方便新手了解代码每一步的运行状态、帮助新手学习编程语言或者能对排查起到很大的帮助,目前这...【详细内容】
2022-08-07  Tags: Javascript  点击:(103)  评论:(0)  加入收藏
作用域、作用域链、词法作用域在 Javascript 中,函数和对象都是变量,作用域决定了代码不同部分的变量的可访问性。 有趣的是,当我们开始更好地理解作用域时,我们可以在不同的作...【详细内容】
2022-08-03  Tags: Javascript  点击:(68)  评论:(0)  加入收藏
本文介绍如何实现select下拉选项的联动效果,用户及部门信息一般是通过后端读取数据库返回的,用户一般都会属于某个部门,它们之间大多通过某个相同的ID进行关联,那么想当然地在前...【详细内容】
2022-07-30  Tags: Javascript  点击:(112)  评论:(0)  加入收藏
▌简易百科推荐
前段时间有一个叫做“人类高质量男性”的视频火了,相信很多同学都刷到过。所以今天给大家分享下,什么叫做“人类高质量代码”,哈哈,开个玩笑。其实分享的都是一些自己平时总结的...【详细内容】
2022-10-11    慕课网  Tags:JavaScript   点击:(13)  评论:(0)  加入收藏
在之前的的章节已经简单介绍了如何断言接口的响应值,在实际工作过程中,json 的响应内容往往十分复杂,面对复杂的 json 响应体,主要通过 JSONPath 解决。JSONPath 提供了强大的 J...【详细内容】
2022-10-05  白橘透着黑  今日头条  Tags: json   点击:(24)  评论:(0)  加入收藏
对于JS程序员,alert人人都会。相信很多人初学JS时,就是从写alert入手吧,起码我就是这样,写的第一行代码就是alert。alert真的如此简单吗?可以很简单,也可以很复杂,复杂到你认不出它...【详细内容】
2022-09-27  JShaman  今日头条  Tags:JS   点击:(20)  评论:(0)  加入收藏
开发的同学肯定会遇到过通过自带的终端curl请求接口时接口返回的数据格式总是混乱的,如下图这样:常规curl请求可以看到返回数据没有格式化输出看不出数据的层级结构,可以说是非...【详细内容】
2022-09-27  寻丶  今日头条  Tags:json   点击:(28)  评论:(0)  加入收藏
众所周知,使用专业工具对JS代码进行混淆加密时,是要对代码进行语法、词法分析、运算加密,并进行AST(抽象语法树)重建的。代码量越大,加密过程运算也就越复杂,加密耗时也就越长。那...【详细内容】
2022-09-24  WangLiwen   网易号  Tags:JS   点击:(28)  评论:(0)  加入收藏
在创建 JavaScript 模块时,export 语句用于从模块中导出实时绑定的函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。...【详细内容】
2022-09-23  dirac    Tags:JavaScript   点击:(32)  评论:(0)  加入收藏
本文简要介绍了 Script Error 问题的来龙去脉,但也不局限于 Script Error,对于通用的系统性问题,应该找到系统性解决方案,进而治标治本。Script Error 原因与当前解法受浏览器同...【详细内容】
2022-09-23  开源中国     Tags:Script Error   点击:(24)  评论:(0)  加入收藏
本实例演示如何通过点击列表头来排序数据网格(DataGrid)。 数据网格(DataGrid)的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的,列是不能排序的,除非您设置 so...【详细内容】
2022-09-22  长城很长521    Tags:jQuery   点击:(28)  评论:(0)  加入收藏
自己动手,实现一个本地JS加密工具JS加密,是前后端JS程序员、小程序开发人员常用的功能。一般,进行JS代码加密时,都会使用在线的JS加密网站,比如众所周知的JShaman,就是个很优秀的J...【详细内容】
2022-09-21  WangLiwen     Tags:JS加密   点击:(17)  评论:(0)  加入收藏
一般浏览器先加载主页,再请求关联的js脚本文件。不管你把js代码嵌入在html中,还是独立保存为一个文件,都必须等待主页加载完成,js代码加载完成后才能执行。网上有人说把js代码放...【详细内容】
2022-09-19  Mutousoft  今日头条  Tags:js脚本   点击:(47)  评论:(0)  加入收藏
站内最新
站内热门
站内头条