javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS截取数组

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

作者:小码云

在JavaScript中数组是一种常用的数据结构,用于存储多个值,这篇文章主要给大家总结介绍了关于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()方法可以从指定位置截取数组,并返回一个新的数组,而原始数组不会被修改。

总结 

到此这篇关于JS中截取数组的几种方法的文章就介绍到这了,更多相关JS截取数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文