编程技巧│提高 Javascript 代码效率的技巧
Posted 极客飞兔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了编程技巧│提高 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 代码效率的技巧的主要内容,如果未能解决你的问题,请参考以下文章