白云区手机版网站建设,网站服务器建设费用,苏宁易购网页布局设计,汕头食品骏域网站建设JavaScript 中有很多简写技巧#xff0c;可以缩短代码长度、减少冗余#xff0c;并且提高代码的可读性和可维护性。本文将介绍 20 个提升效率的 JS 简写技巧#xff0c;助你告别屎山#xff0c;轻松编写优雅的代码#xff01;
移除数组假值
可以使用 filter() 结合 Bool…JavaScript 中有很多简写技巧可以缩短代码长度、减少冗余并且提高代码的可读性和可维护性。本文将介绍 20 个提升效率的 JS 简写技巧助你告别屎山轻松编写优雅的代码
移除数组假值
可以使用 filter() 结合 Boolean 来简化移除数组假值操作。假值指的是在条件判断中被视为 false 的值例如 null、undefined、空字符串 或 、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() 方法因此会将每个数组元素转换为布尔值。只有转换结果为真值的元素才会保留在新数组中。
注意这种方式会将 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)) {}空值合并运算符
空值合并运算符??用于为 null 或 undefined 的变量提供默认值。
传统写法
const fetchUserData () {return 前端充电宝;};const data fetchUserData();const username data ! null data ! undefined ? data : Guest;
简化写法
const fetchUserData () {return 前端充电宝;};const data fetchUserData();const username data ?? CUGGZ;除此之外还有一个空位合并赋值运算符??用于在变量为空null 或 undefined时进行赋值操作。
传统写法
let variable1 null;let variable2 前端充电宝;if (variable1 null || variable1 undefined) {variable1 variable2;}简化写法
let variable1 null;let variable2 前端充电宝;variable1 ?? variable2;?? 的写法更加简洁和易读。它首先检查变量 variable1 是否为 null 或 undefined如果是则将它赋值为 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) {}// 下面的所有比较都将返回 true1e0 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); // 8Math.pow(2,2); // 4Math.pow(4,3); // 64简化写法
2**3 // 82**4 // 44**3 // 64从 ES7ECMAScript 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) // 1console.log(b) // 2console.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]然后使用数组解构赋值将其中的值分别赋给变量 a 和 b。由于左侧的数组和右侧的数组结构相同所以两个值会进行交换。
变量声明
当需要同时声明多个变量时可以使用变量声明的简写方法来节省时间和空间。
传统写法
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 选择器一网打尽
