一文教会你提高Javascript代码效率的技巧

 更新时间:2022年07月01日 10:38:19   作者:极客飞兔  
这篇文章主要给大家介绍了关于提高Javascript代码效率的技巧,通过这些技巧可以提高大家工作效率,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

变量声明

多个变量的声明,可以简写

// 非效率写法
let x;
let y;
let z = 520;

// 效率写法
let x, y, z = 520;

三元运算符

在条件判断时,可以使用三元运算符增加效率

let num1 = 520;
let num2 = 1314;

// 非效率写法
if (num1 > num2) {
        // ...
} else {
        // ...
}

// 效率写法
let result = num1 > num2 ? true : false;

解构赋值

  • 变量赋值
let a, b, c;

// 非效率写法
a = 1;
b = 2;
c = 3;
 
// 效率写法
let [a, b, c] = [1, 2, 3];

解构交换

  • 交换两个变量
let x = '极客飞兔', y = '程序员';
 
// 非效率写法
const temp = x;
x = y;
y = temp;
 
// 效率写法
[x, y] = [y, x];

箭头函数

  • 函数的简写方式
// 非效率写法
function add(num1, num2) {
  return num1 + num2;
}
 
// 效率写法
const add = (num1, num2) => num1 + num2;

字符串模版

// 非效率写法
console.log('极客飞兔的年龄 ' + age + ' 他的身高 ' + height);
 
// 效率写法
console.log(`极客飞兔的年龄 ${age} 他的身高 ${height}`);

多值匹配

  • 判断某个值是否等于某个多个值中的一个
// 非效率写法
if (value === 1 || value === '飞兔' || value === 2 || value === '程序员') {
  // ...
}
 
// 效率写法一
if ([1, '飞兔', 2, '程序员'].indexOf(value) >= 0) {
   // ...
}
 
// 效率写法二
if ([1, '飞兔', 2, '程序员'].includes(value)) { 
    // ...
}

ES6对象简写

let firstname = '极客';
let lastname = '飞兔';
 
// 非效率写法
let userinfo = {firstname: firstname, lastname: lastname};
 
// 效率写法
let userinfo = {firstname, lastname};

字符串转数字

// 非效率写法
let total = parseInt('520');
let average = parseFloat('13.14');
 
// 效率写法
let total = +'520';
let average = +'13.14';

次方相乘

// 非效率写法
const power = Math.pow(2, 5);
 
// 效率写法
const power = 2**5;

数组合并

let arr1 = [520, 1314];
 
// 非效率写法
let arr2 = arr1.concat([1225, 1115]);
 
// 效率写法
let arr2 = [...arr1, 1225, 1115];

查找数组最大值最小值

const arr = [520, 1314, 1115, 1225];

// 效率写法
Math.max(...arr);
Math.min(...arr);

获取字符串字符

let str = 'https://autofelix.blog.csdn.net/';
 
// 非效率写法
str.charAt(10);
 
// 效率写法
str[10];

并&&操作

function fn() {
    return true;
}

let flag = true;

// 非效率写法
if (flag) {
    fn();
}

// 效率写法
flag && fn();

数组排序

const arr = [40, 2, 1, 5, 99, 111];

// 从小到大
arr.sort((a, b) => a - b); // [1, 2, 5, 40, 99, 111]

// 从大到小
arr.sort((a, b) => b - a); // [111, 99, 40, 5, 2, 1]

数组过滤

  • 从数组中过滤假数值
const arr = [3, '1', '', 0, false, null, undefined];

arr.filter(Boolean); // [3, '1']

for循环

let arr = ['极客飞兔', 520, 1314, '程序员']

// 非效率写法
for (var i = 0; i < arr.length; i++) {}

// 效率写法
for (const i in arr) {}
// 效率写法
for (const i of arr) {}

判断奇偶

  • 使用& 1 判断奇偶数
// 非效率写法
if(value / 2 == 0) {
    // 是偶数
} else {
    // 是奇数
}

// 效率写法
2 & 1; // 0 返回0表示偶数
3 & 1; // 1 返回1表示奇数

数组去重

const array  = [5,4,7,8,9,2,7,5];

// 效率的两种写法
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
const nonUnique = [...new Set(array)];

IF检查

// 非效率写法
if (result === true)
  
// 效率写法
if (result)

合并对象

const user = { 
  name: '极客飞兔', 
  gender: '男' 
};

const college = { 
  primary: '清华大学', 
  secondary: '社会大学' 
};

const skills = { 
  java: 'JAVA', 
  php: 'PHP', 
  python: 'PYTHON' 
};

const summary = {...user, ...college, ...skills};

可选链

const user = {
  employee: {
    name: "极客飞兔"
  }
};

// 可选链
user.employee?.name;
user.employ?.name;
user.employ.name;

字符串重复

// 非效率写法
let str= ''; 
for(let i = 0; i < 5; i ++) { 
  str+= 'autofelix '; 
} 

// 效率写法
'autofelix '.repeat(5);

默认值

let user; 
let name = getUserName();
 
// 非效率写法
if (name !== null && name !== undefined && name !== '') {
    user = name;
} else {
    user = '极客飞兔';
}
 
// 效率写法
let user = getUserName() || '极客飞兔';

双波浪线运算符

// 非效率写法
const floor = Math.floor(6.8); // 6
 
// 效率写法
const floor = ~~6.8; // 6

移除对象属性

let obj = {x: 45, y: 72, z: 68, p: 98};
 
// 非效率写法
delete obj.x;
delete obj.p;
console.log(obj); // {y: 72, z: 68}
 
// 效率写法
let {x, p, ...newObj} = obj;
console.log(newObj); // {y: 72, z: 68}

总结 

到此这篇关于提高Javascript代码效率技巧的文章就介绍到这了,更多相关js代码技巧内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ES6实现的遍历目录函数示例

    ES6实现的遍历目录函数示例

    这篇文章主要介绍了ES6实现的遍历目录函数,涉及ES6文件目录的遍历、读取、回调函数及json相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • 详解web如何改变主题配色方法示例

    详解web如何改变主题配色方法示例

    这篇文章主要为大家介绍了web如何改变主题配色方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • js 单击式的下拉菜单效果实例

    js 单击式的下拉菜单效果实例

    这篇文章介绍了js 单击式的下拉菜单效果实例,有需要的朋友可以参考一下
    2013-08-08
  • JavaScript分页组件使用方法详解

    JavaScript分页组件使用方法详解

    这篇文章主要为大家详细介绍了JavaScript分页组件使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JavaScript解决浮点数计算不准确问题的方法分析

    JavaScript解决浮点数计算不准确问题的方法分析

    这篇文章主要介绍了JavaScript解决浮点数计算不准确问题的方法,结合实例形式分析了javascript浮点数运算精度误差的原因以及相关的解决方法与具体操作技巧,需要的朋友可以参考下
    2018-07-07
  • 超越Jquery_01_isPlainObject分析与重构

    超越Jquery_01_isPlainObject分析与重构

    isPlainObject是Jquery1.4后提供的新方法,用于判断对象是否是纯粹的对象(通过 {} 或者 new Object 创建的)。
    2010-10-10
  • 原生JS实现加入收藏夹的代码

    原生JS实现加入收藏夹的代码

    加入收藏夹功能在网上可以搜索到很多相关的文章,本文要为大家介绍的是如何使用原生js来实现所谓的收藏,感兴趣的朋友可以参考下
    2013-10-10
  • JS实现淡入淡出图片效果的方法分析

    JS实现淡入淡出图片效果的方法分析

    这篇文章主要介绍了JS实现淡入淡出图片效果的方法,结合实例形式分析了js鼠标响应实现图片淡入淡出效果的原理与相关实现技巧,需要的朋友可以参考下
    2016-12-12
  • 基于jquery实现导航菜单高亮显示(两种方法)

    基于jquery实现导航菜单高亮显示(两种方法)

    本篇文章是基于jquery实现导航菜单高亮显示,当点击不同导航菜单实现当前点击的菜单是高亮的,有需要的朋友可以关注下本文
    2015-08-08
  • JS模拟简易滚动条效果代码(附demo源码)

    JS模拟简易滚动条效果代码(附demo源码)

    这篇文章主要介绍了JS模拟简易滚动条效果代码,可模拟出滚动条拖动显示的效果,涉及JavaScript鼠标事件的响应及页面元素运算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-04-04

最新评论