JavaScript中的這些騷操做，你都知道嗎？

引言 🏂

寫這篇文章的原因是上週在公司前端團隊的code review時，看了一個實習小哥哥的代碼後，感受一些剛入行不久的同窗，對於真實項目中的一些js處理不是很熟練，缺少一些技巧。

所以整理了本身開發中經常使用的一些js技巧，靈活的運用，會加強你解決問題的能力，也會對你的代碼簡潔性有很大的改觀。

數組去重 🐻

正常咱們實現數組去重大多都是經過雙層遍歷或者indexOf的方式。

雙層for循環去重

function unique(arr) {
 for (var i = 0; i < arr.length; i++) {  for (var j = i + 1; j < arr.length; j++) {  if (arr[i] == arr[j]) {  arr.splice(j, 1);  j--;  }  }  }  return arr; } 複製代碼

利用indexOf去重

function unique(arr) {
 if (!Array.isArray(arr)) {  console.log("type error!");  return;  }  var array = [];  for (var i = 0; i < arr.length; i++) {  if (array.indexOf(arr[i]) === -1) {  array.push(arr[i]);  }  }  return array; } 複製代碼

但其實有一種更簡單的方式：利用Array.from與set去重

function unique(arr) {
 if (!Array.isArray(arr)) {  console.log("type error!");  return;  }  return Array.from(new Set(arr)); } 複製代碼

這種代碼的實現是否是很簡潔 😉

數組轉化爲對象（Array to Object）🦑

數組轉化爲對象，大多數同窗首先想到的就是這種方法：

var obj = {};
var arr = ["1","2","3"]; for (var key in arr) {  obj[key] = arr[key]; } console.log(obj)  Output: {0: 1, 1: 2, 2: 3} 複製代碼

可是有一種比較簡單快速的方法：

const arr = [1,2,3]
const obj = {...arr} console.log(obj)  Output: {0: 1, 1: 2, 2: 3} 複製代碼

一行代碼就能搞定的事情爲何還要用遍歷呢？😛

合理利用三元表達式 👩‍👦‍👦

有些場景咱們須要針對不一樣的條件，給變量賦予不一樣的值，咱們每每會採用下面這種方式：

const isGood = true;
let feeling; if (isGood) {  feeling = 'good' } else {  feeling = 'bad' } console.log(`I feel ${feeling}`)  Output: I feel good 複製代碼

可是爲何不採用三元表達式呢？

const isGood = true;
const feeling = isGood ? 'good' : 'bad' console.log(`I feel ${feeling}`)  Output: I feel good 複製代碼

這種也就是所謂的Single line（單行）思想，其實就是代碼趨向於簡潔性。

轉換爲數字類型（Convert to Number）🔢

這種是很常見的，你們用的比較多的多是parseInt()、Number()這種：

const age = "69";
const ageConvert = parseInt(age); console.log(typeof ageConvert);  Output: number; 複製代碼

其實也能夠經過+來實現轉換：

const age = "69";
const ageConvert = +age; console.log(typeof ageConvert);  Output: number; 複製代碼

轉換爲字符串類型（Convert to String）🔡

轉換爲字符串通常會用toString()、String()實現：

let a = 123;
 a.toString(); // '123' 複製代碼

但也能夠經過value + ""這種來實現：

let a = 123;
 a + ""; // '123' 複製代碼

性能追蹤 🥇

若是你想測試一段js代碼的執行耗時，那麼你能夠嘗試下performance：

let start = performance.now();
let sum = 0; for (let i = 0; i < 100000; i++) {  sum += 1; } let end = performance.now(); console.log(start); console.log(end); 複製代碼

合併對象（Combining Objects）🌊

兩個對象合併你們用的比較多的可能就是Object.assign了：

const obj1 = { a: 1 }
const obj2 = { b: 2 } console.log(Object.assign(obj1, obj2))  Output: { a: 1, b: 2 } 複製代碼

其實有一種更簡潔的方式：

const obj1 = { a: 1 }
const obj2 = { b: 2 } const combinObj = { ...obj1, ...obj2 } console.log(combinObj)  Output: { a: 1, b: 2 } 複製代碼

也就是經過展開操做符(spread operator)來實現。

短路運算(Short-circuit evaluation) 🥅

咱們能夠經過&&或||來簡化咱們的代碼，好比：

if (isOnline) {
 postMessage(); } // 使用&& isOnline && postMessage();  // 使用|| let name = null || "森林"; 複製代碼

數組扁平化（Flattening an array）🍓

數組的扁平化，咱們通常會用遞歸或reduce去實現

遞歸

var arr = [1, [2, [3, 4]]];
 function flatten(arr) {  var result = [];  for (var i = 0, len = arr.length; i < len; i++) {  if (Array.isArray(arr[i])) {  result = result.concat(flatten(arr[i]));  } else {  result.push(arr[i]);  }  }  return result; }  console.log(flatten(arr)); 複製代碼

reduce

var arr = [1, [2, [3, 4]]];
 function flatten(arr) {  return arr.reduce(function (prev, next) {  return prev.concat(Array.isArray(next) ? flatten(next) : next);  }, []); }  console.log(flatten(arr)); 複製代碼

可是es6提供了一個新方法 flat(depth)，參數depth，表明展開嵌套數組的深度，默認是1

let arr = [1, [2, 3, [4, [5]]]];
arr.flat(3); // [1,2,3,4,5] 複製代碼

求冪運算 🍜

平時咱們實現指數運算，用的比較多的應該是Math.pow()，好比求2^10：

console.log(Math.pow(2, 10));
複製代碼

在ES7中引入了指數運算符**，**具備與Math.pow()同樣的計算結果。

console.log(2 ** 10); // 輸出1024
複製代碼

浮點數轉爲整數（Float to Integer）🦊

咱們通常將浮點數轉化爲整數會用到Math.floor()、Math.ceil()、Math.round()。但其實有一個更快的方式：

console.log(~~6.95); // 6
console.log(6.95 >> 0); // 6 console.log(6.95 << 0); // 6 console.log(6.95 | 0); // 6 // >>>不可對負數取整 console.log(6.95 >>> 0); // 6 複製代碼

也就是使用~, >>, <<, >>>, |這些位運算符來實現取整

截斷數組

❝

若是你有修改數組長度爲某固定值的需求，那麼你能夠試試這個

❞

let array = [0, 1, 2, 3, 4, 5];
array.length = 3; console.log(array);  Output: [0, 1, 2]; 複製代碼

獲取數組中的最後一項 🦁

一般，獲取數組最後一項，咱們用的比較多的是：

let arr = [0, 1, 2, 3, 4, 5];
const last = arr[arr.length - 1]; console.log(last);  Output: 5; 複製代碼

但咱們也能夠經過slice操做來實現：

let arr = [0, 1, 2, 3, 4, 5];
const last = arr.slice(-1)[0]; console.log(last);  Output: 5; 複製代碼

美化你的JSON 💄

平常開發中，咱們會常常用到JSON.stringify，但你們可能並不大清楚他具體有哪些參數。

他有三個參數：

• json: 必須，能夠是數組或 Object
• replacer: 可選值，能夠是數組，也能夠是方法
• space: 用什麼來進行分隔

而咱們偏偏能夠指定第三個參數space的值去美化咱們的JSON：

Object.create(null) 🐶

❝

在Vue和Vuex的源碼中，做者都使用了Object.create(null)來初始化一個新對象。爲何不用更簡潔的{}呢？ 咱們來看下Object.create()的定義：

❞

Object.create(proto,[propertiesObject])
複製代碼

• proto:新建立對象的原型對象
• propertiesObject:可選。要添加到新對象的可枚舉（新添加的屬性是其自身的屬性，而不是其原型鏈上的屬性）的屬性。

咱們對比分別經過Object.create(null)和{}建立對象的不一樣： 從上圖能夠看到，經過{}建立的對象繼承了Object自身的方法，如hasOwnProperty、toString等，在新對象上能夠直接使用。

而使用Object.create(null)建立的對象，除了自身屬性a以外，原型鏈上沒有任何屬性。

也就是咱們能夠經過Object.create(null)這種方式建立一個純淨的對象，咱們能夠本身定義hasOwnProperty、toString等方法，徹底沒必要擔憂會將原型鏈上的同名方法覆蓋掉。

拷貝數組 🐿

平常開發中，數組的拷貝是一個會常常遇到的場景。其實實現數組的拷貝有不少騷技巧。

Array.slice

const arr = [1, 2, 3, 4, 5];
const copyArr = arr.slice(); 複製代碼

展開操做符

const arr = [1, 2, 3, 4, 5];
const copyArr = [...arr] 複製代碼

使用 Array 構造函數和展開操做符

const arr = [1, 2, 3, 4, 5];
const copyArr = new Array(...arr) 複製代碼

Array.concat

const arr = [1, 2, 3, 4, 5];
const copyArr = arr.concat(); 複製代碼

避免多條件並列 🦀

開發中有時會遇到多個條件，執行相同的語句，也就是多個||這種：

if (status === 'process' || status === 'wait' || status === 'fail') {
 doSomething() } 複製代碼

這種寫法語義性、可讀性都不太好。能夠經過switch case或includes這種進行改造。

switch case

switch(status) {
 case 'process':  case 'wait':  case 'fail':  doSomething() }  複製代碼

includes

const enum = ['process', 'wait', 'fail']
if (enum.includes(status)) {  doSomething() } 複製代碼

Object.freeze() 🃏

❝

在 Vue 的文檔中介紹數據綁定和響應時，特地標註了對於通過 Object.freeze() 方法的對象沒法進行更新響應。 Object.freeze() 方法用於凍結對象，禁止對於該對象的屬性進行修改。

❞

正是因爲這種特性，因此在實際項目中，他有不少的適用場景。

像一些純展現類的頁面，可能存在巨大的數組或對象，若是這些數據不會發生更改，那麼你就可使用Object.freeze()將他們凍結，這樣Vue就不會對這些對象作setter或getter的轉換，能夠大大的提高性能。