目的
在平常的前端開發中，一般需要處理資料（陣列和物件居多），特別是複雜功能的頁面，通常是一到兩個物件陣列（有時陣列裡面還有陣列）。大多數前端開發的難點就是這裡，耗時大。以前我在工作中，遇到的支付方式功能，排課日曆，場地預約，公園大螢幕運動排行和彈幕，後臺系統的許可權模組等等，這些功能難度大費腦耗時間多。其他那些功能很簡單的，無腦複製貼上執行就完成了。如果我可以總結一下，找出一些高效的處理陣列和物件的方法，以後工作中就對號入座的使用，這肯定可以提高我的工作效率，到時候我可以多出時間來給測試或者學習新知識或者摸魚休息。這總比每天瞎用js工具類，碌碌無為的寫程式碼強。
做一件事有很多種方法，最快捷的就那一兩個，把它們找出來，事半功倍。正所謂磨刀不誤砍柴工。
陣列的遍歷
一、for...of(通用)
最好用的迭代（迴圈）語句
說到迴圈，javascript的迴圈語句那麼多，我該如何選擇？其實就是問下自己，自己需要什麼？我眼睛一閉，我要可以用在很多地方（物件），寫法簡單，這樣維護性高；我還要支援continue，break，throw，return打斷迴圈或者跳到下一個迴圈（某一次迭代不執行迴圈體程式碼塊），我還要index，index等於某個值時做一些邏輯判斷。
for...of，它可以用於可迭代物件。Array，Map，Set，String，TypeArray，arguments等等。就是說可用的地方很廣，哪裡都能用。迭代是啥意思，就是說按順序訪問列表中的每一項，就是小時候老師家訪那樣，學生的家走一遍。其實在專案中，一般都是遍歷物件陣列，這樣的資料結構前端後臺耳熟能祥。
這個東西效能不算好的，是es2015推出來的，寫法特別簡潔。執行效率中下，比for，forEach差，但是比map好。優點是佔用記憶體最小。其實執行效率和佔用記憶體是次要的，因為在專案中，處理的資料的長度不會很長，一般在10到30之間，影響不大，再說前端在大多數情況下不需要考慮效能（上一家公司技術大哥給我的經驗）。寫法簡潔的話，在二層迴圈的情況程式碼的閱讀性和維護性就較高。
處理邏輯時，一般需要（特別需要）使用break，continue，return來設計程式碼邏輯。不是所有的迴圈語句都支援return ，break。記得有一次我使用forEach語句的時候，迴圈體裡面加了break，發現跳不出去。搞半天原來是不支援。現實又狠狠的打了我這種渣渣一耳光。改為for語句解決了。
index它是不支援的，不是你要什麼它就是支援什麼。可以通過把陣列等轉化為Map物件。實現如下：
for(let [index,item] of new Map(targetArray.map((item,i) => [i,item]))){
console.log(index, item)
}
二、reduce，reduceRight（百變）
reduce迴圈（招式很多）
一開始我以為reduce只能求和，沒什麼用，查詢大神寫的部落格，我才知道它很厲害。我開始要抄別人的東西了。沒辦法，技術不行。
陣列求和，求乘積(其實求減，求除也是沒有問題的囉)
var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘積，24
//其實物件陣列也可以求和，為所欲為啊
var arr = [{num: 1}, {num: 2}];
var sum = arr.reduce((x,y)=>x+y.num,0)
計算一個陣列中元素成員的次數（利用了一個reduce的第二引數初始化為空物件，用這個物件來記錄陣列出現的次數。然後把這個物件給餅狀圖。不過一般後臺會直接給前臺這個物件，不需要前臺計算。）
let names = ['Alice', 'Bob', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{Alice:
//萬一陣列的每一項是物件，能不能搞啊 可以的，擴充一下就可以了。看
let names = [{name:'Alice'}, {name: 'Bob'}, {name: 'Alice'}];
let nameNum = names.reduce((pre,cur)=>{
if(cur.name && cur.name in pre){
pre[cur.name]++
}else{
pre[cur.name] = 1
}
return pre
},{})
console.log(nameNum); //{Alice:
陣列去重，這個功能經常遇到，當陣列出現重複，後臺不好處理時，這時需要前端去重(利用了第二個引數初始化為空陣列，)
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
//物件陣列去重和上面一樣，擴充一下
let arr = [{num: 1},{num: 2},{num: 3},{num: 3}]
let temp = {};
let newArr = arr.reduce((pre,cur)=>{
if(!temp[cur.num]){
temp[cur.num] = true;
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
看了一下人家的部落格，發現reduce還能快速實現filter的功能。為所欲為啊。實現如下。
const data = [
{name: 'a', age: 37, weight: 72, sex: 'male'},
];
// accu 為 accumulator，curr 為 currentValue
const result = data.reduce((accu, curr) => {
// if 判斷，相當於 filter
if (curr.sex === 'female') {
accu.push(curr);
}
return accu;
}, []);
console.log(result);
遞迴處理tree樹形，這種需求在工作中沒有遇到過，不知道以後會不會遇到。程式碼中的callee是個指標，指向當前執行的函式，就是函式它自己，一旦是用於遞迴處理。如果不這樣寫的哈，就需要定義個函式變數，在函式內部呼叫自己。函式定義在reduce的外面，程式碼的閱讀性降低。callee就是提供快捷編碼，提高程式碼的閱讀性。
var data = [{
id: 1,
name: "辦公管理",
pid: 0,
children: [{
id: 2,
name: "請假申請",
pid: 1,
children: [
{ id: 4, name: "請假記錄", pid: 2 },
],
},
{ id: 3, name: "出差申請", pid: 1 },
]
}
];
const arr = data.reduce(function(pre,item){
const callee = arguments.callee //將執行函式賦值給一個變數備用
pre.push(item)
if(item.children && item.children.length > 0) item.children.reduce(callee,pre); //判斷當前引數中是否存在children，有則遞迴處理
return pre;
},[]).map((item) => {
//清空每一項item
item.children = []
return item
})
console.log(arr)
他還有個兄弟，叫reduceRight，只是循序不一樣，一個是順序，一個是倒敘而已。功能幾乎一模一樣為什麼還要搞兩個？程式設計師有時真的是無聊到極點。我會不會去學reduceRight?我不學，機智躲開。
有個大佬寫了reduce的高階用法
https://developer.51cto.com/art/202002/610535.htm
三、some，every，filters，map （私人定製）
要想快速實現某些功能，就要使用功能專一的。
some 和 every
他們是兩兄弟，需要的引數可以是函式，返回值是true和false。前者有一個條件滿足，函式返回值是true，就停止遍歷。後者是所有條件滿足，函式返回值是true，就停止遍歷。
幾乎沒有用過，不知道使用場景。應該是算是否全勤，一個班的同學是否全部及格。還有全選效果的實現吧。
filter(推薦)
官方的解釋是找到所有符合條件的元素然後放到一個陣列中 如果沒有符合條件的那麼返回空陣列。物如其名，就是一個過濾器，拿到符合條件的資料項拼成新的資料。
使用場景很多，渲染頁面的時候，需要拼接符合條件的陣列和給後臺資料的時候，給後臺符合條件的資料。按某個屬性分組。上一家公司的時候，寫跑步比賽頁面，頁面需要顯示跑步中，沒開始，跑完等狀態。此時如果使用filter，就快速得到需要的陣列。
map
就是需要對一個陣列的每一項做相同的操作處理時。使用map就會很快。map不會改變原來的陣列這個定律適用於陣列成員是值型別。如果是引用型別，這個不適用。
那麼如何快速的選擇合適的遍歷陣列的方法呢？根據開發工作中的需求，首先審查功能專一私人定製的some，every，filters，map，再到reduce。這時候千萬不能輕易跳到for...of。在reduce這一層盡情耍大刀。如果實在不行了，就for...of唄。
物件的遍歷
在工作中除了處理資料，處理物件也是常見。
一、for...in
這個是一般用法。使用很簡單。
二、keys，getOwnPropertyNames，ownKeys (推薦)
他們的使用一模一樣，都很簡單。 keys遍歷自身的可列舉屬性。 getOwnPropertyNames遍歷自身的所有屬性。 ownKeys遍歷自身屬性（包括Symbol）。
其實不亂的，需要知道屬性有可列舉與不可列舉，是否是Symbol。根據實質情況去選擇就行了。再說工作中大多數的物件的屬性都是可列舉的，用 keys可以解決大多數需求。
為什麼要推薦使用 keys等。可以試想一下，把物件轉化得到陣列之後，不就是可以使用上面陣列迴圈的那些方法處理各種邏輯？什麼reduce,filter,map,some，every對吧，特別那個reduce就和周杰倫雙截棍那樣，怎麼耍都可以。又快又簡潔。
var obj = {'0': 1, '1': b}
Object.keys(obj).forEach((key) =>{
console.log(key,obj[key])
})
在以前公司的專案中，我發現可以這樣寫介面，每次新增介面只需要在urlMap物件裡面新增鍵值對：（或者說寫在其他js檔案，把幾個物件合併到urlMap）。
這樣處理的好處是，閱讀舒服，程式碼維護性高，減少不必要的程式碼衝突，節省時間。
const urlMap = {
loginUserInfo: '/api/loginUserInfo', //---方法名/介面路徑---
};
const services = {};
Object.keys(urlMap).forEach((methodName) = > {
services[methodName] = function (params, async = true, type = 'GET') {
var data = [];
var promise = $.ajax({
url: urlMap[methodName],
data: params ? params : {},
async: async,
dataType: "json"
});
if (async) {
return promise;
} else {
promise.done(({
code, obj
}) = > {
(code === 0) && (data = obj)
});
return data;
}
};
});
export default services;
說個題外話的，處理物件的時候，有時候需要做物件合併處理。物件合併可以用在哪些地方？就是頁面分頁元件，echart元件它們需要配置物件，這個物件有很多的鍵值對。可以抽一些共同的屬性處理預設值寫在元件內部，其它的就寫在元件外部傳進來，這時候就需要合併它倆。這種概念叫做配置 config。
簡單的寫法就是使用 Object.assingObj；這個方法就是把多個源目標複製到目標物件，不管這個目標物件有沒有這個屬性值。
也可以使用嚴格一些的方法，就是說，目標物件和源物件公共的屬性值，才搞到目標物件上，不是的話不要過來，否則可能會搞壞內部的配置。缺點就是在元件寫配置物件時，需要多寫(有可能是很多行)屬性名，總是比每次寫在元件外面強（程式碼如下）。
function assignObj(vm, firstSource) {
for(let [index,item] of new Map([...arguments].map((item,i) => [i,item]))){
if(index === 0) continue; //躲開vm
let nextSource = [...arguments][index];
if (nextSource && typeof nextSource !== "object") continue;
Object.keys(vm).reduce((pre,cur) => {
if(vm.hasOwnProperty(cur) && nextSource.hasOwnProperty(cur))
vm[cur] = nextSource[cur]
},vm)
}
return vm
}
var returnValue = assignObj({name: 'name',age: 6,hairs: 8},{name: 'name',age: 6,clothes: 'lalala1'},{name: '周星馳'})
console.log(returnValue,'returnValue')
有人可能會提問？當物件裡面的屬性又是物件時，你這個方法不支援啊。難不倒我，我可以用callee來升級的。
function assignObj(vm, firstSource) {
const callee = arguments.callee //將執行函式賦值給一個變數備用
for(let [index,item] of new Map([...arguments].map((item,i) => [i,item]))){
if(index === 0) continue; //躲開vm
let nextSource = [...arguments][index];
if (nextSource && typeof nextSource !== "object") continue;
Object.keys(vm).reduce((pre,cur) => {
if(Object.prototype.toString.call(vm[cur]) !== '[object Object]' && vm.hasOwnProperty(cur) && nextSource.hasOwnProperty(cur))
vm[cur] = nextSource[cur]
else if(Object.prototype.toString.call(vm[cur]) === '[object Object]' && vm.hasOwnProperty(cur) && nextSource.hasOwnProperty(cur))
callee(vm[cur],nextSource[cur]);
return vm;
},vm)
}
return vm
}
如果不想在vue內部元件中寫太多的元件初始化配置值的話，可以採取一種寬鬆的方式：就是說在目標物件的基礎上，把所有源物件的屬性複製過來，共同屬性的值直接覆蓋。其實很簡單的，遍歷源目標，屬性是非物件把值複製過來，屬性是物件再次遍歷。 把上面程式碼的那行Object.keys出現的vm改為nextSource就可以了。
再說個題外話吧，就是上個月啊，和一個後臺搞圖片的功能。圖片的待上傳列表是那後臺返回來的陣列。寫的時候，需要搞隱射，發現不好搞：一個頁面，拿到SPECIAL_FATE_STORE_HEADER欄位給後臺specialFateStoreHeaderId欄位；另外一個地方同理：specialFateStoreHeaderId->STORE_HEADER。為什麼這麼麻煩？後臺小子邏輯差，經驗不足，沒處理好。一開始我使用switch case。搞了不少行程式碼，維護性也不好，因為有兩套，改其中一個，另外一個也得跟著改。這時候，上面的那些陣列遍歷和物件遍歷的內容就可以用進來了。再一次證明會js真的可以為所欲為，呵呵。程式碼如下。
let valueMap = {
SPECIAL_FATE_STORE_HEADER: 'specialFateStoreHeaderId'//值1：值2
//...這裡省略了15行
}
//獲取值的值
function getValueName(type) {
return valueMap[type] ? valueMap[type] : valueMap['SPECIAL_FATE_STORE_HEADER'];
}
//獲取鍵的值
function getKeyName(targetValue){
let targetArr = Object.keys(valueMap).filter((key) => { return valueMap[key] == targetValue });
return targetArr.length === 0 ? 'STORE_HEADER' : targetArr[0].split('FATE_')[1]
}
console.log(getValueName('SPECIAL_FATE_STORE_HEADER'),'valueMap')
console.log(getKeyName('specialFateStoreHeaderId'),'valueMap')
以後再次來需求，我就在valueMap物件裡面加。萬一再來需求，後臺小子還要值3，值4怎麼辦？難不到我。我修改valueMap的結構。再改下邏輯就行。他還要值5的話，那就叼人或者離職吧。
let valueMap = {
SPECIAL_FATE_STORE_HEADER: 'specialFateStoreHeaderId&&值3&&值4'//值1：值2 && 值3 && 值4
//...這裡省略了15行
}
最後，歡迎關注我的公眾號。
