資訊專欄INFORMATION COLUMN
摘要：中一共有五種數(shù)組遍歷迭代方法，它們都會對數(shù)組中每個元素執(zhí)行一些業(yè)務，且都不會修改原數(shù)組，這些方法包括如果該函數(shù)任意一項返回，則返回，如果全部返回則最終返回如果該函數(shù)每一項都返回，則返回，否則返回會返回一個新數(shù)組，該數(shù)組是由滿足條件的任意項組
ES5中一共有五種數(shù)組遍歷（迭代）方法，它們都會對數(shù)組中每個元素執(zhí)行一些業(yè)務，且都不會修改原數(shù)組，這些方法包括：
1、some() 如果該函數(shù)任意一項返回 true，則返回 true，如果全部返回 false 則最終返回 false
2、every() 如果該函數(shù)每一項都返回 true，則返回 true， 否則返回 false
3、filter() 會返回一個新數(shù)組，該數(shù)組是由滿足條件的任意項組成
4、forEach() 該函數(shù)沒有返回值，本質(zhì)上與使用 for 循環(huán)迭代數(shù)組一樣
5、map() 最終會返回一個經(jīng)過操作后的新數(shù)組；
其中 some() 和 every() 是非常相似的，它們都會返回一個 boolean，主要區(qū)別就在于，前者數(shù)組中只要有一項滿足條件即可返回 true，而后者需要每一項都要滿足條件才返回 true
let arr = [2, 3, 4, 5];
let res = arr.every((item, index ,arr) => {
return item > 4
});
let otherRes = arr.some((item, index, arr) => {
return item > 4
});
console.log(res); // false
console.log(otherRes); // true
可以看到 arr 數(shù)組中只有 5 滿足了大于4，而 every() 方法要求必須每一項都返回 true 才滿足，而 some()方法只要數(shù)組中有至少一項滿足條件即可，所以 5 滿足了條件則返回了 true；
filter()
這個方法就是指定一些條件然后過濾掉，然后返回滿足條件的元素再組成數(shù)組，并不會影響原數(shù)組結(jié)構(gòu)；
let arr = [2, 3, 4, 5];
let res = arr.filter((item, index ,arr) => {
return item > 3
});
console.log(res); // [ 4, 5 ]
console.log(arr); // [ 2, 3, 4, 5 ]
簡單明了
再來看一下 forEach() 方法：
它并沒有返回值，和 for 遍歷類似：
let arr = [2, 2, 3, 4, 4, 5];
let newArr = [];
arr.forEach((item, index ,arr) => {
if (newArr.indexOf(item) === -1) {
newArr.push(item)
}
return newArr
});
console.log(newArr); // [ 2, 3, 4, 5 ]
這里簡單實現(xiàn)了一個數(shù)組去重，當然即然剛剛說 forEach() 和 for 相似，看看代碼如何體現(xiàn)：
let arr = [2, 2, 3, 4, 4, 5];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i])
}
}
console.log(newArr); // [ 2, 3, 4, 5 ]
區(qū)別只不過 for遍歷中 arr[i] 相當于 forEach中callback函數(shù)中的item參數(shù)
forEach() 看起來更清晰簡潔一些
最后就要說一下 map() 這個方法：
在 React 這個框架中其實我們經(jīng)常見到這個方法，通常用來做渲染 list
先看一下用法：
let arr = [1, 2, 3];
let newArr = arr.map((item, index ,arr) => {
return item * 2
});
console.log(newArr); // [ 2, 4, 6 ]
map() 方法是讓每個元素執(zhí)行指定邏輯，最后再返回一個新的數(shù)組；
數(shù)組的遍歷（迭代）方法就說到這里，歡迎有問題和錯誤指出，也歡迎閱讀我近期關(guān)于TypeScript的相關(guān)介紹。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105413.html
摘要：有兩個協(xié)議可迭代協(xié)議和迭代器協(xié)議。為了變成可迭代對象，一個對象必須實現(xiàn)或者它原型鏈的某個對象必須有一個名字是的屬性迭代器協(xié)議該迭代器協(xié)議定義了一種標準的方式來產(chǎn)生一個有限或無限序列的值。 ECMAScript 2015的幾個補充，并不是新的內(nèi)置或語法，而是協(xié)議。這些協(xié)議可以被任何遵循某些約定的對象來實現(xiàn)。有兩個協(xié)議：可迭代協(xié)議和迭代器協(xié)議。 可迭代協(xié)議 可迭代協(xié)議允許 JavaScri...
摘要：數(shù)組方法中，相比等常用的迭代方法，常常被我們所忽略，今天一起來探究一下在我們實戰(zhàn)開發(fā)當中，能有哪些妙用之處，下面從語法開始介紹。按順序運行異步函數(shù)我們可以做的另一件事是按順序運行而不是并行。函數(shù)返回一個對象，可以使用方法添加回調(diào)函數(shù)。 showImg(https://segmentfault.com/img/remote/1460000019423051); Javascript數(shù)組方...
摘要：語法函數(shù)的幾個參數(shù)含義上一次執(zhí)行函數(shù)后返回的值當前數(shù)組元素值當前數(shù)組元素索引遍歷的數(shù)組對象第一次調(diào)用函數(shù)時，如果有值，則為，為數(shù)組第一個元素。 Javascript 中的 Array 操作 在各種語言中，數(shù)組總是一個比較重要的數(shù)據(jù)結(jié)構(gòu)，Javascript 中的 Array 也不例外。Javascript 中的 Array 提供了一系列方法可以更好地讓我們操作 Array 中的元素，下...
摘要：語法參數(shù)當前遍歷項。遍歷的范圍在第一次調(diào)用前就會確定。已刪除的項不會被遍歷到。的是由提出的，目的是作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一方法。不僅可以遍歷數(shù)組，還可以遍歷結(jié)構(gòu)，某些類似數(shù)組的對象如對象對象，對象，以及字符串。 即使是最簡單的循環(huán)，其中也深藏學問 ECMAScript5(es5)有三種for循環(huán) 簡單for for in forEach ECMAScript6(es6)新增 fo...
摘要：數(shù)組原型提供的方法非常之多，主要分為三種直接修改原數(shù)組原數(shù)組不變，返回新數(shù)組數(shù)組遍歷方法直接修改原數(shù)組的刪除一個數(shù)組中的最后的一個元素，并且返回這個元素添加一個或者多個元素到數(shù)組末尾，并且返回數(shù)組新的長度刪除數(shù)組的第一個元素，并返回這個元素 Javascript數(shù)組原型提供的方法非常之多，主要分為三種： 直接修改原數(shù)組 原數(shù)組不變，返回新數(shù)組 數(shù)組遍歷方法 直接修改原數(shù)組的API ...
閱讀 838·2021-11-25 09:43
閱讀 1713·2021-09-29 09:42
閱讀 1921·2019-08-30 15:55
閱讀 3441·2019-08-30 15:54
閱讀 2644·2019-08-30 13:20
閱讀 3531·2019-08-29 13:25
閱讀 949·2019-08-28 18:03
閱讀 1808·2019-08-26 13:44
