筆者是一個喜歡將JavaScript各種騷操作進行到底的一個人，且不喜歡添加註釋的那一種。曾經有小夥伴接手過我的一個專案，看完程式碼後，差點要揍我，第二天沉默的向領導提出了辭職。

下面給大家總結一些JavaScript程式碼中的一些容易讓人琢磨不透的，讓人一看就很裝X的，並且很實用的，提升程式碼執行效率的寫法。

位運算

前端小夥伴們都知道，在實際運算中，js是很容易丟失精度的，這就造成了Javascript中最臭名昭著的0.1 + 0.2 !== 0.3的BUG，眾多大牛們不推薦使用位運算子進行公式計算，在筆者看來，如果你的js技能足夠強大，能避開各種坑的話，偶爾用一下位運算還是very good的。Javascript全套套用了Java的位運算，在Js中套用位運算能夠提升運算效能。

1.奇偶數判斷

// 普通寫法,多采用取模(%)的方法
2 % 2 = 0 // 偶數
3 % 2 = 1 // 奇數
num % 2 === 0 ? '偶數' : '奇數'

/*
* & 運算子的寫法
* &以特定的方式組合操作二進位制數中對應的位
* 如果對應的位都為1，那麼結果就是1
* 如果任意一個位是0 則結果就是0
* 
* */
// 1的二進位制表示為: 00000000 00000000 00000000 00000001
// 3的二進位制表示為: 00000000 00000000 00000000 00000011
2 & 1 = 0
3 & 1 = 1
num & 1 === 0 ? '偶數' : '奇數'

2.切換0和1(可以互相取反)

// 常用於toogle的狀態取反，比如vue
 
中的彈框顯示
data: {
  status: false,
  value: ''
}

// 第一次運算
this.status ^= 1  // 打印出來為1
// 再一次運算
this.status ^= 1  // 打印出來為0

//或者判斷某個屬性值是否存在
if(this.value) {return 1} return 0; // 普通寫法
this.value ? 1 : 0 // 三目運演算法
this.value ^= 1 // 打印出來為1,位運演算法
this.value ^= 1 // 打印出來為0,位運演算法

3.轉換布林值（用於確定狀態的賦值）

此處一個新的位運演算法“!!”，非0的的都是true，包括浮點數和負數

// 普通寫法
const status = Boolean(0) // false
const status = Boolean(1) // true
// !!寫法
const status = !!0; // false
const status = !!1; // true
const status = !!7; // true
const status = !!-7; // true
const status = !!-7.121212; // true

4.已知值+1(～的用法)

～運算子是對位求反，1變0，0變1，也就是求二進位制的反碼

// 普通用法
let a = 1; a = a + 1
或者
let a = 1; a++

/*
* ～的用法
* 簡單記憶：自身值 + 1後取負數
* ～運算後位負值，故Math.abs區絕對值
* */
let a = 1; Math.abs(~a)

5.左移(<<)和右移(>>)

需要了解二進位制的內部運算機制，相對較複雜哦，有興趣的小夥伴們可以網上了解一下。常用場景主要是冪數求值等。需要了解二進位制的內部運算機制，相對較複雜哦，有興趣的小夥伴們可以網上了解一下。常用場景主要是冪數求值等。

6.使用～、<< 、>>、>>>、|取整

// 相當於使用了Math.floor()的方法
Math.floor(11.223344)  // 11
console.log(~~11.223344)     // 11
console.log(11.223344 >> 0)  // 11
console.log(11.223344 << 0)  // 11
console.log(11.223344 | 0)   // 11
console.log(11.223344 >>> 0) // 11

&&，||， ！的使用

1.if判斷語句的優雅寫法

// 普通用法
let str = ''
if (a === 'clear') {
  str = '清空'
} else if(a === 'delete') {
  str = '刪除'
} else if (a === 'add') {
  str = '新增'
} else {
  str = '未知'
}
// switch用法
switch(a) {
  case 'clear': str='清空';break;
  case 'delete': str='刪除';break;
  case 'add': str='新增';break;
  default: str='未知';
}

// Object寫法
str = {
  clear: '清空',
  delete: '刪除',
  add: '新增'
}[a] || '未知'


// 使用 && 和 || 的語法
str = (a === 'clear' && '清空') || (a === 'delete' && '刪除') || (a === 'add' && '新增') || '未知';

2.相同條件的不同賦值

// 當相同條件的賦值是或關係時，我見過太多的小夥伴是這樣寫的
if (a === '1' || a === '2') {
  // TODO
} 

// 及其的low啊，難道陣列的includes方法你不知道？
if(['1', '2'].includes(a)){
 // TODO
}
// 單一判斷邏輯下，直接 && 表示執行
['1', '2'].includes(a) && // TODO

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

陣列的不常見寫法(多用展開符...)

1.陣列去重

// 迴圈遍歷式的去重就不重複了
// TODO

// ES6 set方法
Array.from(new Set([1,2,3,4,3,2,1])); //[1, 2, 3, 4]
[...new Set([1,2,3,4,3,2,1])]; //[1, 2, 3, 4]

2.數組合並

// 普通寫法
[1,2,3,4].concat([5,6]);//[1, 2, 3, 4, 5, 6]
// 使用展開符
[...[1,2,3,4],...[5,6]];//[1, 2, 3, 4, 5, 6]

3.判斷陣列的條件滿足性

// 每一項是否滿足
[1,2,3,4].every(item => {return item > 2});//false
// 有一項滿足
[1,2,3,4].some(item => {return item > 2});//true

4.陣列常用方法在此

// 其他常用的陣列操作方法：

sort() //升序
reverse() //倒序,反轉
join() //將陣列轉為字串
push() //新增到陣列末尾
pop() //末尾移除最後一項
unshift() //新增到原陣列開頭
shift() //刪除陣列第一項
slice() //返回起始位置到結束位置之間的項[m,n) 不改變原陣列
splice() //傳兩個參(m,n) 刪除從m到n個之間的項 改變原陣列； 傳三個參（m,n,k）從當前m到n個前插入k
concat() //將引數新增到原陣列中，不改變原陣列
of() //將不是陣列的轉化為陣列
fill() //用一個固定值填充一個數組中從起始索引到終止索引內的全部元素