iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文教会你提高Javascript代码效率的技巧
  • 215
分享到

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

2024-04-02 19:04:59 215人浏览 薄情痞子
摘要

目录变量声明三元运算符解构赋值解构交换箭头函数字符串模版多值匹配es6对象简写字符串转数字次方相乘数组合并查找数组最大值最小值获取字符串字符并&&操作数组排序数组过滤

变量声明

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

// 非效率写法
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代码技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 一文教会你提高Javascript代码效率的技巧

本文链接: https://www.lsjlt.com/news/153161.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 一文教会你提高Javascript代码效率的技巧
    目录变量声明三元运算符解构赋值解构交换箭头函数字符串模版多值匹配ES6对象简写字符串转数字次方相乘数组合并查找数组最大值最小值获取字符串字符并&&操作数组排序数组过滤...
    99+
    2024-04-02
  • 提高CSS代码效率的技巧有哪些
    本篇内容介绍了“提高CSS代码效率的技巧有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.注意外边距...
    99+
    2024-04-02
  • 提高效率的Java代码小技巧有哪些
    提高效率的Java代码小技巧有哪些,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。前言代码优化 ,一个很重要的课题。可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改...
    99+
    2023-06-16
  • 让你效率更高的CSS代码技巧有哪些
    这篇文章主要为大家展示了“让你效率更高的CSS代码技巧有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“让你效率更高的CSS代码技巧有哪些”这篇文章吧。 1...
    99+
    2024-04-02
  • Python中提高代码效率技巧是怎么样的
    这篇文章将为大家详细讲解有关Python中提高代码效率技巧是怎么样的,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。对象相等。您认为type(a) == type(b)和type(a) is ...
    99+
    2023-06-17
  • 帮你提高开发效率的JavaScript20个技巧
    目录1. 申明和初始化数组2.进行求和、最小值和最大值3. 对字符串、数字或对象的数组进行排序4. 是否需要从一个数组中过滤掉无用的值?5. 为各种条件使用逻辑运算符6. 删除重复的...
    99+
    2024-04-02
  • JavaScript小技巧带你提升你的代码技能
    目录1、过滤唯一值2、短路求值(Short-Circuit Evaluation)2.1场景举例3、转换Boolean型4、转换String型5、转换Number类型6、快速求幂7、...
    99+
    2024-04-02
  • 这5个console.log()技巧帮你提高工作效率
    1. 使用console.time()和console.timeEnd()来测量代码执行时间:这对于调试和优化代码很有帮助。可以使用...
    99+
    2023-09-20
    工作效率
  • 这5个 console.log() 技巧帮你提高工作效率
    1. 使用 console.time() 和 console.timeEnd() 来测量代码执行时间。这对于优化代码和定位性能瓶颈非...
    99+
    2023-09-22
    console.log()
  • ASP语法高手技巧:提高你的效率和准确性
    ASP是一种用于开发Web应用程序的编程语言。它是一种强大的语言,可以用来创建各种类型的Web应用程序。ASP语法也相对简单,很容易学习。但是,如果你想成为一名ASP高手,你还需要掌握一些技巧。 使用代码段 代码段是一种将代码块分组在一起...
    99+
    2024-02-21
    ASP语法 代码段 注释 变量 运算符
  • 一定有你会用到的JavaScript一行代码实用技巧总结
    目录引言一、日期处理1. 检查日期是否有效2. 计算两个日期之间的间隔3. 查找日期位于一年中的第几天4. 时间格式化二、字符串处理1. 字符串首字母大写2. 翻转字符串3. 随机字...
    99+
    2024-04-02
  • 提高效率的Linux技巧有哪些
    这篇文章将为大家详细讲解有关提高效率的Linux技巧有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。命令编辑如果要对一个已输入的命令进行修改,可以使用 ^a(ctrl + a)或 ^e(ctrl + ...
    99+
    2023-06-16
  • C语言中提高代码执行效率的小技巧有哪些
    本篇内容主要讲解“C语言中提高代码执行效率的小技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“C语言中提高代码执行效率的小技巧有哪些”吧!一、方法参数限...
    99+
    2024-04-02
  • 提高你的工作效率linux技巧具体用哪些
    提高你的工作效率linux技巧具体用哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。linux中的一些小技巧可以大大提高你的工作效率,本文就细数那些提高效率或者简单却有效的l...
    99+
    2023-06-05
  • Laravel 异步编程:如何提高你的代码效率?
    在现代 Web 应用程序中,异步编程已经成为了非常重要的一部分。它可以帮助我们更高效地处理大量的数据,并且可以让我们的应用程序更加稳定、响应更加迅速。在 Laravel 中,异步编程已经被广泛地应用,因为 Laravel 框架本身就提供了...
    99+
    2023-08-26
    laravel 教程 异步编程
  • JavaScript的编程技巧:如何提高代码质量?
    JavaScript是一种广泛使用的编程语言,可以用于开发各种类型的应用程序,包括网站、桌面应用程序、移动应用程序等。然而,编写高质量的JavaScript代码并不容易。在本文中,我们将探讨一些JavaScript编程技巧,以提高代码质量。...
    99+
    2023-10-15
    编程算法 javascript git
  • 值得收藏的9个提高代码运行效率的小技巧(推荐)
    目录1. 减小程序计算量 1.1 示例代码1.2 分析代码1.3 改进代码2. 提取代码中的公共部分2.1 示例代码2.2 分析代码2.3 改进代码3. 消除循环中低效代码...
    99+
    2024-04-02
  • Python 字典技巧锦囊:提升代码效率的秘诀
    一、字典的创建 字典的字面量创建: my_dict = {"name": "John Doe", "age": 30, "city": "New York"} 字典的内置函数创建: my_dict = dict(name="Jo...
    99+
    2024-02-22
    Python 字典 技巧 创建 修改 查找 遍历
  • 提高开发效率的Vue技巧有哪些
    本篇内容主要讲解“提高开发效率的Vue技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“提高开发效率的Vue技巧有哪些”吧!组件(component)的使...
    99+
    2024-04-02
  • Java 文件操作高级技巧:提升开发效率
    1. 高效文件读取 使用BufferedReader/BufferedWriter提高读写效率:BufferedReader和BufferedWriter是高效的字符流,能够一次读取或写入一行文本,比直接使用InputStream或O...
    99+
    2024-02-26
    Java、文件操作、文件读取、文件写入、文件复制、文件移动、文件删除、文件元数据、文件锁
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作