数组的实例方法大全

这篇博客详细介绍了JavaScript中数组的实例方法,包括添加数组项的push、unshift和splice,删除数组项的pop、shift和splice,截取数组项的slice,以及indexOf、sort、fill、forEach、map和filter等其他常用方法。这些方法帮助开发者高效地操作数组,理解并熟练运用这些方法对于JavaScript编程至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

数组的实例方法大全

运用数组的地方很多,少不了要对其进行增删改查等操作。数组的实例方法很多,也比较容易记混。

添加数组项(push,unshift,splice):

push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度

  var arr = [3, 4, 5, 9];
        arr.push('3', 'hello', '梅花');
        console.log(arr)//7
        //[3, 4, 5, 9,'3', 'hello', '梅花']

unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

var arr = [3, 4, 5, 9];
        arr.unshift('3', '0', 'hello', '茉莉');
        console.log(arr) // (8) ["3", "0", "hello", "茉莉", 3, 4, 5, 9]

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
arr.splice(下标, 删除个数, 添加的数据):从指定下标位置开始,删除几个,然后再该位置插入添加的数据,如果下标超过范围,则按照范围的边界进行处理

  //               0  1  2  3  4     5      6      7        8     9   下标
        var arr = [1, 2, 3, 4, 5, 'aaa', 'hello', 'poem', '10', '12']
      //arr.splice(下标, 删除个数, 添加的数据)
        arr.splice(2, 3, 'love')
        console.log(arr) //(8) [1, 2, "love", "aaa", "hello", "poem", "10", "12"]

以上三个实例方法,都可以添加多个数据,且都会更改原数组。

删除数组项(pop,shift,splice):

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

  var arr = [3, 4, 5, 9];
        console.log(arr.pop());//9
        console.log(arr)//[3,4,5]

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度

 var arr = [3, 4, 5, 9];
        console.log(arr.shift())//3
        console.log(arr)//[4,5,9]

**splice()**方法定义参照上面。
arr.splice(下标, 删除的数量, 添加的数据):从指定下标位置开始,删除指定数量,然后再该位置插入添加的数据,如果下标超过范围,则按照范围的边界进行处理。返回一个新数组,该数组记录被删除的数据

 //               0   1  2  3  4     5      6       7      8      9   下标
        var arr = [1, 2, 3, 4, 5, 'aaa', 'hello', 'poem', '10', '12']
        //arr.splice(下标, 删除个数)
        arr.splice(2, 3)
        console.log(arr) //(7) [1, 2, "aaa", "hello", "poem", "10", "12"]
截取数组项(slice):

slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。得到一个新的数组

  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            //arr.slice(起始位置下标, 结束位置下标):
        var result = arr.slice(2, 5)
        console.log(result) //3,4,5
            //下标可以写负数,如果是负数,则从数组的末尾开始,到结束位置
        console.log(arr.slice(arr.length - 5, 8)) //[6,7,8]
            //结束位置不够的,就到数组边界
        console.log(arr.slice(arr.length - 5, 20)) //[6, 7, 8, 9, 10]
            //不写结束下标,就从倒数位置开始到结束
        console.log(arr.slice(arr.length - 3)) //[8,9,10]
            //如果不写下标,则和原数组的数据相同
        console.log(arr.slice())// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
其他常用实例:

**indexOf()**方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。

var arr = [1, 3, 14, 15, 9, 2, 6]
            //arr数组中没有5,返回-1
        console.log(arr.indexOf(5)) //-1
            //在下标为1的位置找到3,
        console.log(arr.indexOf(3, 1)) //返回索引1
        console.log(arr.indexOf(5, 9)) //-1
            //-4表示从倒数第四个元素开始查找 
        console.log(arr.indexOf(15, -4)) //3
        console.log(arr.indexOf(3, -10)) //1

运用:


    /**
     * 5. 去掉数组中的重复项
     * @param {Array} arr 存储数据的数组
     * @param {Array} arr1 接受数据的新数组
     */
    fun5: function(arr) {
        var arr1 = new Array()
        for (var i = 0; i < arr.length; i++) {
            //indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
            if (arr1.indexOf(arr[i]) == -1) {
                arr1.push(arr[i]);
            }

        }
        return arr1
    },

遍历相关的实例方法
sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的
由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。

   var arr=[1,5,3,4,8,6]
         console.log(arr.sort())//[1, 3, 4, 5, 6, 8]
        
         var arr=[
            { name:'白居易',poem:'长恨歌'},
            {name:'李白',poem:'将进酒' },
            {name:'东野圭吾',poem:'杂货铺'}
    ]
    arr.sort(function(x,y){
        //根据名字字符长度排序
    return x.name.length - y.name.length
    })
    console.log(arr)
//  {name: "李白", poem: "将进酒"}
//  {name: "白居易", poem: "长恨歌"}
//  {name: "东野圭吾", poem: "杂货铺"}

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
arr.fill(value, start, end)
value:用来填充数组元素的值。
start :起始索引,默认值为0。
end :终止索引,默认值为 this.length。

// 创建一个长度为10的数组,给数组的每一项赋值为'wo'      
var arr=new Array(10);
// 将arr数组 从下标3开始,到8位的数据替换成wo
arr.fill('wo',3,9)
console.log(arr)//[empty × 3, "wo", "wo", "wo", "wo", "wo", "wo", empty]
var arr1=[1,2,3,4,5,6,7,8]
//不包括终止索引5
console.log(arr1.fill('梅花',2,5))//[1, 2, "梅花", "梅花", "梅花", 6, 7, 8]

forEach() 方法对数组的每个元素执行一次给定的函数。

  • forEach 遍历数组: 两个参数
    • 回调函数,该函数有三个参数 当前数组项 , 当前下标, 本数组
    • 回调函数的this指向, 默认指向window
var obj={
    1:'兰花',
    5:'梅花',
    7:'竹叶'
}
var arr=[1,5,7]
arr.forEach(function(item,index,self){
    console.log(this[item])//兰花,梅花,竹叶
},obj)让回调函数中的this指向 arr      

map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

var arr=[1,3,5,7,9]
var Newarr=arr.map(function(item,index){
    return item*2
})
//返回的是新数组,之前数组的值是不改变的
console.log(arr)// (5) [1, 3, 5, 7, 9]
console.log(Newarr)// (5) [2, 6, 10, 14, 18]
//求数组中每个元素的平方根
var number=[9,4,1,25,36]
var num1=number.map(Math.sqrt)
console.log(num1)//(5) [3, 2, 1, 5, 6]

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

//求大于等于60的数
function test(num){
    return num >= 60
}
var arr=[34,56,78,98,45,76,89,60].filter(test);
console.log(arr)

数组API为我们日常的工作带来了很多的便利,学会运用它是必要的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值