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

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

目录

变量声明

三元运算符

解构赋值

解构交换

箭头函数

字符串模版

多值匹配

ES6对象简写

字符串转数字

次方相乘

数组合并

查找数组最大值最小值

获取字符串字符

并&&操作

数组排序

数组过滤

for循环

判断奇偶

数组去重

IF检查

合并对象

可选链

字符串重复

默认值

双波浪线运算符

移除对象属性

总结 

变量声明

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

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

推荐阅读

    wps如何合并章节

    wps如何合并章节,WPS教程,1.WPS表格如何实现单元格合并?WPS 表格在新版本中增加了“合并单元格”系列按钮,同时配有下拉菜单和快捷键。新增

    字符库快捷键|字符串快捷键

    字符库快捷键|字符串快捷键,,1. 字符串快捷键1、单行注释单行注释是 #Mac的快捷键是 command+/windows的快捷键是 Ctrl + /2、多行注

    Python之可迭代对象、迭代器、生成器

    Python之可迭代对象、迭代器、生成器,迭代,生成器,一、概念描述可迭代对象就是可以迭代的对象,我们可以通过内置的iter函数获取其迭代器,可

    应用程序对象

    应用程序对象,,应用程序对象是一个应用程序级对象,用于在所有用户之间共享信息,并且在Web应用程序运行期间可以保存数据。 应用的性质: 方法

    代码合并工具Meld使用初级教程

    代码合并工具Meld使用初级教程,分支,就会,一、使用场景:比如你用svn开了两个分支,分别在这两个分支上进行开发。如果没有冲突自然是很好,直接

    数列求和快捷键|数组求和快捷键

    数列求和快捷键|数组求和快捷键,,数组求和快捷键1,这是文本型数组直接运算 不可能 除非单个的取出来分割后转数值型,再找相同的X[1],进行X[2