一文教會你提高Javascript代碼效率的技巧
更新時間：2022年07月01日 10:38:19 作者：極客飛兔
這篇文章主要給大家介紹了關于提高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];
箭頭函數(shù)
- 函數(shù)的簡寫方式
// 非效率寫法
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};字符串轉數(shù)字
// 非效率寫法
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;
數(shù)組合并
let arr1 = [520, 1314]; // 非效率寫法 let arr2 = arr1.concat([1225, 1115]); // 效率寫法 let arr2 = [...arr1, 1225, 1115];
查找數(shù)組最大值最小值
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();數(shù)組排序
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]
數(shù)組過濾
- 從數(shù)組中過濾假數(shù)值
const arr = [3, '1', '', 0, false, null, undefined]; arr.filter(Boolean); // [3, '1']
for循環(huán)
let arr = ['極客飛兔', 520, 1314, '程序員']
// 非效率寫法
for (var i = 0; i < arr.length; i++) {}
// 效率寫法
for (const i in arr) {}
// 效率寫法
for (const i of arr) {}判斷奇偶
- 使用& 1 判斷奇偶數(shù)
// 非效率寫法
if(value / 2 == 0) {
// 是偶數(shù)
} else {
// 是奇數(shù)
}
// 效率寫法
2 & 1; // 0 返回0表示偶數(shù)
3 & 1; // 1 返回1表示奇數(shù)數(shù)組去重
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代碼技巧內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了ES6實現(xiàn)的遍歷目錄函數(shù),涉及ES6文件目錄的遍歷、讀取、回調函數(shù)及json相關操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了web如何改變主題配色方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章介紹了js 單擊式的下拉菜單效果實例，有需要的朋友可以參考一下2013-08-08
這篇文章主要為大家詳細介紹了JavaScript分頁組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript解決浮點數(shù)計算不準確問題的方法分析
這篇文章主要介紹了JavaScript解決浮點數(shù)計算不準確問題的方法,結合實例形式分析了javascript浮點數(shù)運算精度誤差的原因以及相關的解決方法與具體操作技巧,需要的朋友可以參考下2018-07-07
超越Jquery_01_isPlainObject分析與重構
isPlainObject是Jquery1.4后提供的新方法,用于判斷對象是否是純粹的對象（通過 {} 或者 new Object 創(chuàng)建的）。2010-10-10
加入收藏夾功能在網上可以搜索到很多相關的文章，本文要為大家介紹的是如何使用原生js來實現(xiàn)所謂的收藏，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了JS實現(xiàn)淡入淡出圖片效果的方法,結合實例形式分析了js鼠標響應實現(xiàn)圖片淡入淡出效果的原理與相關實現(xiàn)技巧,需要的朋友可以參考下2016-12-12
基于jquery實現(xiàn)導航菜單高亮顯示（兩種方法）
本篇文章是基于jquery實現(xiàn)導航菜單高亮顯示，當點擊不同導航菜單實現(xiàn)當前點擊的菜單是高亮的，有需要的朋友可以關注下本文2015-08-08
這篇文章主要介紹了JS模擬簡易滾動條效果代碼,可模擬出滾動條拖動顯示的效果,涉及JavaScript鼠標事件的響應及頁面元素運算的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04