程式設計技巧│提高 Javascript 代碼效率的技巧

優雅的代碼編寫格式，提升效率的同時更美觀

目錄

• 🎈 變量聲明
• 🎈 三元運算符
• 🎈 解構指派
• 🎈 解構交換
• 🎈 箭頭函數
• 🎈 字元串模版
• 🎈 多值比對
• 🎈 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}