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

2022 年 6 月 25 日
本文字数：2042 字
阅读完需：约 7 分钟

一、变量声明

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

// 非效率写法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}

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/d8991492c580177d8ce95bca2】。未经作者许可，禁止转载。

极客飞兔

关注

腾讯 2021.03.22 加入

毕业于全国重点大学，CSDN博客专家、阿里云技术专家、华为云云享专家、北极代码库贡献者、github开发者计划成员、任职国内知名游戏公司

发布

暂无评论

创作场景

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

一、变量声明

二、三元运算符

三、解构赋值

四、解构交换

五、箭头函数

六、字符串模版

七、多值匹配

八、ES6 对象简写

九、字符串转数字

十、次方相乘

十一、数组合并

十二、查找数组最大值最小值

十三、获取字符串字符

十四、并 &&操作

十五、数组排序

十六、数组过滤

十七、for 循环

十八、判断奇偶

十九、数组去重

二十、IF 检查

二十一、合并对象

二十二、可选链

二十三、字符串重复

二十四、默认值

二十五、双波浪线运算符

二十六、移除对象属性

极客飞兔

评论