寫在前面:續接上篇 JavaScript 數組 常用方法
數組常用方法第二彈來了;
some && every
描述:
every
()與
some
()方法都是JS中數組的疊代方法。
-
方法對數組中每個元素調用被提供的函數,如果有任何一個元素結果為some
則傳回true
否則傳回true
。false
-
方法對數組中每個元素調用被提供的函數,如果所有元素結果為every
true
true
false
一直在找符合條件的值,一旦找到,則不會繼續疊代下去。
some
從疊代開始,一旦有一個不符合條件,則不會繼續疊代下去。
every
注意:如果用一個空數組對兩個方法進行測試:
-
在任何情況下它傳回的都是some
false
-
every
true
文法:
兩個方法的文法是一樣的,隻是傳回的結果不同。
Array.some(callback(element, index, array), thisValue)
Array.every(callback(element, index, array), thisValue)
參數:
兩個函數的參數是一樣的。
callback與thisValue
參數 | 是否可選 | 描述 | |
---|---|---|---|
參數一 | callback | 必選 | 用來測試數組的每個元素的函數。 |
參數二 | thisValue | 可選 | 執行 callback 時,用于 this 的值。 對象作為該執行回調時使用,傳遞給函數。 如果省略了 thisValue ,"this" 的值為 "undefined" |
- callback的參數清單
element | 目前元素 | ||
index | 目前元素的索引值 | ||
參數三 | array | 調用了 的數組本身 |
- thisValue的參數
可選。要傳遞給函數以用作其 "this" 值的值。
如果此參數為空,則值 "undefined" 将作為其 "this" 值傳遞。
傳回值:
傳回值為布爾(Boolean)值,
-
如果有任何一個元素結果為some
true
true
false
-
如果所有元素結果為every
true
true
false
示例:
const Array = [
{ name: "孫悟空", age: 3 },
{ name: "豬八戒", age: 4 },
{ name: "沙和尚", age: 5 },
];
// 檢查數組中是否有人 age 為 4
let some = Array.some(
(item) => {
return item.age === 4;
}
);
// 檢查數組中是否所有人 age 為 4
let every = Array.every(
(item) => {
return item.age === 4;
}
);
console.log(some); // true
console.log(every); // false
細節:
some && every
周遊的元素範圍在第一次調用 callback 之前就已确定了。
在調用之後添加到數組中的元素不會被 callback 通路到。如果數組中存在的元素被更改,則他們傳入 callback 的值是
some && every
通路到他們那一刻的值。那些被删除的元素或從來未被指派的元素将不會被通路到。
some && every
find && findIndex
find
findIndex
()方法都是JS中數組用來查找目标元素的方法。
-
方法對數組中每個元素調用被提供的函數,如果滿足該函數,就傳回滿足該函數的第一個元素的值,否則傳回find()
undefined
-
方法對數組中每個元素調用被提供的函數,如果滿足該函數,就傳回滿足該函數的第一個元素的索引值,否則傳回findIndex()
-1
簡單來說:
-
方法用來查找目标元素,找到就傳回該元素,找不到傳回find()
undefined
-
方法查找目标元素,找到就傳回元素的位置,找不到就傳回findIndex()
-1
這兩個方法差別在于傳回值,一個傳回數組中找到的元素的值,一個傳回數組中找到的元素的索引。
Array.find(callback(element, index, array), thisValue)
Array.findIndex(callback(element, index, array), thisValue)
兩個方法的參數是一樣的。
|
傳回值不同:
-
傳回滿足所提供函數的第一個元素的值,否則傳回find
undefined
-
傳回滿足所提供函數的第一個元素元素的索引,否則傳回findIndex
-1
const Array = [
{ name: "孫悟空", age: 3 },
{ name: "豬八戒", age: 4 },
{ name: "沙和尚", age: 5 },
];
// 查找數組中 age 為 4 的值
let find = Array.find(
(item) => {
return item.age === 4;
}
);
// 查找數組中 age 為 4 元素的索引
let findIndex = Array.findIndex(
(item) => {
return item.age === 4;
}
);
console.log(find); // { name: "豬八戒", age: 4 } 傳回值為 value
console.log(findIndex); // 1 傳回值為 索引值
find && findIndex
方法在第一次調用
callback
函數時會确定元素的索引範圍
在方法開始執行之後添加到數組的新元素将不會被
find && findIndex
函數通路到。如果數組中一個尚未被callback函數通路到的元素的值被
callback
函數所改變,那麼當
callback
函數通路到它時,它的值是将是根據它在數組中的索引所通路到的目前值。被删除的元素仍然會被通路到。
callback
slice && splice
slice()
與
splice()
方法都是JS中數組用來删除數組元素并傳回操作結果。
- slice() 方法以新的數組對象,傳回數組中被選中的元素。
- splice() 方法通過删除或替換現有元素或者原地添加新的元素來修改數組,并以數組形式傳回被修改的内容。
splice用法不僅僅是删除,它還能夠實作對數組元素的删除、插入、替換操作,傳回值為被操作的值。
⚠️注意:_splice會導緻數組塌陷。數組塌陷:使用splice删除元素時,剩餘的數組元素索引的順序會改變。
兩個方法的文法是不一樣的。
Array.slice(begin, end);
Array.splice(start, deleteCount, item1, item2, ... ,itemx);
兩個方法的參數是不一樣的。在 MDN 中這些參數是這樣描述的:
slice()
的參數:
begin 與 end
begin | 提取起始處的索引(從 0 開始)從該索引開始提取原數組元素 | ||
end | 提取終止處的索引(從 0 開始)在該索引處結束提取原數組元素 |
-
- 提取起始處的索引(從 0 開始),從該索引開始提取原數組元素。
- 如果該參數為負數,則表示從原數組中的倒數第幾個元素開始提取,slice(-2) 表示提取原數組中的倒數第二個元素到最後一個元素(包含最後一個元素)。
- 如果省略 begin,則 slice 從索引 0 開始。
- 如果 begin 超出原數組的索引範圍,則會傳回空數組。
-
- 提取終止處的索引(從 0 開始),在該索引處結束提取原數組元素。slice 會提取原數組中索引從 begin 到 end 的所有元素(包含 begin,但不包含 end)。
- slice(1,4) 會提取原數組中從第二個元素開始一直到第四個元素的所有元素 (索引為 1, 2, 3的元素)。
- 如果該參數為負數, 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1) 表示抽取了原數組中的倒數第二個元素到最後一個元素(不包含最後一個元素,也就是隻有倒數第二個元素)。
- 如果 end 被省略,則 slice 會一直提取到原數組末尾。
- 如果 end 大于數組的長度,slice 也會一直提取到原數組末尾。
splice()
的參數
start 與 deleteCount 與 item1, item2, ..., itemx
start | 指定修改的開始位置(從0計數) | ||
deleteCount | 整數,表示要移除的數組元素的個數。 | ||
item1, item2, ..., itemx | 要添加進數組的元素,從start 位置開始。 |
指定修改的開始位置(從0計數)。如果超出了數組的長度,則從數組末尾開始添加内容;如果是負值,則表示從數組末位開始的第幾位(從-1計數,這意味着-n是倒數第n個元素并且等價于(array.length-n);如果負數的絕對值大于數組的長度,則表示開始位置為第0位。
-
- 如果 deleteCount 大于 start 之後的元素的總數,則從 start 後面的元素都将被删除(含第 start 位)。
- 如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是說,如果它大于或者等于start之後的所有元素的數量),那麼start之後數組的所有元素都會被删除。
- 如果 deleteCount 是 0 或者負數,則不移除元素。這種情況下,至少應添加一個新元素。
要添加進數組的元素,從start 位置開始。如果不指定,則 splice() 将隻删除數組元素。
- slice 一個含有被提取元素的新數組。
- splice 由被删除的元素組成的一個數組。如果隻删除了一個元素,則傳回隻包含一個元素的數組。如果沒有删除元素,則傳回空數組。
const Array = [
{ name: "孫悟空", age: 3 },
{ name: "豬八戒", age: 4 },
{ name: "沙和尚", age: 5 },
];
// 查找數組中 age 為 4 的值
const slice = Array.slice(0, 2);
// 查找數組中 age 為 4 元素的索引
const splice = Array.splice(0, 0, { name: "唐僧", age: 2 });
console.log(slice);
/*
{ name: "孫悟空", age: 3 },
{ name: "豬八戒", age: 4 },
*/
console.log(splice); // 【】//向數組中增加一個元素
console.log(Array); //
/*
{ name: "唐僧", age: 2 }
{ name: "孫悟空", age: 3 },
{ name: "豬八戒", age: 4 },
{ name: "沙和尚", age: 5 },
*/
如果向兩個數組任一中添加了新元素,則另一個不會受到影響。
slice
但如果是原數組中有一是個對象引用(不是實際的對象)會拷貝這個對象引用到新的數組裡,兩個對象引用是相同的,那麼被引用的對象改變,則新的和原數組中的這個元素也會發生改變。
slice
如果添加進數組的元素個數不等于被删除的元素個數,數組的長度會發生相應的改變。
splice
方法清單
方法屬性:
方法 | 改變原數組 | 傳回值描述 | |
---|---|---|---|
some() | 否 | 布爾值 | 檢查數組。 |
every() | |||
find() | 所查找到的值 | 查找目标元素。 | |
findindex() | 所查找到的值的索引值 | ||
slice() | 一個含有被提取元素的新數組 | 删除數組元素。 | |
splice() | 是 | 被删除的元素組成的一個數組 |