資訊專欄INFORMATION COLUMN
在最近的項目中，遇到了比較多處理數組的場景，比如要對數組里面某個元素的某一個字段進行抽取歸類，或者判斷數組當中的某個元素是否符滿足判斷條件等。
網上關于使用ES5新的的API來代替for循環的文章已經非常多，它們有的詳細討論了API的用法，有的詳細分析各自的性能，還有的整理了使用中的注意事項。因此，本文不再對這些API的詳細使用方式進行贅述，僅僅從個人角度出發，整理歸納一些在項目實踐中遇到的能夠更加優雅處理數組遍歷的例子。
1、使用Set處理數組去重和元素剔除問題Set是es6新增的一種數據結構，它和數組非常相似，但是成員的值都是唯一的，沒有重復的值。它提供了4個語義化的API：
add(value)：添加某個值，返回Set結構本身。
delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
has(value)：返回一個布爾值，表示該值是否為Set的成員。
clear()：清除所有成員，沒有返回值。
參考自@阮一峰 老師的《ECMAScript 6 入門》
那么我們可以用Set來干嘛呢？
第一個用法，數組去重。對于一個一維數組，我們可以先把它轉化成Set，再配合...解構運算符重新轉化為數組，達到去重的目的。請看例子：
const arr = [1, 1, 2, 2, 3, 4, 5, 5] const newArr = [...new Set(arr)] console.log(newArr) // [1, 2, 3, 4, 5]
值得注意的是，這個方法不能對元素為“對象”的數組奏效：
const arr = [{ name: "Alice", age: 12 }, { name: "Alice", age: 12 }, { name: "Bob", age: 13 }]
const newArr = [...new Set(arr)]
console.log(newArr)
// [{ name: "Alice", age: 12 }, { name: "Alice", age: 12 }, { name: "Bob", age: 13 }]
這是因為Set判斷元素是否重復的辦法類似于===運算符，兩個對象總是不相等的。
除了去重，Set提供的delete()方法也是非常實用。在以往的做法中，如果要刪除數組中指定的元素，我們需要先獲取該元素所在下標，然后通過splice()方法去刪除對應下標的元素，在理解上容易引起混亂：
// 我想刪除數組當中值為2的元素
const arr = [1, 2, 3]
const index = arr.indexOf(2)
if (index !== -1) {
arr.splice(index, 1)
}
console.log(arr)
// [1, 3]
使用Set就清晰多了：
const arr = [1, 2, 3] const set = new Set(arr) set.delete(2) arr = [...set] console.log(arr) // [1, 3]2、 使用map()方法和對象解構語法提取字段
請求后臺接口返回的數據中，很可能會遇到下面這種數據格式：
studentInfo = [
{ name: "Alice", age: 18, no: 2 },
{ name: "Bob", age: 16, no: 5 },
{ name: "Candy", age: 17, no: 3 },
{ name: "Den", age: 18, no: 4 },
{ name: "Eve", age: 16, no: 1 },
]
當我們要獲取姓名列表、年齡列表和編號列表的時候，我們可以通過map()再配合對象的解構語法方便快捷地進行處理：
const nameList = studentInfo.map(({ name }) => name)
const ageList = studentInfo.map(({ age }) => age)
const noList = studentInfo.map(({ no }) => no)
// nameList: [ "Alice", "Bob", "Candy", "Den", "Eve" ]
// ageList: [ 18, 16, 17, 18, 16 ]
// noList: [ 2, 5, 3, 4, 1 ]
3、使用filter()方法和對象解構語法過濾數組
接上上面的例子，如果我想獲取一個“年齡小于等于17歲”的新列表，應該怎么做呢？類似map()方法，我們可以用filter()方法進行過濾：
const newStudentInfo = studentInfo.filter(({ age }) => {
return age <= 17
})
/*
newStudentInfo: [
{ name: "Bob", age: 16, no: 5 },
{ name: "Candy", age: 17, no: 3 },
{ name: "Eve", age: 16, no: 1 }
]
*/
4、借助includes()方法求兩個數組的差集
假設我們有以下兩個數組：
var a = [1, 2, {s:3}, {s:4}, {s:5}]
var b = [{s:2}, {s:3}, {s:4}, "a"]
我們應該如何找到它們的差集呢？傳統的方法可能需要把它們以Object形式hash化，但其實我們可以通過.includes()方法更加優雅方便地找出差集，代碼如下：
var a = [1, 2, {s:3}, {s:4}, {s:5}].map(item => JSON.stringify(item))
var b = [{s:2}, {s:3}, {s:4}, "a"].map(item => JSON.stringify(item))
var diff = a.concat(b)
.filter(v => !a.includes(v) || !b.includes(v))
.map(item => JSON.parse(item))
// diff: [1, 2, {s:5}, {s:2}, "a"]
至于為什么要JSON.stringify()，是因為要對比兩個“對象元素”是否相等，是無法直接以“對象”形式比較的（永遠返回不相等）。
5、后記本文篇幅較短，難度也相對簡單，以上都是一些平時實踐中發現的技巧，希望可以對讀者們有所啟發。如果你也有一些比較優雅好玩的技巧，不妨和我交流分享喔~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83697.html
摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數據的。這也是前瞻發布之后，提出廢棄部分功能后許多人反應較為強烈的原因。 與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續從一種常見的功能——表格入手，展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...
摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數據的。這也是前瞻發布之后，提出廢棄部分功能后許多人反應較為強烈的原因。 與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續從一種常見的功能——表格入手，展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...
摘要：一切樣式都是全局，產生的各種命名的痛苦，等命名規則能解決一部分問題，但當你使用三方插件時卻無法避免命名沖突。這一解決法的優雅在于，全局的可以正常使用，只有帶后綴的才會被化使用的模板字符串，在文件里寫純粹的。 前言團隊在使用react時，不斷探索，使用了很多不同的css實現方式，此篇blog總結了，react項目中常見的幾種css解決方案：inline-style/radium/styl...
摘要：一個簡單的實踐返回數組或類似結構中滿足條件的第一個元素。這個翻譯項目才開始，以后會翻譯越來越多的作品。 原文地址：https://codeburst.io/writing-javascript-with-map-reduce-980602ff2f2f 作者：Shivek Khurana 簡介：本文是一份編寫優雅、簡潔和函數式ES6代碼的快捷清單。 現如今JavaScript有許多問...
閱讀 3058·2021-11-16 11:45
閱讀 3578·2021-09-29 09:34
閱讀 702·2021-08-16 10:50
閱讀 1569·2019-08-30 15:52
閱讀 1962·2019-08-30 15:45
閱讀 859·2019-08-29 15:23
閱讀 1923·2019-08-26 13:51
閱讀 3299·2019-08-26 12:23
