编程技巧│提高 Javascript 代码效率的技巧

Posted 2022-06-27 极客飞兔

目录

• • • 一、变量声明
    • 二、三元运算符
    • 三、解构赋值
    • 四、解构交换
    • 五、箭头函数
    • 六、字符串模版
    • 七、多值匹配
    • 八、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