20个提升效率的JS简写技巧,告别屎山!

这篇具有很好参考价值的文章主要介绍了20个提升效率的JS简写技巧,告别屎山!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JavaScript 中有很多简写技巧,可以缩短代码长度、减少冗余,并且提高代码的可读性和可维护性。本文将介绍 20 个提升效率的 JS 简写技巧,助你告别屎山,轻松编写优雅的代码!

移除数组假值

可以使用 filter() 结合 Boolean 来简化移除数组假值操作。假值指的是在条件判断中被视为 false 的值,例如 nullundefined、空字符串(""'')、0、NaNfalse

传统写法:

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];





let filterArray = arr.filter(value => {

    if(value) {

      return value

    };

}); 

// [12, 'xyz', -25, 0.5]

简化写法:

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];



let filterArray = arr.filter(value => Boolean(value)); // [12, 'xyz', -25, 0.5]

更简化写法:

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];



let filterArray = arr.filter(Boolean); // [12, 'xyz', -25, 0.5]

Boolean 是 JavaScript 的内置构造函数,通过传递一个值给它,可以将该值转换为布尔值。在这种情况下,Boolean 构造函数作为回调函数传递给 filter() 方法,因此会将每个数组元素转换为布尔值。只有转换结果为真值的元素才会保留在新数组中。

注意:这种方式会将 0 也过滤掉,如果不需要过滤 0,需要进行额外的判断。

数组查找

当对数组进行查找时,indexOf()用于获取查找项的位置。如果未找到该项,则返回值为-1。在JavaScript中,0被视为false,而大于或小于0的数字被视为true。因此,需要这样来写:

传统写法:

if(arr.indexOf(item) > -1) { 



}



if(arr.indexOf(item) === -1) {



}

简化写法:

if(~arr.indexOf(item)) {



}



if(!~arr.indexOf(item)) {



}

位非(~)运算符对除了-1之外的任何值都返回一个"真"值。对其进行取反就是简单地使用!~即可。另外,也可以使用includes()函数:

if(arr.includes(item)) {



}

空值合并运算符

空值合并运算符(??)用于为 nullundefined 的变量提供默认值。

传统写法:

const fetchUserData = () => {

	return '前端充电宝';

};



const data = fetchUserData();

const username = data !== null && data !== undefined ? data : 'Guest';



简化写法:

const fetchUserData = () => {

	return '前端充电宝';

};



const data = fetchUserData();

const username = data ?? 'CUGGZ';

除此之外,还有一个空位合并赋值运算符(??=),用于在变量为空(nullundefined)时进行赋值操作。

传统写法:

let variable1 = null;

let variable2 = "前端充电宝";



if (variable1 === null || variable1 === undefined) {

  variable1 = variable2;

}

简化写法:

let variable1 = null;

let variable2 = "前端充电宝";



variable1 ??= variable2;

??= 的写法更加简洁和易读。它首先检查变量 variable1 是否为 nullundefined,如果是,则将它赋值为 variable2 的值。如果 variable1 已经有一个非空的值,那么赋值操作就不会发生。

逻辑或赋值运算符

逻辑或赋值运算符(||=)用于为变量分配默认值。

传统写法:

let count;

if (!count) {

  count = 0;

}

简化写法:

let count;

count ||= 0;

count 为假值(例如 undefined、null、false、0、NaN 或空字符串)时,逻辑或赋值运算符将 count 赋值为 0。否则,它会保留 count 的原始值。

多值匹配

对于多个值的匹配,可以将所有的值放入一个数组中,然后使用 indexOf() 方法进行检查。indexOf() 方法是 JavaScript 数组的一个内置方法,它用于返回指定元素在数组中第一次出现的位置索引。如果数组中不存在该元素,则返回 -1。

传统写法:

if (value === 1 || value === 'one' || value === 2 || value === 'two') {

  // ...

}

简化写法:

if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {

   // ...

}

更简化写法:

if ([1, 'one', 2, 'two'].includes(value)) { 

    // ...

}

三元表达式

使用三元表达式表示可以简化if...else

传统写法:

let isAdmin;

if (user.role === 'admin') {

  isAdmin = true;

} else {

  isAdmin = false;

}



简化写法:

const isAdmin = user.role === 'admin' ? true : false;

更简化写法:

const isAdmin = user.role === 'admin';

短路求值

当将一个变量的值赋给另一个变量时,可能希望确保源变量不为 null、undefined 或空。可以编写一个包含多个条件的长 if 语句,或者使用短路求值来简化。

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {

    let variable2 = variable1;

}

使用短路求值简化后的代码如下:

const variable2 = variable1 || 'new';

对于逻辑或(||)操作符,以下值被视为假:

  • false

  • 0

  • 空字符串("" 或 '')

  • null

  • undefined

  • NaN

所以,如果本身的值可能就是这些中的一个,就不适合使用短路求值。

短路求值还能在函数调用中避免不必要的函数执行。

传统写法:

function fetchData() {

  if (shouldFetchData) {

    return fetchDataFromAPI();

  } else {

    return null;

  }

}

简化写法:

function fetchData() {

  return shouldFetchData && fetchDataFromAPI();

}

shouldFetchData 为真值时,短路求值会继续执行 fetchDataFromAPI() 函数并返回其结果。如果 shouldFetchData 为假值,短路求值会直接返回假值(null),避免了不必要的函数调用。

科学计数法

可以使用科学技术法来表示数字,以省略尾部的零。例如,1e7 实际上表示 1 后面跟着 7 个零。它表示一个十进制,相当于 10,000,000。

传统写法:

for (let i = 0; i < 10000; i++) {}

简化写法:

for (let i = 0; i < 1e7; i++) {}



// 下面的所有比较都将返回 true

1e0 === 1;

1e1 === 10;

1e2 === 100;

1e3 === 1000;

1e4 === 10000;

1e5 === 100000;

位运算符

双位非运算符有一个非常实用的用途,可以用它来替代Math.floor()函数,它在执行相同的操作时速度更快。

传统写法:

Math.floor(4.9) === 4  //true

简化写法:

~~4.9 === 4  //true

指数幂运算

指数幂运算可以使用 ** 来简化。

传统写法:

Math.pow(2,3); // 8

Math.pow(2,2); // 4

Math.pow(4,3); // 64

简化写法:

2**3 // 8

2**4 // 4

4**3 // 64

从 ES7(ECMAScript 2016)开始,JavaScript 引入了指数幂运算符 **,使指数幂运算更加简洁。

双非未运算符

在 JavaScript 中,双非位运算符 ~~ 可以用于将数字向下取整,类似于 Math.floor() 方法的功能。

传统写法:

const floor = Math.floor(6.8); // 6

简化写法:

const floor = ~~6.8; // 6

注意:双非位运算符只适用于 32 位整数,即范围为 -(2^31) 到 (2^31)-1,即 -2147483648 到 2147483647。对于大于 2147483647 或小于 0 的数字,双非位运算符(~~)会给出错误的结果,因此建议在这种情况下使用 Math.floor() 方法。

对象属性

ES6 提供了一种更简洁的方式来给对象赋值属性。如果变量名与对象的键名相同,可以利用简写符号来进行赋值。

传统写法:

const name = '微信公众号:前端充电宝';

const age = 18;



const person = {

  name: name,

  age: age

};

简化写法:

const name = '微信公众号:前端充电宝';

const age = 30;



const person = {

  name,

  age

};

箭头函数

箭头函数可以简化经典函数的写法。

传统写法:

function sayHello(name) {

  console.log('Hello', name);

}



setTimeout(function() {

  console.log('Loaded')

}, 2000);



list.forEach(function(item) {

  console.log(item);

});

简化写法:

sayHello = name => console.log('Hello', name);



setTimeout(() => console.log('Loaded'), 2000);



list.forEach(item => console.log(item));

如果箭头函数只有一条语句,它会隐式地返回其求值的结果,这时可以省略 return 关键字:

传统写法:

function calcCircumference(diameter) {

  return Math.PI * diameter

}



简化写法:

calcCircumference = diameter => (

  Math.PI * diameter;

)

参数解构

如果正在使用一些流行的 Web 框架,比如 React、Vue,可能会使用数组或对象字面量形式的数据来在组件之间传递信息。在组件中要想使用数据对象,就需要对其进行解构。

传统写法:

const observable = require('mobx/observable');

const action = require('mobx/action');

const runInAction = require('mobx/runInAction');



const store = this.props.store;

const form = this.props.form;

const loading = this.props.loading;

const errors = this.props.errors;

const entity = this.props.entity;

简化写法:

import { observable, action, runInAction } from 'mobx';



const { store, form, loading, errors, entity } = this.props;

还可以为变量赋予新的变量名:

const { store, form, loading, errors, entity:contact } = this.props;

扩展运算符

在ES6中引入的扩展运算符可以简化数组和对象的一些操作。

传统写法:

// 合并数组

const odd = [1, 3, 5];

const nums = [2, 4, 6].concat(odd);

// 克隆数组

const arr = [1, 2, 3, 4];

const arr2 = arr.slice();

简化写法:

// 合并数组

const odd = [1, 3, 5];

const nums = [2, 4, 6, ...odd];

console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// 克隆数组

const arr = [1, 2, 3, 4];

const arr2 = [...arr];

concat() 函数不同,可以使用扩展运算符在另一个数组的任意位置插入一个数组。

const odd = [1, 3, 5];

const nums = [2, ...odd, 4, 6];

还可以将扩展运算符与ES6的解构语法结合使用:

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };

console.log(a) // 1

console.log(b) // 2

console.log(z) // { c: 3, d: 4 }

扩展运算符还能用于合并对象:

传统写法:

let fname = { firstName : '前端' };

let lname = { lastName : '充电宝'}

let full_names = Object.assign(fname, lname);

简化写法:

let full_names = {...fname, ...lname};

强制参数

在传统的 JavaScript 写法中,为了确保函数参数被传入一个有效值,我们需要使用条件语句来抛出一个错误。可以通过使用强制参数简写的写法实现相同的逻辑。

传统写法:

function foo(bar) {

  if(bar === undefined) {

    throw new Error('Missing parameter!');

  }

  return bar;

}

简化写法:

mandatory = () => {

  throw new Error('Missing parameter!');

}



foo = (bar = mandatory()) => {

  return bar;

}

这里定义了一个名为 mandatory 的函数,用于抛出一个错误,表示函数参数未被传入。然后,在函数 foo 的参数列表中,使用赋默认值的方式来将 bar 参数设置为 mandatory() 的调用结果,如果 bar 参数未被传入或者传入了假值,就会触发 mandatory() 函数的执行。

转为布尔值

可以使用双重逻辑非操作符将任何值转换为布尔值。

!!23 // TRUE

!!"" // FALSE

!!0 // FALSE

!!{} // TRUE

单一的逻辑非操作符已经可以将值转换为布尔类型并对其进行取反,所以第二个逻辑非操作符会再次对其进行取反,从而将其恢复为原始含义,并保持为布尔类型。

变量交换

可以使用数组解构来轻松实现变量交换。

传统写法(使用临时变量完成两个变量的交换):

let a = 5;

let b = 10;



const temp = a;

a = b;

b = temp;

简化写法(使用数组解构赋值完成两个变量交换):

let a = 5;

let b = 10;



[a, b] = [b, a];

这里创建了一个包含两个元素的数组 [b, a],然后使用数组解构赋值将其中的值分别赋给变量 ab。由于左侧的数组和右侧的数组结构相同,所以两个值会进行交换。

变量声明

当需要同时声明多个变量时,可以使用变量声明的简写方法来节省时间和空间。

传统写法:

let x;

let y;

let z = 3;

简化写法:

let x, y, z = 3;

不过,这个优化有些争议,很多人认为这么写会影响代码的可读性,因为许多变量写到了一行,不如一个变量一行更清晰明了,所以可以选择性采用。

如果有多个变量需要赋相同的值,则可以使用连等来实现。

传统写法:

let a = 100;

let b = 100;

let c = 100;

简化写法:

let a = b = c = 100;

For 循环

JavaScript 中传统的 for 循环语法使用数组的长度作为迭代器来遍历数组。还有很多 for 循环的快捷方式提供了在数组中迭代对象的不同方法,例如:

  • for...of:用于遍历内置字符串、数组、类数组对象、NodeList。

  • for...in:用于访问数组的索引和对对象字面量进行遍历,并记录属性名称和值的字符串。

  • Array.forEach:使用回调函数对数组元素及其索引执行操作。

传统写法:



for (let i = 0; i < arr.length; i++) {

  console.log("item: ", arr[i]);}

}

简化写法:

for (let str of arr) {

  console.log("item: ", str);

}



arr.forEach((str) => {

  console.log("item: ", str);

});



for (let index in arr) {

  console.log(index, arr[index]);

}

对于对象字面量,也可以使用 for...in 来遍历:

const obj = { a: 1, b: 3, c: 5 };



for (let key in obj) {

  console.log(key, obj[key]);

}

往期推荐

VS Code 中使用Git实践,学会了效率翻倍!

微软最热门的10款前端开源项目!

JavaScript 终于原生支持数组分组了!

Next.js 13.5 正式发布,速度大幅提升!

多图预警,前端应该掌握的浏览器调试技巧大揭秘!

竟然可以在一个项目中混用 Vue 和 React?

图解 60 个 CSS 选择器,一网打尽!
20个提升效率的JS简写技巧,告别屎山!文章来源地址https://www.toymoban.com/news/detail-710206.html

到了这里,关于20个提升效率的JS简写技巧,告别屎山!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 提升开发效率:npm包管理器的使用技巧

    随着Web开发技术的不断发展,前端工程化已经成为了一个不可忽视的趋势。在这其中,Node.js作为一门轻量级的JavaScript运行时环境,已经成为了前端工程师必备的技能之一。而npm(Node Package Manager)作为Node.js的包管理器,也成为了我们日常开发中的得力助手。本文将介绍npm包

    2024年01月21日
    浏览(55)
  • TypeScript:赋予JavaScript数据类型新的力量,提升编程效率!

    🎬 岸边的 风: 个人主页  🔥  个人专栏  : 《 VUE 》 《 javaScript 》 ⛺️  生活的理想,就是为了理想的生活 ! ​ TypeScript: 扩展 JavaScript 数据类型,赋予编程更强大的表达能力! 在现代Web开发中, TypeScript 已经成为了一种备受欢迎的编程语言。它不仅继承了 JavaScript 的

    2024年02月09日
    浏览(45)
  • 十三、使用Github Copilot 来提升我们的开发效率和使用技巧

    这段时间通过使用 github copilot 来辅助开发所总结的一些使用感受,来分享给大家 GitHub Copilot 是由 Github 和 OpenAI 创造的 AI 工具。该工具通过自动代码补全来帮助程序员们编写代码。Visual Studio Code、Neovim 和 JetBrains 的用户已经可以使用这个插件了。 GitHub Copilot 基于 OpenAI Codex

    2024年02月12日
    浏览(57)
  • 浏览器开发者工具DevTools中提升效率的小技巧

    DevTools 非常强大除了常用的查看元素,进行断点调试或许还有些你不知道的小技巧,小功能。如可以快速的重新发送请求,快速选择元素,在控制台中使用npm库等,让你能够更加高效的进行开发。不定时更新~ 使用快捷键能快速打开 DevTools,但不同的快捷键可以打开不同的

    2024年04月28日
    浏览(60)
  • 探索JavaScript中强大的三元运算符:简洁、灵活、提升代码效率

    三元运算是一种在编程中常见的条件表达式。它使用三个操作数进行条件判断,并返回两个值中的一个,具体取决于条件的真假。 三元运算符的优势:相比于使用传统的 if-else 语句,三元运算符可以简化代码并提高代码的可读性。它可以使条件判断和返回结果在一行内完成,

    2024年01月16日
    浏览(57)
  • 【测试效率提升技巧】xmind测试用例转换为excel工具使用手册

    1.在命令行执行pip install xmind2testcase -U 2.到python中xmind2testcase的安装路径(我的路径是D:pythonLibsite-packagesxmind2testcase)下新建一个文件夹,命名为web 3.在命令行cd到刚刚创建的web文件夹,执行pip freeze requirements.txt 4.命令行执行pip install -r requirements.txt -U PS:请尽量使用xMind8 Up

    2024年02月12日
    浏览(41)
  • 【JavaScript精通之道】掌握数据遍历:解锁现代化遍历方法,提升开发效率!

    ​ 🎬 岸边的 风 :个人主页  🔥  个人专栏  :《 VUE 》 《 javaScript 》 ⛺️  生活的理想,就是为了理想的生活 ! ​ 目录  📚 前言  📘 1. reduce方法 📘 2. forEach方法 📘 3. map方法  📘 4. for循环 📘 5. filter方法 📘 6. for...of循环 📘 7. Object.keys方法 📘 8. Object.values方法 📘

    2024年02月10日
    浏览(45)
  • JavaScript中的20个小技巧

    箭头函数可在没有参数时更简洁 箭头函数用于定义并创建函数的常用方式。如果没有参数,则可以使用下面的代码: 使用setInterval()实现计时器 setInterval()是一个用于重复调用函数的内置函数。下面是一个setInterval()计时器的例子: 数组查找/搜索 使用Array.find()方法可以快速查

    2023年04月08日
    浏览(39)
  • 大幅提升前端工作效率!Numeral.js数值格式化库来了!

    我们日常开发中,时常会碰到数值格式化操作的场景,今天了不起就为大家分享一款相对比较全面的数值格式化的JS库: Numeral.js Numeral.js 是一个用来对数值进行操作和格式化的 JS 库。可将数字格式化为货币、百分比、时间,甚至是序数词的缩写(比如1st,100th)。 下载到本

    2024年02月03日
    浏览(79)
  • Rust 性能优化 : Rust 性能优化技巧,提升 Rust 程序的执行效率和资源利用率 The Rust Performance

    作者:禅与计算机程序设计艺术 在过去的几年中,随着编程语言的快速发展,编程人员已经逐渐从依赖编译型语言转向了使用解释型语言。相对于编译型语言来说,解释型语言具有更快的执行速度,在某些情况下甚至可以实现接近编译器的运行时效率。但是另一方面,这些语

    2024年02月07日
    浏览(88)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包