JS中截取数组的几种方法总结

来自:网络
时间:2024-06-10
阅读:

JS中截取数组的几种方法总结

1. splice()方法

splice()方法通过删除或者替换现有元素或者原地添加新的元素来修改数组,并以数组的形式返回被修改的内容。这个方法会改变原数组。

​ –语法–

array.splice(start[,deleteCount[,item1[,item2[,...]]]])
//start :指定修改的开始位置(从0开始计数),如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位(从后往前数)开始的第n 位;如果负数的绝对值大于数组的长度,则表示开始的位置为第0位。
//deleteCount(可选) :整数,表示要删除的数组元素的个数。如果deleteCount大于start之后的元素的总数,则从start后面的元素都将被删除(包含第start位);如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
// item1,item2(可选) :要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。
// 返回值 由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

–案例–

const arr = ["a","b","c","d","e"]
var arr1 = arr.splice(3,1,"f") 
// 3 表示从索引为3的位置开始删除,
// 1 删除元素的个数
// 最后面是表示向原数组中添加元素,位置就是前面两个数字所定义的位置添加数据
console.log(arr) //原数组: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)  //原数组: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)  //原数组:arr["a"]   
console.log(arr1) //返回值 --被删除的元素 arr1 ["b", "c", "d", "e"]

2. filter() 方法

–语法–

filter() 方法会创建一个新数组,其中包含所有通过回调函数测试的元素。filter 为数组中的每个元素调用一次 callback 函数, callback 函数返回 true 表示该元素通过测试,保留该元素,false 则不保留。filter 不会改变原数组,它返回过滤后的新数组。

–案例–

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() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map 不会改变原数组。

–案例–

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从指定位置截取数组

在JavaScript中,可以使用slice()方法从指定位置截取数组。slice()方法接受两个参数,第一个参数是起始位置的下标,第二个参数是结束位置的下标(不包括该位置的元素)。如果只传递一个参数,则从该位置开始截取到数组的末尾。如果传递的参数为负数,则表示从数组的末尾开始计算位置。截取的元素将被返回为一个新的数组,而原始数组不会被修改。[1]

例如,假设有一个数组a = [1, 2, 3, 4, 5],我们想从第三个元素开始截取到第五个元素前的所有元素,可以使用a.slice(2, 4)。这将返回一个新的数组[3, 4]。[2]

如果只传递一个参数,例如a.slice(2),则从第三个元素开始截取到数组的末尾,返回的数组为[3, 4, 5]。[2]

需要注意的是,当起始下标值大于或等于结束下标值时,将不执行任何操作,返回空数组。例如,a.slice(-2, -4)将返回一个空数组。[2]

总结起来,使用slice()方法可以从指定位置截取数组,并返回一个新的数组,而原始数组不会被修改。

总结 

返回顶部
顶部