一文教會(huì)你提高Javascript代碼效率的技巧
變量聲明
多個(gè)變量的聲明,可以簡(jiǎn)寫(xiě)
// 非效率寫(xiě)法 let x; let y; let z = 520; // 效率寫(xiě)法 let x, y, z = 520;
三元運(yùn)算符
在條件判斷時(shí),可以使用三元運(yùn)算符增加效率
let num1 = 520; let num2 = 1314; // 非效率寫(xiě)法 if (num1 > num2) { // ... } else { // ... } // 效率寫(xiě)法 let result = num1 > num2 ? true : false;
解構(gòu)賦值
- 變量賦值
let a, b, c; // 非效率寫(xiě)法 a = 1; b = 2; c = 3; // 效率寫(xiě)法 let [a, b, c] = [1, 2, 3];
解構(gòu)交換
- 交換兩個(gè)變量
let x = '極客飛兔', y = '程序員'; // 非效率寫(xiě)法 const temp = x; x = y; y = temp; // 效率寫(xiě)法 [x, y] = [y, x];
箭頭函數(shù)
- 函數(shù)的簡(jiǎn)寫(xiě)方式
// 非效率寫(xiě)法 function add(num1, num2) { return num1 + num2; } // 效率寫(xiě)法 const add = (num1, num2) => num1 + num2;
字符串模版
// 非效率寫(xiě)法 console.log('極客飛兔的年齡 ' + age + ' 他的身高 ' + height); // 效率寫(xiě)法 console.log(`極客飛兔的年齡 ${age} 他的身高 ${height}`);
多值匹配
- 判斷某個(gè)值是否等于某個(gè)多個(gè)值中的一個(gè)
// 非效率寫(xiě)法 if (value === 1 || value === '飛兔' || value === 2 || value === '程序員') { // ... } // 效率寫(xiě)法一 if ([1, '飛兔', 2, '程序員'].indexOf(value) >= 0) { // ... } // 效率寫(xiě)法二 if ([1, '飛兔', 2, '程序員'].includes(value)) { // ... }
ES6對(duì)象簡(jiǎn)寫(xiě)
let firstname = '極客'; let lastname = '飛兔'; // 非效率寫(xiě)法 let userinfo = {firstname: firstname, lastname: lastname}; // 效率寫(xiě)法 let userinfo = {firstname, lastname};
字符串轉(zhuǎn)數(shù)字
// 非效率寫(xiě)法 let total = parseInt('520'); let average = parseFloat('13.14'); // 效率寫(xiě)法 let total = +'520'; let average = +'13.14';
次方相乘
// 非效率寫(xiě)法 const power = Math.pow(2, 5); // 效率寫(xiě)法 const power = 2**5;
數(shù)組合并
let arr1 = [520, 1314]; // 非效率寫(xiě)法 let arr2 = arr1.concat([1225, 1115]); // 效率寫(xiě)法 let arr2 = [...arr1, 1225, 1115];
查找數(shù)組最大值最小值
const arr = [520, 1314, 1115, 1225]; // 效率寫(xiě)法 Math.max(...arr); Math.min(...arr);
獲取字符串字符
let str = 'https://autofelix.blog.csdn.net/'; // 非效率寫(xiě)法 str.charAt(10); // 效率寫(xiě)法 str[10];
并&&操作
function fn() { return true; } let flag = true; // 非效率寫(xiě)法 if (flag) { fn(); } // 效率寫(xiě)法 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ù)組過(guò)濾
- 從數(shù)組中過(guò)濾假數(shù)值
const arr = [3, '1', '', 0, false, null, undefined]; arr.filter(Boolean); // [3, '1']
for循環(huán)
let arr = ['極客飛兔', 520, 1314, '程序員'] // 非效率寫(xiě)法 for (var i = 0; i < arr.length; i++) {} // 效率寫(xiě)法 for (const i in arr) {} // 效率寫(xiě)法 for (const i of arr) {}
判斷奇偶
- 使用& 1 判斷奇偶數(shù)
// 非效率寫(xiě)法 if(value / 2 == 0) { // 是偶數(shù) } else { // 是奇數(shù) } // 效率寫(xiě)法 2 & 1; // 0 返回0表示偶數(shù) 3 & 1; // 1 返回1表示奇數(shù)
數(shù)組去重
const array = [5,4,7,8,9,2,7,5]; // 效率的兩種寫(xiě)法 array.filter((item,idx,arr) => arr.indexOf(item) === idx); const nonUnique = [...new Set(array)];
IF檢查
// 非效率寫(xiě)法 if (result === true) // 效率寫(xiě)法 if (result)
合并對(duì)象
const user = { name: '極客飛兔', gender: '男' }; const college = { primary: '清華大學(xué)', secondary: '社會(huì)大學(xué)' }; 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;
字符串重復(fù)
// 非效率寫(xiě)法 let str= ''; for(let i = 0; i < 5; i ++) { str+= 'autofelix '; } // 效率寫(xiě)法 'autofelix '.repeat(5);
默認(rèn)值
let user; let name = getUserName(); // 非效率寫(xiě)法 if (name !== null && name !== undefined && name !== '') { user = name; } else { user = '極客飛兔'; } // 效率寫(xiě)法 let user = getUserName() || '極客飛兔';
雙波浪線運(yùn)算符
// 非效率寫(xiě)法 const floor = Math.floor(6.8); // 6 // 效率寫(xiě)法 const floor = ~~6.8; // 6
移除對(duì)象屬性
let obj = {x: 45, y: 72, z: 68, p: 98}; // 非效率寫(xiě)法 delete obj.x; delete obj.p; console.log(obj); // {y: 72, z: 68} // 效率寫(xiě)法 let {x, p, ...newObj} = obj; console.log(newObj); // {y: 72, z: 68}
總結(jié)
到此這篇關(guān)于提高Javascript代碼效率技巧的文章就介紹到這了,更多相關(guān)js代碼技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ES6實(shí)現(xiàn)的遍歷目錄函數(shù)示例
這篇文章主要介紹了ES6實(shí)現(xiàn)的遍歷目錄函數(shù),涉及ES6文件目錄的遍歷、讀取、回調(diào)函數(shù)及json相關(guān)操作技巧,需要的朋友可以參考下2017-04-04JavaScript解決浮點(diǎn)數(shù)計(jì)算不準(zhǔn)確問(wèn)題的方法分析
這篇文章主要介紹了JavaScript解決浮點(diǎn)數(shù)計(jì)算不準(zhǔn)確問(wèn)題的方法,結(jié)合實(shí)例形式分析了javascript浮點(diǎn)數(shù)運(yùn)算精度誤差的原因以及相關(guān)的解決方法與具體操作技巧,需要的朋友可以參考下2018-07-07超越Jquery_01_isPlainObject分析與重構(gòu)
isPlainObject是Jquery1.4后提供的新方法,用于判斷對(duì)象是否是純粹的對(duì)象(通過(guò) {} 或者 new Object 創(chuàng)建的)。2010-10-10基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示(兩種方法)
本篇文章是基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示,當(dāng)點(diǎn)擊不同導(dǎo)航菜單實(shí)現(xiàn)當(dāng)前點(diǎn)擊的菜單是高亮的,有需要的朋友可以關(guān)注下本文2015-08-08JS模擬簡(jiǎn)易滾動(dòng)條效果代碼(附demo源碼)
這篇文章主要介紹了JS模擬簡(jiǎn)易滾動(dòng)條效果代碼,可模擬出滾動(dòng)條拖動(dòng)顯示的效果,涉及JavaScript鼠標(biāo)事件的響應(yīng)及頁(yè)面元素運(yùn)算的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04