引言 ??
1.寫這篇文章的緣由是上周在公司前端團隊的code review時，看了一個實習小哥哥的代碼后，感覺一些剛入行不久的同學，對于真實專案中的一些js處理不是很熟練，缺乏一些技巧，
2.因此整理了自己開發中常用的一些js技巧，靈活的運用，會增強你解決問題的能力，也會對你的代碼簡潔性有很大的改觀，另外注意：除了JS騷操作，我還結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！
陣列去重 ??
正常我們實作陣列去重大多都是通過雙層遍歷或者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);
復制代碼![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="956" height="866"></svg>)
合并物件（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: 必須，可以是陣列或Objectreplacer: 可選值，可以是陣列，也可以是方法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的轉換，可以大大的提升性能，
最后注意：除了JS騷操作，我還結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！
本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72137.html
標籤：JavaScript