天天看點

JavaScript 數組 常用方法(二)

寫在前面:續接上篇 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"

  1. callback的參數清單
element 目前元素
index 目前元素的索引值
參數三 array 調用了

some && every

的數組本身
  1. 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 之前就已确定了。

在調用

some && every

之後添加到數組中的元素不會被 callback 通路到。如果數組中存在的元素被更改,則他們傳入 callback 的值是

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 && findIndex

傳回值不同:

  • 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() 被删除的元素組成的一個數組