成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

在項(xiàng)目實(shí)踐中用更優(yōu)雅的方式處理數(shù)組問(wèn)題

joy968 / 1510人閱讀

在最近的項(xiàng)目中，遇到了比較多處理數(shù)組的場(chǎng)景，比如要對(duì)數(shù)組里面某個(gè)元素的某一個(gè)字段進(jìn)行抽取歸類，或者判斷數(shù)組當(dāng)中的某個(gè)元素是否符滿足判斷條件等。

網(wǎng)上關(guān)于使用ES5新的的API來(lái)代替for循環(huán)的文章已經(jīng)非常多，它們有的詳細(xì)討論了API的用法，有的詳細(xì)分析各自的性能，還有的整理了使用中的注意事項(xiàng)。因此，本文不再對(duì)這些API的詳細(xì)使用方式進(jìn)行贅述，僅僅從個(gè)人角度出發(fā)，整理歸納一些在項(xiàng)目實(shí)踐中遇到的能夠更加優(yōu)雅處理數(shù)組遍歷的例子。

1、使用Set處理數(shù)組去重和元素剔除問(wèn)題

Set是es6新增的一種數(shù)據(jù)結(jié)構(gòu)，它和數(shù)組非常相似，但是成員的值都是唯一的，沒(méi)有重復(fù)的值。它提供了4個(gè)語(yǔ)義化的API：



add(value)：添加某個(gè)值，返回Set結(jié)構(gòu)本身。


delete(value)：刪除某個(gè)值，返回一個(gè)布爾值，表示刪除是否成功。


has(value)：返回一個(gè)布爾值，表示該值是否為Set的成員。


clear()：清除所有成員，沒(méi)有返回值。



參考自@阮一峰 老師的《ECMAScript 6 入門(mén)》

那么我們可以用Set來(lái)干嘛呢？

第一個(gè)用法，數(shù)組去重。對(duì)于一個(gè)一維數(shù)組，我們可以先把它轉(zhuǎn)化成Set，再配合...解構(gòu)運(yùn)算符重新轉(zhuǎn)化為數(shù)組，達(dá)到去重的目的。請(qǐng)看例子：

const arr = [1, 1, 2, 2, 3, 4, 5, 5]

const newArr = [...new Set(arr)]

console.log(newArr)

// [1, 2, 3, 4, 5]

值得注意的是，這個(gè)方法不能對(duì)元素為“對(duì)象”的數(shù)組奏效：

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 }]

這是因?yàn)?b>Set判斷元素是否重復(fù)的辦法類似于===運(yùn)算符，兩個(gè)對(duì)象總是不相等的。

除了去重，Set提供的delete()方法也是非常實(shí)用。在以往的做法中，如果要?jiǎng)h除數(shù)組中指定的元素，我們需要先獲取該元素所在下標(biāo)，然后通過(guò)splice()方法去刪除對(duì)應(yīng)下標(biāo)的元素，在理解上容易引起混亂：

// 我想刪除數(shù)組當(dāng)中值為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()方法和對(duì)象解構(gòu)語(yǔ)法提取字段

請(qǐng)求后臺(tái)接口返回的數(shù)據(jù)中，很可能會(huì)遇到下面這種數(shù)據(jù)格式：

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 },
]

當(dāng)我們要獲取姓名列表、年齡列表和編號(hào)列表的時(shí)候，我們可以通過(guò)map()再配合對(duì)象的解構(gòu)語(yǔ)法方便快捷地進(jìn)行處理：

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()方法和對(duì)象解構(gòu)語(yǔ)法過(guò)濾數(shù)組

接上上面的例子，如果我想獲取一個(gè)“年齡小于等于17歲”的新列表，應(yīng)該怎么做呢？類似map()方法，我們可以用filter()方法進(jìn)行過(guò)濾：

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()方法求兩個(gè)數(shù)組的差集

假設(shè)我們有以下兩個(gè)數(shù)組：

var a = [1, 2, {s:3}, {s:4}, {s:5}]
var b = [{s:2}, {s:3}, {s:4}, "a"]

我們應(yīng)該如何找到它們的差集呢？傳統(tǒng)的方法可能需要把它們以O(shè)bject形式hash化，但其實(shí)我們可以通過(guò).includes()方法更加優(yōu)雅方便地找出差集，代碼如下：

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()，是因?yàn)橐獙?duì)比兩個(gè)“對(duì)象元素”是否相等，是無(wú)法直接以“對(duì)象”形式比較的（永遠(yuǎn)返回不相等）。

5、后記

本文篇幅較短，難度也相對(duì)簡(jiǎn)單，以上都是一些平時(shí)實(shí)踐中發(fā)現(xiàn)的技巧，希望可以對(duì)讀者們有所啟發(fā)。如果你也有一些比較優(yōu)雅好玩的技巧，不妨和我交流分享喔~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83697.html

相關(guān)文章

  • Vue.js 實(shí)踐（2）：實(shí)現(xiàn)多條件篩選、搜索、排序及分頁(yè)的表格功能

    摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁(yè)的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見(jiàn)的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時(shí)也將對(duì)filter功能與computed屬性進(jìn)行對(duì)比，說(shuō)明各自的適用場(chǎng)景，也為vue2.0版本中即將刪除的部...

    Profeel 評(píng)論0 收藏0

  • Vue.js 實(shí)踐（2）：實(shí)現(xiàn)多條件篩選、搜索、排序及分頁(yè)的表格功能

    摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁(yè)的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見(jiàn)的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時(shí)也將對(duì)filter功能與computed屬性進(jìn)行對(duì)比，說(shuō)明各自的適用場(chǎng)景，也為vue2.0版本中即將刪除的部...

    ChanceWong 評(píng)論0 收藏0

  • React項(xiàng)目 - 幾種CSS實(shí)踐

    摘要：一切樣式都是全局，產(chǎn)生的各種命名的痛苦，等命名規(guī)則能解決一部分問(wèn)題，但當(dāng)你使用三方插件時(shí)卻無(wú)法避免命名沖突。這一解決法的優(yōu)雅在于，全局的可以正常使用，只有帶后綴的才會(huì)被化使用的模板字符串，在文件里寫(xiě)純粹的。 前言團(tuán)隊(duì)在使用react時(shí)，不斷探索，使用了很多不同的css實(shí)現(xiàn)方式，此篇blog總結(jié)了，react項(xiàng)目中常見(jiàn)的幾種css解決方案：inline-style/radium/styl...

    princekin 評(píng)論0 收藏0

  • css進(jìn)階

    摘要：柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。它表示抓取對(duì)象以后拖放到另一個(gè)位置。目前，它是標(biāo)準(zhǔn)的一部分。精簡(jiǎn)高效的命名準(zhǔn)則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會(huì)受到包含塊的限制，可能會(huì)溢出。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不由...

    import. 評(píng)論0 收藏0

  • [翻譯]map和reduce，處理數(shù)據(jù)結(jié)構(gòu)的利器

    摘要：一個(gè)簡(jiǎn)單的實(shí)踐返回?cái)?shù)組或類似結(jié)構(gòu)中滿足條件的第一個(gè)元素。這個(gè)翻譯項(xiàng)目才開(kāi)始，以后會(huì)翻譯越來(lái)越多的作品。 原文地址：https://codeburst.io/writing-javascript-with-map-reduce-980602ff2f2f 作者：Shivek Khurana 簡(jiǎn)介：本文是一份編寫(xiě)優(yōu)雅、簡(jiǎn)潔和函數(shù)式ES6代碼的快捷清單。 現(xiàn)如今JavaScript有許多問(wèn)...

    233jl 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<