快捷導(dǎo)航

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

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

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

1. splice()方法

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

? –語(yǔ)法–

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

–案例–

const arr = ["a","b","c","d","e"]
var arr1 = arr.splice(3,1,"f") 
// 3 表示從索引為3的位置開(kāi)始刪除，
// 1 刪除元素的個(gè)數(shù)
// 最后面是表示向原數(shù)組中添加元素，位置就是前面兩個(gè)數(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 的位置開(kāi)始刪除所有元素
console.log(arr)  //原數(shù)組：arr["a"]   
console.log(arr1) //返回值 --被刪除的元素 arr1 ["b", "c", "d", "e"]

2. filter() 方法

–語(yǔ)法–

filter() 方法會(huì)創(chuàng)建一個(gè)新數(shù)組，其中包含所有通過(guò)回調(diào)函數(shù)測(cè)試的元素。filter 為數(shù)組中的每個(gè)元素調(diào)用一次 callback 函數(shù)， callback 函數(shù)返回 true 表示該元素通過(guò)測(cè)試，保留該元素，false 則不保留。filter 不會(huì)改變?cè)瓟?shù)組，它返回過(guò)濾后的新數(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()方法

–語(yǔ)法–

map() 方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。map 不會(huì)改變?cè)瓟?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()方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是起始位置的下標(biāo)，第二個(gè)參數(shù)是結(jié)束位置的下標(biāo)（不包括該位置的元素）。如果只傳遞一個(gè)參數(shù)，則從該位置開(kāi)始截取到數(shù)組的末尾。如果傳遞的參數(shù)為負(fù)數(shù)，則表示從數(shù)組的末尾開(kāi)始計(jì)算位置。截取的元素將被返回為一個(gè)新的數(shù)組，而原始數(shù)組不會(huì)被修改。[1]

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

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

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

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