JavaScript 优化小技巧 简洁的 JS 代码片段

最新推荐文章于 2023-11-22 23:14:16 发布
最新推荐文章于 2023-11-22 23:14:16 发布
阅读量193 收藏
点赞数 1
分类专栏： js
原文链接：https://mp.weixin.qq.com/s/MtP1FeXLgR9oMEQlUe8WZg
版权

一 if多条件判断

// 冗余
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {}

// 简洁
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}

二 if…else…

// 冗余
let test: boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}

// 简洁
let test = x > 10;

三 Null, Undefined, 空值检查

// 冗余
if (first !== null || first !== undefined || first !== '') {
    let second = first;
}

// 简洁
let second = first || '';

四 foreach循环

// 冗余
for (var i = 0; i < testData.length; i++)
    
// 简洁
for (let i in testData)
// 或
for (let i of testData)

五 函数条件调用

// 冗余
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}

// 简单
(test3 === 1? test1:test2)();

六 switch条件

// 冗余
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // so on...
}

// 简洁
var data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]( "anything] && data[anything");

七 多行字符串

// 冗余
const data = 'abc abc abc abc abc abc\n\t'
    + 'test test,test test test test\n\t'

// 简洁
const data = `abc abc abc abc abc abc
         test test,test test test test`

八 隐式返回

// 冗余
function getArea(diameter) {
  return Math.PI * diameter
}

// 简洁
getArea = diameter => (
  Math.PI * diameter;
)

九 重复字符串多次


// 冗余
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 

// 简洁
'test '.repeat(5);

十 幂乘


// 冗余
Math.pow(2,3);

// 简洁而
2**3 // 8

1、单行 If-Else 语句

这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。

例如：

const age = 12;
let ageGroup;
// LONG FORM
if (age > 18) { 
    ageGroup = "An adult";
} else { 
    ageGroup = "A child";
}
// SHORTHAND
ageGroup = age > 18 ? "An adult" : "A child";

但是，不要过度使用它。它会使你的代码更加冗长。明智的做法是仅用此替换简单的表达式以提高可读性并减少代码行数。

2、从数组中删除重复项

在 JavaScript 中，Set 是一个集合，它允许你仅存储唯一值。这意味着删除任何重复的值。

因此，要从数组中删除重复项，你可以将其转换为集合，然后再转换回数组。

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];c
onst uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

困惑吗？让我解释一下它是如何工作的：

1)、new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。

2）、展开运算符…将任何可迭代对象转换为数组。这意味着将集合转换回数组。[…new Set(numbers)]

3、 较短的 If-Else 的空合并

这也是 if-else 的简写。

你可以使用看涨合并，而不是使用 if-else 构造来检查值是否为空。该nullish合并操作 ??，如果没有定义左侧返回右侧。如果是，则返回左侧：

let maybeSomething;
// LONG FORM
if(maybeSomething){  
    console.log(maybeSomething)
} else { 
    console.log("Nothing found")
}
//SHORTHAND
console.log(maybeSomething ?? "Nothing found")

4、防止崩溃的可选链

如果访问未定义的属性，则会产生错误。这就是可选链的用武之地。

在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止你的代码崩溃。

例如：

const student = { 
    name: "Matt",  
    age: 27,  
    address: {  
        state: "New York" 
    },
};// LONG FORM
console.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined
// SHORTHAND
console.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined

5、在没有第三个变量的情况下交换两个变量

在 JavaScript 中，你可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个：

let x = 1;
let y = 2;
// LONGER FORM
let temp = x;
x = y;
y = temp;
// SHORTHAND
[x, y] = [y, x];

6、将任何值转换为布尔值

在 JavaScript 中，你可以使用 !! 在 JS 中将任何内容转换为布尔值。

例如，这里有一些例子：

!!true    // true
!!2       // true
!![]      // true
!!"Test"  // true
!!false   // false
!!0       // false
!!""      // false

7、扩展运算符

使用扩展运算符组合两个数组…：

const nums1 = [1, 2, 3];c
onst nums2 = [4, 5, 6];
// LONG FORM
let newArray = nums1.concat(nums2);
// SHORTHAND
newArray = [...nums1, ...nums2];

也可以使用此语法代替将值推送到数组：

let numbers = [1, 2, 3];
// LONGER FORM
numbers.push(4);
numbers.push(5);
// SHORTHAND
numbers = [...numbers, 4, 5];

8、传播解构

使用扩展运算符将剩余元素分配给变量：

const student = {  
    name: "Matt", 
    age: 23, 
    city: "Helsinki", 
    state: "Finland",
};
// LONGER FORM
const name = student.name;
const age = student.age;
const address = { city: student.city, state: student.state };
// SHORTHAND
const { name, age, ...address } = student;

9、 使用 && 进行短路评估

不必用if语句检查某事是否为真，你可以使用&&运算符：

var isReady = true;f
unction doSomething(){ 
    console.log("Yay!");
}
// LONGER FORM
if(isReady){ 
    doSomething();
}
// SHORTHAND
isReady && doSomething();

10、类固醇的字符串

通过将字符串包装在反引号内并${}用于嵌入值，从而在字符串之间插入变量。

例如：

const age = 41;
const sentence = `I'm ${age} years old`;
// result: I'm 41 years old

11、 从数组中查找特定元素

使用find()方法查找匹配特定条件的元素：

const fruits = [  
    { type: "Banana", color: "Yellow" }, 
    { type: "Apple", color: "Green" }
];
// LONGER FORM
let yellowFruit;
for (let i = 0; i < fruits.length; ++i) { 
    if (fruits[i].color === "Yellow") {  
        yellowFruit = fruits[i]; 
    }
}
// SHORTHAND
yellowFruit = fruits.find((fruit) => fruit.color === "Yellow");

12、对象属性赋值

你是否希望对象键与值具有相同的名称？你可以省略对象文字来执行此操作：

const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";/
/ LONGER FORM
const person = {  
    name: name, 
    city: city, 
    age: age, 
    favoriteFood: favoriteFood
};
// SHORTHAND
const person = { name, city, age, favoriteFood };

13、压缩 For 循环

使用内置forEach()方法通过一行代码循环遍历数组：

const numbers = [1, 2, 3, 4, 5];/
/ LONGER FORM
for(let i = 0; i < numbers.length; i++){ 
    console.log(numbers[i]);
}
// SHORTHAND
numbers.forEach(number => console.log(number));

14、 默认功能参数

你可以为函数参数提供默认值：

// LONG FORM
function pickUp(fruit) { 
    if(fruit === undefined){  
        console.log("I picked up a Banana");
    } else {  
        console.log(`I picked up a ${fruit}`); 
    }
}
// SHORTHAND
function pickUp(fruit = "Banana") { 
    console.log(`I picked up a ${fruit}`)
}
pickUp("Mango"); // -> I picked up a Mango
pickUp();        // -> I picked up a Banana

15、将对象的值收集到数组中

用于Object.values()将对象的所有值收集到一个新数组中：

const info = { name: "Matt", country: "Finland", age: 35 };/
/ LONGER FORM
let data = [];
for (let key in info) { 
    data.push(info[key]);
}
// SHORTHAND
const data = Object.values(info);

16、检查一个项目是否存在于数组中

这不一定是速记，因为你几乎不会保存几个字符。但这是一种更清洁的方法。

你可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中。这使你的意图非常明确：

let numbers = [1, 2, 3];
// LONGER FORM
const hasNumber1 = numbers.indexOf(1) > -1 // -> True
// SHORTHAND/CLEANER APPROACH
const hasNumber1 = numbers.includes(1)     // -> True

17、压缩多个条件

避免使用长|| 检查多个条件链，你可以使用你刚刚在上一个技巧中学到的东西——即，使用 includes() 方法：

const num = 1;/
/ LONGER FORM
if(num == 1 || num == 2 || num == 3){ 
    console.log("Yay");
}
// SHORTHAND
if([1,2,3].includes(num)){ 
    console.log("Yay");
}

18、 指数运算符

你Math.pow()习惯把一个数字提高到一个幂吗？你知道你也可以使用**运算符吗？

// LONGER FORM
Math.pow(4,2); // 16
Math.pow(2,3); // 8
// SHORTHAND
4**2 // 16
2**3 // 8

19、 Math.floor() 简写

四舍五入Math.floor()并不是什么新鲜事。但是你知道你也可以使用~~运算符吗？

例如：

// LONG FORMM
ath.floor(5.25) // -> 5.0
// SHORTHAND
~~5.25 // -> 5.0

20、 用一行代码分配多个值

使用解构语法在一行中分配多个值：

let num1, num2;
// LONGER FORM
num1 = 10;
num2 = 100;
// SHORTHAND
[num1, num2] = [10, 100];

这也适用于使用 JavaScript 对象：

student = {  
    name: "Matt", 
    age: 29,
};
// LONGER FORM
let name = student.name;
let age = student.age;
// SHORTHAND
let { name, age } = student;

地址： https://mp.weixin.qq.com/s/-HMEcgqkJESs3_BvmDJ9RQ

参考
原文 - dev.to/blessingart…[1]

原文首发 - github.com/reng99/blog…[2]

更多内容 - github.com/reng99/blog…[3]

Lenny-zlp
关注
专栏目录
20个简洁的 JS 代码片段，web前端入门开发
2201_75604580的博客
03-16 1084
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-mZGnHrhy-1710584704897)][外链图片转存中…(img-OjkyyWJJ-1710584704897)][外链图片转存中…(img-32nUVEwo-1710584704898)]
JavaScript性能优化小知识总结
Optimistic
03-05 514
JavaScript的性能问题不容小觑，这就需要我们开发人员在编写JavaScript程序时多注意一些细节，本文非常详细的介绍了一下JavaScript性能优化方面的知识点，绝对是干货。 前言 一直在学习javascript，也有看过《犀利开发Jquery内核详解与实践》，对这本书的评价只有两个字犀利，可能是对javascript理解的还不够透彻异或是自己太笨，更多的是自己不擅于思考懒
10个JS实用优化小技巧
hello world的博客
02-01 240
Write Less Do the Same if多条件判断 // 冗余 if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {} // 简洁 if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {} if…else… // 冗余 let test: boolean; if (x > 100) { test = true; } else { test = fals
Web性能优化系列：10个JavaScript性能提升的技巧
weixin_33895016的博客
06-18 133
由伯乐在线-Delostik翻译，黄利民校稿。未经许可，禁止转载！英文出处：jonraasch.com。欢迎加入翻译小组。 Nicholas Zakas是一位JS 大师，Yahoo! 首页的前端主程。他是《高性能 Javascript》的作者，这本书值得每个程序员去阅读。 当谈到 JS 性能的时候，Zakas差不多就是你要找的，2010年六月他在Google Tech Ta...
34个可以提升开发效率的JavaScript单行程序代码片段
web前端开发
10-09 132
英文 | https://javascript.plainenglish.io/another-17-life-saving-javascript-one-liners-8c335bf73...
JavaScript开发优化技巧
qsj0606的博客
05-04 539
JavaScript开发优化技巧 1、按字符串属性值对对象数组进行排序 可以通过不同的方式来完成。 1）、使用Underscore _.sortBy(collection, [iteratees=[_.identity]]) 创建一个元素数组，并按照在每个Iteratee中运行集合中每个元素的结果，以升序排序。此方法执行稳定的排序，即保留相等元素的原始排序顺序。迭代对象由一个参数（value）调用。 var objs = [ { val1: 'abc',val2: 'a' }, { val1:
【JavaScript源代码】11个Javascript小技巧帮你提升代码质量(小结).docx
12-27
### JavaScript 源代码优化技巧详解 #### 一、提炼函数 提炼函数是提升代码质量的一个重要手段。通过将重复的代码片段提炼成独立的函数，不仅能够减少代码冗余，还能提高代码的可读性和可维护性。例如，在原始示例...
24个解决实际问题的ES6代码片段(小结)
10-15
了解和掌握这些技巧能够让你的JavaScript代码更加高效和易读。在实际开发中，结合使用这些功能可以提高代码的可维护性和性能。记住，实践是检验真理的唯一标准，尝试在你的项目中应用这些代码片段，以提升你的编程...
Javascript字符串拼接小技巧(推荐)
10-22
JavaScript是一种广泛应用于网页开发的编程语言，尤其擅长处理网页上的文本内容，其中字符串拼接是一项基础且常用的操作。...通过上述介绍的小技巧，可以有效地提高JavaScript代码的整洁度和执行效率。
200多个js技巧代码
10-19
### 200多个JS技巧代码中的精选知识点 #### 1. 文本框焦点问题处理 在Web开发中，文本框焦点的管理非常重要，能够提升用户体验。通过使用`onBlur`、`onFocus`等事件，可以实现文本框提示信息的自动隐藏与显示功能。...
JS常用小技巧让你的代码更简洁
CRMEB小程序商城的博客
10-13 442
1、简单的if else的简写 当我们只有一层的if判断的时候，我们可以简写这个条件判断 //原 let id = this.id if(id === 'xxxxxx'){ this.flag = true }else{ this.flag = false } //上面的方法可以简写成 this.flag = (id === 'xxxxxx') ? true : false 复制代码 2、判断空值，null,nudefined 有时候，我们会需要判断某个值是否为空，方便我们来处理下一步；或者检查输入的
js 在while循环判断条件中进行赋值语句操作
weixin_42351895的博客
08-14 4251
最近在使用while的时候，由于使用正则的exec方法，同时也是进行全局匹配，需要匹配出全部的内容，所以想用while进行循环获取。突然想起while可以在条件判断中进行while(nowParam = reg.exec(param) 语句的赋值。 这种用法以前我一直不太敢使用，担心会出现什么问题，一般都是先在循环外部定义好遍历，将值赋给遍历后再作为循环的条件。 所以今天想弄清楚这个的使用方法： 原代码： while(nowParam = reg.exec(param)){ co
运算符
qq_41340792的博客
12-31 385
运算元 运算符应用的对象。 1 + 2 = 3 1,2就是运算元 一元运算符：只有一个运算元的运算符。 var a = -1; a = -a; 表达式： 由运算符和变量/常量组成的式子 a+1 、1+2、 3+5、 5-4、 a-b、 c*d 常见的数学运算符 + 、-、 、 /、 % 、指数：* 多个数字和字符相加时，注意顺序不同，结果也会不同 var a = 3 + 4 +‘5’ ; 结果为：75 var a = ‘3’ + 4 + 5 ; 结果为345 余数运算符% 返回前一个运算云被后一个运算元
JS中的一些条件判断语句
weixin_52767262的博客
08-18 4250
1.if语句 满30减20用程序表示 var a=30; if(a>=30){ console.log(a-20); } if(条件表达式){ 语句块 } 如果语句块之间只有一行代码，大括号可以省略 2.if-else语句 满100减20否则打九折 var a=90; if(a>=100){ console.log(a-20); }else{ console.log(a*0.9); } if(条件表达式){ 语句块1 }else{ 语句块2 } if-else嵌套 打印成绩： 100
JavaScript
weixin_58473601的博客
01-07 1286
JavaScript
js赋值运算符有哪些,javascript的运算符号
最新发布
2301_79533350的博客
11-22 120
大家好，给大家分享一下js赋值运算符有哪些，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！这篇文章主要介绍了js中的赋值运算符，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。
js if语句有多个条件需同时满足时的写法
热门推荐
qq_35606790的博客
06-14 5万+
if(a1&&b2){ //do something }//条件是a等于1 并且 b等于2时才能成立，两个条件必须同时满足 if(a1||b2){ //do something }//条件是a等于1 或者 b等于2时才能成立，两个条件满足一个就行 if(a==1){ //do something }else if(b==2){ //do something } else i...
js if判断多个条件_JS条件判断小技巧（一）
weixin_39540271的博客
12-03 4891
经常code review，我发现JS newbie很容易写出一堆冗长的代码。今天就列几个比较常见的“解决之道”，看看如何减少JS里的条件判断。提前返回，少用if...else“if...else是编程语言的精华。——鲁迅”但是过多的嵌套，还是挺令人抓狂的。这里有一个很典型的条件嵌套：function func(){ var result; if( conditionA ) { if( ...
一些JS优化小技巧
马优晨
02-01 427
1. if多条件判断 如果if里面包含多个判断条件，可以把判断条件存到一个数组，然后在去这个数组中检索”输入的值“是否满足条件； // 冗余 if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {} // 简洁 if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {} 2. if…else… 单个if else可以直接使用变量赋值替代，省时省力 // 冗余 let test: boolean;
提升JavaScript代码质量：11个实用技巧与示例
本文提供了11个实用的JavaScript编程技巧，旨在帮助提升代码质量和可维护性。以下是每个技巧的详细解释： 1. **提炼函数** - 将一段复杂的逻辑拆分为独立的函数，如上面的例子中，将原本在`main()`函数中的数据获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值