JS中截取數(shù)組的幾種方法總結

更新時間：2024年05月10日 09:20:07 作者：小碼云

在JavaScript中數(shù)組是一種常用的數(shù)據(jù)結構,用于存儲多個值,這篇文章主要給大家總結介紹了關于JS中截取數(shù)組的幾種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1. splice()方法

splice()方法通過刪除或者替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組，并以數(shù)組的形式返回被修改的內(nèi)容。這個方法會改變原數(shù)組。

? –語法–

array.splice(start[,deleteCount[,item1[,item2[,...]]]])
//start :指定修改的開始位置（從0開始計數(shù)），如果超出了數(shù)組的長度，則從數(shù)組末尾開始添加內(nèi)容；如果是負值，則表示從數(shù)組末位（從后往前數(shù)）開始的第n 位；如果負數(shù)的絕對值大于數(shù)組的長度，則表示開始的位置為第0位。
//deleteCount(可選) :整數(shù)，表示要刪除的數(shù)組元素的個數(shù)。如果deleteCount大于start之后的元素的總數(shù)，則從start后面的元素都將被刪除（包含第start位）；如果 deleteCount 是 0 或者負數(shù)，則不移除元素。這種情況下，至少應添加一個新元素。
// item1,item2(可選) :要添加進數(shù)組的元素，從start 位置開始。如果不指定，則 splice() 將只刪除數(shù)組元素。
// 返回值 由被刪除的元素組成的一個數(shù)組。如果只刪除了一個元素，則返回只包含一個元素的數(shù)組。如果沒有刪除元素，則返回空數(shù)組。

–案例–

const arr = ["a","b","c","d","e"]
var arr1 = arr.splice(3,1,"f") 
// 3 表示從索引為3的位置開始刪除，
// 1 刪除元素的個數(shù)
// 最后面是表示向原數(shù)組中添加元素，位置就是前面兩個數(shù)字所定義的位置添加數(shù)據(jù)
console.log(arr) //原數(shù)組：arr["a", "b", "c", "f", "e"]
console.log(arr1)  // 返回值 --被刪除的元素 arr1 ["d"]

const arr = ["a","b","c","d","e"]
var arr1 = arr.splice(2,2)  
console.log(arr)  //原數(shù)組：arr ["a", "b", "e"]
console.log(arr1) // 返回值 --被刪除的元素 arr1 ["c", "d"]

const arr = ["a","b","c","d","e"]
var arr1 = arr.splice(1)  //從索引 1 的位置開始刪除所有元素
console.log(arr)  //原數(shù)組：arr["a"]   
console.log(arr1) //返回值 --被刪除的元素 arr1 ["b", "c", "d", "e"]

2. filter() 方法

–語法–

filter() 方法會創(chuàng)建一個新數(shù)組，其中包含所有通過回調(diào)函數(shù)測試的元素。filter 為數(shù)組中的每個元素調(diào)用一次 callback 函數(shù)， callback 函數(shù)返回 true 表示該元素通過測試，保留該元素，false 則不保留。filter 不會改變原數(shù)組，它返回過濾后的新數(shù)組。

–案例–

var animals = [
  { name: "Fluffykins", species: "rabbit" },
  { name: "Caro", species:"dog"},
  { name: "Hamilton", species: "dog" },
  { name: "Harold", species: "fish"},
  { name: "Ursula", species: "cat" },
  { name: "Jimmy", species: "fish" }
];
var dogs = animals.filter(x => x.species === "dog");
var dogs = animals.filter(item=>{
    return item.species === "dog"
})
console.log(dogs); 
// {name: "Caro", species: "dog"}
// { name: "Hamilton", species: "dog" }

3. map()方法

–語法–

map() 方法創(chuàng)建一個新數(shù)組，其結果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結果。map 不會改變原數(shù)組。

–案例–

var animals = [
  { name: "Fluffykins", species: "rabbit" },
  { name: "Caro", species:"dog"},
  { name: "Hamilton", species: "dog" },
  { name: "Harold", species: "fish"},
  { name: "Ursula", species: "cat" },
  { name: "Jimmy", species: "fish" }
];

var names = animals.map(x=>x.name);
var names = animals.map(item=>{
    return item.name
})
console.log(names); 
//["Fluffykins", "Caro", "Hamilton", "Harold", "Ursula", "Jimmy"]

附：js從指定位置截取數(shù)組

在JavaScript中，可以使用slice()方法從指定位置截取數(shù)組。slice()方法接受兩個參數(shù)，第一個參數(shù)是起始位置的下標，第二個參數(shù)是結束位置的下標（不包括該位置的元素）。如果只傳遞一個參數(shù)，則從該位置開始截取到數(shù)組的末尾。如果傳遞的參數(shù)為負數(shù)，則表示從數(shù)組的末尾開始計算位置。截取的元素將被返回為一個新的數(shù)組，而原始數(shù)組不會被修改。[1]

例如，假設有一個數(shù)組a = [1, 2, 3, 4, 5]，我們想從第三個元素開始截取到第五個元素前的所有元素，可以使用a.slice(2, 4)。這將返回一個新的數(shù)組[3, 4]。[2]

如果只傳遞一個參數(shù)，例如a.slice(2)，則從第三個元素開始截取到數(shù)組的末尾，返回的數(shù)組為[3, 4, 5]。[2]

需要注意的是，當起始下標值大于或等于結束下標值時，將不執(zhí)行任何操作，返回空數(shù)組。例如，a.slice(-2, -4)將返回一個空數(shù)組。[2]

總結起來，使用slice()方法可以從指定位置截取數(shù)組，并返回一個新的數(shù)組，而原始數(shù)組不會被修改。