建站
咨詢
售后
建站咨詢
新聞中心
JavaScript是當(dāng)今流行語言中對函數(shù)式編程支持最好的編程語言。我們繼續(xù)構(gòu)建函數(shù)式編程的基礎(chǔ)，在前文中分解介紹了對array數(shù)組作變形transform四種方法，分別為：
專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)金牛免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
- array.reduce 幫你精通JS：神奇的array.reduce方法的10個(gè)案例
- array.map 幫你精通JS：神奇的array.map的6個(gè)案例
- array.flat and array.flatMap 幫你精通JS: array.flat與flatMap用法指南
為什么一種編程語言要耗費(fèi)如此巨大的精力在數(shù)組這種數(shù)據(jù)結(jié)構(gòu)上呢?因?yàn)閿?shù)組是我們?nèi)粘Ｋ伎嫉幕?。比如你早起籌劃的一天的任務(wù)是數(shù)組，你的購物清單是數(shù)組。
學(xué)習(xí)編程，絕不能將紙上的字符簡簡單單的只當(dāng)作抽象的無意義的符號，我們要還原為，具象為具體的生活與應(yīng)用之中。
接下來，我們繼續(xù)構(gòu)建我們的思維。介紹用于邏輯判斷的array.filter, array.find, array.findIndex以及array.include(array.find應(yīng)用于具體個(gè)例)和array.indexOf(array.findInde用于具體個(gè)例) 和array.some, array.every.
1.1 array.filter() 概述
filter() 方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素。
語法
- var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
參數(shù)
callback 用來測試數(shù)組的每個(gè)元素的函數(shù)。返回 true 表示該元素通過測試，保留該元素，false 則不保留。它接受以下三個(gè)參數(shù)：
- element 數(shù)組中當(dāng)前正在處理的元素。
- index可選 正在處理的元素在數(shù)組中的索引。
- array可選 調(diào)用了 filter 的數(shù)組本身。
thisArg可選 執(zhí)行 callback 時(shí)，用于 this 的值。
返回值
一個(gè)新的、由通過測試的元素組成的數(shù)組，如果沒有任何數(shù)組元素通過測試，則返回空數(shù)組。
1.2 array.filter() 描述
filter 為數(shù)組中的每個(gè)元素調(diào)用一次 callback 函數(shù)，并利用所有使得 callback 返回 true 或等價(jià)于 true 的值的元素創(chuàng)建一個(gè)新數(shù)組。callback 只會(huì)在已經(jīng)賦值的索引上被調(diào)用，對于那些已經(jīng)被刪除或者從未被賦值的索引不會(huì)被調(diào)用。那些沒有通過 callback 測試的元素會(huì)被跳過，不會(huì)被包含在新數(shù)組中。
callback 被調(diào)用時(shí)傳入三個(gè)參數(shù)：
- 元素的值
- 元素的索引
- 被遍歷的數(shù)組本身
如果為 filter 提供一個(gè) thisArg 參數(shù)，則它會(huì)被作為 callback 被調(diào)用時(shí)的 this 值。否則，callback 的 this 值在非嚴(yán)格模式下將是全局對象，嚴(yán)格模式下為 undefined。callback 函數(shù)最終觀察到的 this 值是根據(jù)通常函數(shù)所看到的 "this"的規(guī)則確定的。
filter 不會(huì)改變原數(shù)組，它返回過濾后的新數(shù)組。
filter 遍歷的元素范圍在第一次調(diào)用 callback 之前就已經(jīng)確定了。在調(diào)用 filter 之后被添加到數(shù)組中的元素不會(huì)被 filter 遍歷到。如果已經(jīng)存在的元素被改變了，則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。被刪除或從來未被賦值的元素不會(huì)被遍歷到。
案例 01 篩選排除所有較小的值
下例使用 filter 創(chuàng)建了一個(gè)新數(shù)組，該數(shù)組的元素由原數(shù)組中值大于 10 的元素組成。
- function isBigEnough(element) {
- return element >= 10;
- }
- var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
- // filtered is [12, 130, 44]
案例 02 過濾 JSON 中的無效條目
以下示例使用 filter() 創(chuàng)建具有非零 id 的元素的 json。
- var arr = [
- { id: 15 },
- { id: -1 },
- { id: 0 },
- { id: 3 },
- { id: 12.2 },
- { },
- { id: null },
- { id: NaN },
- { id: 'undefined' }
- ];
- var invalidEntries = 0;
- function isNumber(obj) {
- return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
- }
- function filterByID(item) {
- if (isNumber(item.id) && item.id !== 0) {
- return true;
- }
- invalidEntries++;
- return false;
- }
- var arrByID = arr.filter(filterByID);
- console.log('Filtered Array\n', arrByID);
- // Filtered Array
- // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
- console.log('Number of Invalid Entries = ', invalidEntries);
- // Number of Invalid Entries = 5
案例 03 在數(shù)組中搜索
下例使用 filter() 根據(jù)搜索條件來過濾數(shù)組內(nèi)容。
- var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
- /**
- * Array filters items based on search criteria (query)
- */
- function filterItems(query) {
- return fruits.filter(function(el) {
- return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
- })
- }
- console.log(filterItems('ap')); // ['apple', 'grapes']
- console.log(filterItems('an')); // ['banana', 'mango', 'orange']
案例 04 ES2015 實(shí)現(xiàn)
- const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
- /**
- * Array filters items based on search criteria (query)
- */
- const filterItems = (query) => {
- return fruits.filter((el) =>
- el.toLowerCase().indexOf(query.toLowerCase()) > -1
- );
- }
- console.log(filterItems('ap')); // ['apple', 'grapes']
- console.log(filterItems('an')); // ['banana', 'mango', 'orang
2.1 array.find() 概述
find() 方法返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的值。否則返回 undefined。
- const array1 = [5, 12, 8, 130, 44];
- const found = array1.find(element => element > 10);
- console.log(found);
- // expected output: 12
另請參見 3.1 findIndex() 方法，它返回?cái)?shù)組中找到的元素的索引，而不是其值。
如果你需要找到一個(gè)元素的位置或者一個(gè)元素是否存在于數(shù)組中，使用Array.prototype.indexOf() 或 Array.prototype.includes()。
語法
- arr.find(callback[, thisArg])
參數(shù)
callback 在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)，接收 3 個(gè)參數(shù)：
- element 當(dāng)前遍歷到的元素。
- index可選 當(dāng)前遍歷到的索引。
- array可選 數(shù)組本身。
thisArg可選 執(zhí)行回調(diào)時(shí)用作this 的對象。
返回值
數(shù)組中第一個(gè)滿足所提供測試函數(shù)的元素的值，否則返回 undefined。
2.2 array.find() 描述
find方法對數(shù)組中的每一項(xiàng)元素執(zhí)行一次 callback 函數(shù)，直至有一個(gè) callback 返回 true。當(dāng)找到了這樣一個(gè)元素后，該方法會(huì)立即返回這個(gè)元素的值，否則返回 undefined。注意 callback 函數(shù)會(huì)為數(shù)組中的每個(gè)索引調(diào)用即從 0 到 length - 1，而不僅僅是那些被賦值的索引，這意味著對于稀疏數(shù)組來說，該方法的效率要低于那些只遍歷有值的索引的方法。
callback函數(shù)帶有3個(gè)參數(shù)：當(dāng)前元素的值、當(dāng)前元素的索引，以及數(shù)組本身。
如果提供了 thisArg參數(shù)，那么它將作為每次 callback函數(shù)執(zhí)行時(shí)的this ，如果未提供，則使用 undefined。
find方法不會(huì)改變數(shù)組。
在第一次調(diào)用 callback函數(shù)時(shí)會(huì)確定元素的索引范圍，因此在 find方法開始執(zhí)行之后添加到數(shù)組的新元素將不會(huì)被 callback函數(shù)訪問到。如果數(shù)組中一個(gè)尚未被callback函數(shù)訪問到的元素的值被callback函數(shù)所改變，那么當(dāng)callback函數(shù)訪問到它時(shí)，它的值是將是根據(jù)它在數(shù)組中的索引所訪問到的當(dāng)前值。被刪除的元素仍舊會(huì)被訪問到，但是其值已經(jīng)是undefined了。
案例 01 用對象的屬性查找數(shù)組里的對象
- var inventory = [
- {name: 'apples', quantity: 2},
- {name: 'bananas', quantity: 0},
- {name: 'cherries', quantity: 5}
- ];
- function findCherries(fruit) {
- return fruit.name === 'cherries';
- }
- console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
案例 02 尋找數(shù)組中的質(zhì)數(shù)
下面的例子展示了如何從一個(gè)數(shù)組中尋找質(zhì)數(shù)(如果找不到質(zhì)數(shù)則返回undefined)
- function isPrime(element, index, array) {
- var start = 2;
- while (start <= Math.sqrt(element)) {
- if (element % start++ < 1) {
- return false;
- }
- }
- return element > 1;
- }
- console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
- console.log([4, 5, 8, 12].find(isPrime)); // 5
當(dāng)在回調(diào)中刪除數(shù)組中的一個(gè)值時(shí)，當(dāng)訪問到這個(gè)位置時(shí)，其傳入的值是 undefined：
- // Declare array with no element at index 2, 3 and 4
- var a = [0,1,,,,5,6];
- // Shows all indexes, not just those that have been assigned values
- a.find(function(value, index) {
- console.log('Visited index ' + index + ' with value ' + value);
- });
- // Shows all indexes, including deleted
- a.find(function(value, index) {
- // Delete element 5 on first iteration
- if (index == 0) {
- console.log('Deleting a[5] with value ' + a[5]);
- delete a[5]; // 注：這里只是將a[5]設(shè)置為undefined，可以試試用a.pop()刪除最后一項(xiàng)，依然會(huì)遍歷到被刪的那一項(xiàng)
- }
- // Element 5 is still visited even though deleted
- console.log('Visited index ' + index + ' with value ' + value);
- });
3.1 array.findIndex() 概述
findIndex()方法返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的索引。若沒有找到對應(yīng)元素則返回-1。
- var inventory = [
- {name: 'apples', quantity: 2},
- {name: 'bananas', quantity: 0},
- {name: 'cherries', quantity: 5}
- ];
- function findCherries(fruit) {
- return fruit.name === 'cherries';
- }
- console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
另請參見 1.1 find() 方法，它返回?cái)?shù)組中找到的元素的值，而不是其索引。
語法
- arr.findIndex(callback[, thisArg])
參數(shù)
callback 針對數(shù)組中的每個(gè)元素, 都會(huì)執(zhí)行該回調(diào)函數(shù), 執(zhí)行時(shí)會(huì)自動(dòng)傳入下面三個(gè)參數(shù):
- element 當(dāng)前元素。
- index 當(dāng)前元素的索引。
- array 調(diào)用findIndex的數(shù)組。
thisArg 可選。執(zhí)行callback時(shí)作為this對象的值.
返回值
數(shù)組中通過提供測試函數(shù)的第一個(gè)元素的索引。否則，返回-1
3.2 array.findIndex() 描述
findIndex方法對數(shù)組中的每個(gè)數(shù)組索引0..length-1(包括)執(zhí)行一次callback函數(shù)，直到找到一個(gè)callback函數(shù)返回真實(shí)值(強(qiáng)制為true)的值。如果找到這樣的元素，findIndex會(huì)立即返回該元素的索引。如果回調(diào)從不返回真值，或者數(shù)組的length為0，則findIndex返回-1。 與某些其他數(shù)組方法(如Array#some)不同，在稀疏數(shù)組中，即使對于數(shù)組中不存在的條目的索引也會(huì)調(diào)用回調(diào)函數(shù)。
回調(diào)函數(shù)調(diào)用時(shí)有三個(gè)參數(shù)：元素的值，元素的索引，以及被遍歷的數(shù)組。
如果一個(gè) thisArg 參數(shù)被提供給 findIndex, 它將會(huì)被當(dāng)作this使用在每次回調(diào)函數(shù)被調(diào)用的時(shí)候。如果沒有被提供，將會(huì)使用undefined。
findIndex不會(huì)修改所調(diào)用的數(shù)組。
在第一次調(diào)用callback函數(shù)時(shí)會(huì)確定元素的索引范圍，因此在findIndex方法開始執(zhí)行之后添加到數(shù)組的新元素將不會(huì)被callback函數(shù)訪問到。如果數(shù)組中一個(gè)尚未被callback函數(shù)訪問到的元素的值被callback函數(shù)所改變，那么當(dāng)callback函數(shù)訪問到它時(shí)，它的值是將是根據(jù)它在數(shù)組中的索引所訪問到的當(dāng)前值。被刪除的元素仍然會(huì)被訪問到。
案例 01 查找數(shù)組中首個(gè)質(zhì)數(shù)元素的索引
以下示例查找數(shù)組中素?cái)?shù)的元素的索引(如果不存在素?cái)?shù)，則返回-1)。
- function isPrime(element, index, array) {
- var start = 2;
- while (start <= Math.sqrt(element)) {
- if (element % start++ < 1) {
- return false;
- }
- }
- return element > 1;
- }
- console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
- console.log([4, 5, 8, 12].find(isPrime)); // 5
4.1 array.includes() 概述
當(dāng)2.1的array.find查找具體的元素的時(shí)候，就是array.include。
includes() 方法用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，根據(jù)情況，如果包含則返回 true，否則返回false。
語法
- arr.includes(valueToFind[, fromIndex])
參數(shù)
valueToFind
需要查找的元素值。
Note: 使用 includes()比較字符串和字符時(shí)是區(qū)分大小寫。
fromIndex 可選 從fromIndex 索引處開始查找 valueToFind。如果為負(fù)值，則按升序從 array.length + fromIndex 的索引開始搜 (即使從末尾開始往前跳 fromIndex 的絕對值個(gè)索引，然后往后搜尋)。默認(rèn)為 0。
返回值
返回一個(gè)布爾值 Boolean ，如果在數(shù)組中找到了(如果傳入了 fromIndex ，表示在 fromIndex 指定的索引范圍中找到了)則返回 true 。
案例 00 簡單示例
- [1, 2, 3].includes(2); // true
- [1, 2, 3].includes(4); // false
- [1, 2, 3].includes(3, 3); // false
- [1, 2, 3].includes(3, -1); // true
- [1, 2, NaN].includes(NaN); // true
案例 01 fromIndex 大于等于數(shù)組長度
如果 fromIndex 大于等于數(shù)組的長度，則會(huì)返回 false，且該數(shù)組不會(huì)被搜索。
- var arr = ['a', 'b', 'c'];
- arr.includes('c', 3); // false
- arr.includes('c', 100); // false
案例 02 計(jì)算出的索引小于 0
如果 fromIndex 為負(fù)值，計(jì)算出的索引將作為開始搜索searchElement的位置。如果計(jì)算出的索引小于 0，則整個(gè)數(shù)組都會(huì)被搜索。
- // array length is 3
- // fromIndex is -100
- // computed index is 3 + (-100) = -97
- var arr = ['a', 'b', 'c'];
- arr.includes('a', -100); // true
- arr.includes('b', -100); // true
- arr.includes('c', -100); // true
- arr.includes('a', -2); // false
案例 03 作為通用方法的 includes()
includes() 方法有意設(shè)計(jì)為通用方法。它不要求this值是數(shù)組對象，所以它可以被用于其他類型的對象 (比如類數(shù)組對象)。下面的例子展示了 在函數(shù)的 arguments 對象上調(diào)用的 includes() 方法。
- (function() {
- console.log([].includes.call(arguments, 'a')); // true
- console.log([].includes.call(arguments, 'd')); // false
- })('a','b','c');
5.1 array.indexOf() 概述
indexOf()方法返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引，如果不存在，則返回-1。
語法
- arr.indexOf(searchElement[, fromIndex])
參數(shù)
- searchElement
要查找的元素
- fromIndex 可選
開始查找的位置。如果該索引值大于或等于數(shù)組長度，意味著不會(huì)在數(shù)組里查找，返回-1。如果參數(shù)中提供的索引值是一個(gè)負(fù)值，則將其作為數(shù)組末尾的一個(gè)抵消，即-1表示從最后一個(gè)元素開始查找，-2表示從倒數(shù)第二個(gè)元素開始查找 ，以此類推。 注意：如果參數(shù)中提供的索引值是一個(gè)負(fù)值，并不改變其查找順序，查找順序仍然是從前向后查詢數(shù)組。如果抵消后的索引值仍小于0，則整個(gè)數(shù)組都將會(huì)被查詢。其默認(rèn)值為0.
返回值
首個(gè)被找到的元素在數(shù)組中的索引位置; 若沒有找到則返回 -1
5.2 array.indexOf() 描述
indexOf 使用strict equality (無論是 ===, 還是 triple-equals操作符都基于同樣的方法)進(jìn)行判斷 searchElement與數(shù)組中包含的元素之間的關(guān)系。
案例 01 使用indexOf
以下例子使用indexOf方法確定多個(gè)值在數(shù)組中的位置。
- var array = [2, 5, 9];
- array.indexOf(2); // 0
- array.indexOf(7); // -1
- array.indexOf(9, 2); // 2
- array.indexOf(2, -1); // -1
- array.indexOf(2, -3); // 0
案例 02 找出指定元素出現(xiàn)的所有位置
- var indices = [];
- var array = ['a', 'b', 'a', 'c', 'a', 'd'];
- var element = 'a';
- var idx = array.indexOf(element);
- while (idx != -1) {
- indices.push(idx);
- idx = array.indexOf(element, idx + 1);
- }
- console.log(indices);
- // [0, 2, 4]
案例 03 判斷一個(gè)元素是否在數(shù)組里，不在則更新數(shù)組
- function updateVegetablesCollection (veggies, veggie) {
- if (veggies.indexOf(veggie) === -1) {
- veggies.push(veggie);
- console.log('New veggies collection is : ' + veggies);
- } else if (veggies.indexOf(veggie) > -1) {
- console.log(veggie + ' already exists in the veggies collection.');
- }
- }
- var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
- // New veggies collection is : potato,tomato,chillies,green-papper,spinach
- updateVegetablesCollection(veggies, 'spinach');
- // spinach already exists in the veggies collection.
- updateVegetablesCollection(veggies, 'spinach');
6.總結(jié)
以上介紹了array用作高階邏輯判斷的5個(gè)函數(shù)：
array.filter, array.find, array,findIndex, array.includes, array.indexOf
另外還有比較常用但是較為簡單的array.every與array.some也用作邏輯判斷，此處略去不提。
網(wǎng)頁名稱：幫你精通JS：函數(shù)式array邏輯判斷的7個(gè)高階函數(shù)
URL地址：http://m.5511xx.com/article/coogdii.html
