web前端开发
JavaScript中有很多速记技巧，可以缩短代码长度，减少冗余，提高代码的可读性和可维护性。本文将介绍20个提高效率的JS缩写技巧，帮助你告别写垃圾的生活，轻松写出优雅的代码！
01、从数组中删除假值
您可以使用 filter() 组合布尔值来简化从数组中删除假值的过程。false 值是指将 false 视为条件的值，例如 null、未定义、空字符串（“”或 ''）、0、NaN 和 false。
传统写法：
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() 方法，从而将每个数组元素转换为布尔值。只有转换结果为 true 的元素才会保留在新数组中。
注意：该方法也会过滤掉0。如果不需要过滤掉0，则需要额外判断。
02、数组搜索
当搜索数组时，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)) {}
按位 NOT (~) 运算符对于除 -1 之外的任何值都返回“真”值。要否定它，只需使用 !~ 即可。或者，您可以使用includes()函数：
if(arr.includes(item)) {}
03、空值合并运算符
null 合并运算符 (??) 用于为 null 或 .undefined 的变量提供默认值
传统写法：
const fetchUserData = () => {return 'Xiuer Old';};const data = fetchUserData();const username = data !== null && data !== undefined ? data : 'Guest';
简化写法：
const fetchUserData = () => {return 'Xiuer Old';};const data = fetchUserData();const username = data ?? 'medium';
另外，还有一个空合并赋值运算符（??=），用于当变量为空（null或undefined）时执行赋值操作。
传统写法：
let variable1 = null;let variable2 = "Xiuer Old";if (variable1 === null || variable1 === undefined) {variable1 = variable2;}
简化写法：
let variable1 = null;let variable2 = "Xiuer Old";variable1 ??= variable2;
??=写法更简洁，更容易阅读。它首先检查变量 1 是否为 null 或未定义，如果是，则将值赋给变量 2。如果variable1已经有一个非空值，则不会发生赋值。
04、逻辑或赋值运算符
逻辑或赋值运算符 (||=) 用于为变量指定默认值。
传统写法：
let count;if (!count) {count = 0;}
简化写法：
let count;count ||= 0;
当 count 为假值（例如 undefined、null、false、0、NaN 或空字符串）时，逻辑 OR 赋值运算符将赋值 0。count 否则，它保留 count 的原始值。
05、多值匹配
对于多个值的匹配，可以将所有值放入一个数组中，然后使用indexOf()方法进行检查。indexOf() 方法是 JavaScript 数组的内置方法，用于返回指定元素在数组中第一次出现的位置索引。如果数组中不存在该元素，则返回-1。
传统写法：
if (value === 1 || value === 'one' || value === 2 || value === 'two') {// ...}
简化写法：
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {// ...}
06、三元表达式
这可以使用三元表达式 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';07、短路评估
将一个变量的值分配给另一个变量时，您可能需要确保源变量不为 null、未定义或为空。您可以编写包含多个条件的长 if 语句，或使用短路求值来简化。
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {let variable2 = variable1;}
使用短路评估简化的代码如下：
const variable2 = variable1 || 'new';对于逻辑 OR (||) 运算符，以下值被视为 false：
false
0
空字符串（“”或“”）
null
undefined
NaN
因此，如果值本身可能是其中之一，则不适合使用短路评估。
短路评估还可以避免函数调用中不必要的函数执行。
传统写法：
function fetchData() {if (shouldFetchData) {return fetchDataFromAPI();} else {return null;}}
简化写法：
function fetchData() {return shouldFetchData && fetchDataFromAPI();}
当 shouldFetchData 为 true 时，短路评估继续执行函数的 fetchDataFromAPI() 并返回其结果。如果shouldFetchData为假值，短路求值将直接返回假值（null），避免不必要的函数调用。
08、科学计数法
可以使用科学和技术方法来表示数字以省略尾随零。例如，1e7it 实际上意味着 1 后面跟着 7 个零。它代表 10,000,000 的十进制等值。
传统写法：
for (let i = 0; i < 10000; i++) {}简化写法：
for (let i = 0; i < 1e7; i++) {}下面的所有比较都将返回 true1e0 === 1;1e1 === 10;1e2 === 100;1e3 === 1000;1e4 === 10000;1e5 === 100000;
09、位运算符
双位 NOT 运算符有一个非常实际的用途，您可以用它来替换 Math.floor() 函数，在执行相同操作时速度更快。
传统写法：
Math.floor(4.9) === 4 //true简化写法：
~~4.9 === 4 //true10、指数求幂
指数求幂运算可以使用 * 来简化。
传统写法：
Math.pow(2,3); // 8Math.pow(2,2); // 4Math.pow(4,3); // 64
简化写法：
2**3 // 82**4 // 44**3 // 64
从ES7（ECMAScript 2016）开始，JavaScript引入了指数幂运算符**，使指数幂运算更加简洁。
11、双非运算符
在 JavaScript 中，双非按位运算符 ~~ 可用于对数字进行向下舍入，类似于 Math.floor() 方法的功能。
传统写法：
const floor = Math.floor(6.8); // 6简化写法：
const floor = ~~6.8; // 6注：双非位运算符仅适用于 32 位整数，即范围为 -(231) 到 (231)-1，即 -2147483648 到 2147483647。双非位运算符 ( ~~ ) 对于大于 2147483647 或小于 0 的数字给出不正确的结果，因此建议在这种情况下使用 Math.floor() 方法。
12、对象属性
ES6 提供了一种更简单的方法来为对象分配属性。如果变量名与对象的键名相同，则可以使用缩写表示法进行赋值。
传统写法：
= '微信公众号：web前端开发';const age = 18;const person = {name: name,age: age};
简化写法：
const name = 'Yangxiaoai';const age = 30;const person = {name,age};
13、箭头函数
箭头函数可以简化经典函数的编写。
传统写法：
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));
如果箭头函数只有一条语句，它将隐式返回其计算结果，并且 returnthe 关键字可以省略：
传统写法：
function calcCircumference(diameter) {return Math.PI * diameter}
简化写法：
calcCircumference = diameter => (Math.PI * diameter;)
14、参数解构
如果使用一些流行的 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;15、扩展运算符
ES6中引入的扩展运算符可以简化一些对数组和对象的操作。
传统写法：
// Merge arraysconst odd = [1, 3, 5];const nums = [2, 4, 6].concat(odd);// Clone an arrayconst arr = [1, 2, 3, 4];const arr2 = arr.slice();
简化写法：
// Merge arraysconst odd = [1, 3, 5];const nums = [2, 4, 6, ...odd];console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]// Clone an arrayconst 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) // 1console.log(b) // 2console.log(z) // { c: 3, d: 4 }
扩展运算符还可以用于合并对象：
传统写法：
let fname = { firstName : 'medium' };let lname = { lastName : 'xiuer'}let full_names = Object.assign(fname, lname);
简化写法：
let full_names = {...fname, ...lname};16、强制参数
在传统的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;}
这里定义了一个名为强制的函数，抛出错误，表明函数参数没有传入。然后，在 foo 函数的参数列表中，使用分配默认值的方法将参数设置为强制（）调用 结果。如果 bar 没有传入参数或者传入了 false 值，会触发 Mustadal() 函数的执行。
17、转换为布尔值
使用双逻辑 NOT 运算符可以将任何值转换为布尔值。
!!23 // TRUE!!"" // FALSE!!0 // FALSE!!{} // TRUE
单个逻辑 NOT 运算符已经可以将值转换为布尔类型并对它取反，因此，第二个逻辑 NOT 运算符再次对其取反，将其返回到其原始含义并将其保留为布尔类型。
18、变量交换
使用数组解构可以轻松实现变量交换。
传统写法（使用临时变量完成两个变量的交换）：
let a = 5;let b = 10;const temp = a;a = b;b = temp;
简化写法（使用数组解构赋值完成两个变量的交换）：
let a = 5;let b = 10;[] = [b, a];
这里我们创建一个包含两个元素[b, a]的数组，然后，使用数组解构赋值将值分别赋给变量a和b。由于左边的数组和右边的数组结构相同，所以交换两个值。
19、变量声明
当需要同时声明多个变量时，可以使用变量声明的简写方法，以节省时间和空间。
传统写法：
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;20、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]);}
总结
以上就是我今天想与你分享的20个关于JavaScript的缩写技巧，希望这些技巧能够对你有所帮助，如果你觉得有用的话，请记得点赞我，关注我，这样，你将会阅读到更多优质文章内容，以帮助你学习能够有用有趣的知识。
学习更多技能
请点击下方公众号
