推荐20个JavaScript代码优化的技巧

更新日期: 2022-04-27阅读: 1.1k标签: js技巧

1. 多个条件的 if 语句, includes方法

我们可以在数组中存储多个值,并且可以使用数组的 includes 方法。

if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

2.If … else 的缩写法

当我们的 if-else 条件中的逻辑比较简单时,可以使用这种简洁的方式——三元条件运算符。

let test: boolean;if (x > 100) {
    test = true;
} else {
    test = false;
}
// Shorthand
let test = (x > 10) ? true : false;
//or we can use directly
let test = x > 10;console.log(test);

3.对 Null、Undefined、Empty 这些值的检查

我们创建一个新变量,有时候需要检查是否为 Null 或 Undefined。JavaScript 本身就有一种缩写法能实现这种功能。

if (test1 !== null || test1 !== undefined || test1 !== '') {
    let test2 = test1;
}
// Shorthand
let test2 = test1 || '';

4.给多个变量赋值

我们可以使用数组解构来在一行中给多个变量赋值。

let a, b, c; 
a = 5; 
b = 8; 
c = 12;

//Shorthand 
let [a, b, c] = [5, 8, 12];

5.赋默认值

我们可以使用 OR(||) 短路运算来给一个变量赋默认值,如果预期值不正确的情况下。

//Longhand 
let imagePath; 
let path = getImagePath(); 
if(path !== null && path !== undefined && path !== '') { 
  imagePath = path; 
} else { 
  imagePath = 'default.jpg'; 
} 
//Shorthand 
let imagePath = getImagePath() || 'default.jpg';

6.交换两个变量

为了交换两个变量,我们通常使用第三个变量。我们可以使用数组解构赋值来交换两个变量。

let x = 'Hello', y = 55; 
//Longhand 
const temp = x; 
x = y; 
y = temp; 
//Shorthand 
[x, y] = [y, x];

7.多行字符串

对于多行字符串,我们一般使用 + 运算符以及一个新行转义字符(\n)。我们可以使用 (`) 以一种更简单的方式实现。

//Longhand 
console.log('JavaScript, often abbreviated as JS, is a\n' + 'programming language that conforms to the \n' + 
'ECMAScript specification. JavaScript is high-level,\n' + 
'often just-in-time compiled, and multi-paradigm.' ); 
//Shorthand 
console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMA

8.For 循环

为了遍历一个数组,我们一般使用传统的for循环。我们可以使用for...of来遍历数组。为了获取每个值的索引,我们可以使用for...in循环。

let arr = [10, 20, 30, 40]; 
//Longhand 
for (let i = 0; i < arr.length; i++) { 
  console.log(arr[i]); 
} 
//Shorthand 
//for of loop 
for (const val of arr) { 
  console.log(val); 
} 
//for in loop 
for (const index in arr) { 
  console.log(arr[index]); 
}

我们还可以使用for...in循环来遍历对象属性。

let obj = {x: 20, y: 50}; 
for (const key in obj) { 
  console.log(obj[key]); 
}

参考:JavaScript 中遍历对象和数组的不同方法 https://jscurious.com/different-ways-to-iterate-through-objects-and-arrays-in-javascript/

9.合并数组

let arr1 = [20,30];
//Longhand
let arr2 = arr1.concat([60,80]);
// [20, 30, 60, 80]
//Shorthand
let arr2 = [...arr1,60,80];
// [20, 30, 60, 80]

10.深拷贝多级对象

为了深拷贝一个多级对象,我们要遍历每一个属性并检查当前属性是否包含一个对象。如果当前属性包含一个对象,然后要将当前属性值作为参数递归调用相同的方法(例如,嵌套的对象)。

我们可以使用JSON.stringify()和JSON.parse(),如果我们的对象不包含函数、undefined、NaN 或日期值的话。

如果有一个单级对象,例如没有嵌套的对象,那么我们也可以使用扩展符来实现深拷贝。

let obj = {x: 20, y: {z: 30}}; 
//Longhand 
const makeDeepClone = (obj) => { 
  let newObject = {}; 
  Object.keys(obj).map(key => { 
    if(typeof obj[key] === 'object'){ 
      newObject[key] = makeDeepClone(obj[key]); 
    } else { 
      newObject[key] = obj[key]; 
    } 
  }); 
 return newObject; 
} 
const cloneObj = makeDeepClone(obj); 
//Shorthand 
const cloneObj = JSON.parse(JSON.stringify(obj));
//Shorthand for single level object
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};

11.重复一个字符串多次

为了重复一个字符串 N 次,你可以使用for循环。但是使用repeat()方法,我们可以一行代码就搞定。

//Longhand 
let str = ''; 
for(let i = 0; i < 5; i ++) { 
  str += 'Hello '; 
} 
console.log(str); // Hello Hello Hello Hello Hello 
// Shorthand 
'Hello '.repeat(5);

提示: 想要给某人发 100 遍“sorry”来道歉吗?用 repeat() 方法试试吧。如果你想要每次在新的一行重复字符串,可以在字符串后面加一个 。

'sorry\n'.repeat(100);

12.双非位运算符 (~~)

双非位运算符是Math.floor()方法的缩写。

//Longhand 
const floor = Math.floor(6.8); // 6 
// Shorthand 
const floor = ~~6.8; // 6

改进: 双非位运算符只对 32 位整数有效,例如 (2**31)-1 = 2147483647。所以对于任何大于 2147483647 的数字,双非位运算符 (~~) 都会给出错误的结果,这种情况下推荐使用 Math.floor() 方法。

13.找出数组中的最大和最小数字

我们可以使用 for 循环来遍历数组中的每一个值,然后找出最大或最小值。我们还可以使用 Array.reduce() 方法来找出数组中的最大和最小数字。

但是使用扩展符号,我们一行就可以实现。

// Shorthand 
const arr = [2, 8, 15, 4]; 
Math.max(...arr); // 15 
Math.min(...arr); // 2

14.指数幂

我们可以使用Math.pow()方法来得到一个数字的幂。有一种更短的语法来实现,即双星号 (**)。

//Longhand 
const power = Math.pow(4, 3); // 64 
// Shorthand 
const power = 4**3; // 64

15.字符串转成数字

有一些内置的方法,例如parseInt和parseFloat可以用来将字符串转为数字。我们还可以简单地在字符串前提供一个一元运算符 (+) 来实现这一点。

//Longhand 
let total = parseInt('453'); 
let average = parseFloat('42.6'); 
//Shorthand 
let total = +'453'; 
let average = +'42.6';

16.数字分隔符

这是比较新的语法,ES2021 提出来的,数字字面量可以用下划线分割,提高了大数字的可读性:

// 旧语法
let number = 98234567

// 新语法
let number = 98_234_567

17.善用箭头函数简化 return

ES6 的箭头函数真是个好东西,当函数简单到只需要返回一个表达式时,用箭头函数最合适不过了,return都不用写:

Longhand:
//longhand
function getArea(diameter) {
  return Math.PI * diameter
}
//shorthand
getArea = diameter => (
  Math.PI * diameter;
)

18.简化 switch

这个技巧也很常用,把switch 转换成对象的key-value形式,代码简洁多了:

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

  case 2:
    test2();
  break;

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

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

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

19.转换Boolean型

常规的boolean型值只有 true 和 false,但是在JavaScript中我们可以将其他的值认为是 ‘truthy’ 或者 ‘falsy’的。 除了0, “”, null, undefined, NaN 和 false,其他的我们都可以认为是‘truthy’的。 我们可以通过负运算符!将一系列的变量转换成“boolean”型。

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;

console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

20.Array.find 缩写法

当我们需要在一个对象数组中按属性值查找特定对象时,find 方法很有用。

const data = [{
        type: 'test1',
        name: 'abc'
    },
    {
        type: 'test2',
        name: 'cde'
    },
    {
        type: 'test1',
        name: 'fgh'
    },
]function findtest1(name) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].type === 'test1' && data[i].name === name) {
            return data[i];
        }
    }
}
//Shorthand
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }


链接: https://www.fly63.com/article/detial/11408

通过原生js判断网页图片是否已加载成功的方法总汇

在写网页的程序的时候,经常碰到要在网页加载完全之后再去展现页面,加载中的时候通过显示loading...的样式。这时候我们会直接想到使用window.onload的方式,或者是img对象的complete属性

JavaScript 异步调用——从小小题目逐步走进 JavaScript 异步调用

async/await 语法让异步调用写起来像写同步代码,在编写代码的时候,可以避免逻辑跳跃,写起来会更轻松。

UglifyJS3的使用,UglifyJS3中文文档

使用UglifyJS合并/压缩JavaScript ,UglifyJS3与UglifyJS2相比API变动较大,简化较多,文档也增加了不少示例。

不用if撸代码,是件很有趣的事。

试着不用if撸代码,是件很有趣的事,而且,万一你领会了什么是“数据即代码,代码即数据”呢?

带你理解 JS 容易出错的坑和细节

本文重在列出并解释说明 JS 中各种容易出错的坑和细节,供大家更加深入理解为什么 JS 会这样

一行能装逼的JavaScript代码

一行能装逼的JavaScript代码,其实靠的是js的类型转化的一些基本原理,本篇就来揭密”sb”是如何炼成的。相信你如果能把这个理清楚了,以后遇到类型转化之类的题目,就可以瞬间秒杀了。

JavaScript:处理值为undefined的7个技巧

学习JavaScript时,当时我对于undefined 和 null 比较困惑 ,因为他们都表示空值。他们有什么明确的区别吗?他们似乎都可以定义一个空值,而且 当你进行 在做null ===undefined 的比较时,结果是true。

js中一些怪异的写法_神奇的JavaScript

JavaScript是一门伟大的语言,作为一门弱类型语言,它拥有非常简洁的语法,庞大的生态系统,灵活性非常强大。js各种神奇的写法,所谓的神奇也就是罕见。下面就开始介绍这些怪异的写法吧。

js方式实现手机号码隐藏中间4位

在前端开发中,遇到如下需求:隐藏手机号码,将中间几位替换为*。通过js如何实现手机号码隐藏中间4位呢?下面整理几种实现方式:使用正则、通过长度截取。

js实现浏览器:加入收藏、设为首页、保存到桌面的方法功能

在一些网页中我们可以常见的“设置为首页”和“ 收藏本站”,以及“保存到桌面”等功能,使用js是如何实现的呢?这里为大家分享下实现方法,完美兼容IE,chrome,ff等浏览器

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!