数组的基本操作及遍历方法

学前端的小白...

已于 2022-08-29 10:07:11 修改

阅读量490

点赞数 2

文章标签： javascript 学习前端

于 2022-08-22 20:11:27 首次发布

本文链接：https://blog.csdn.net/qq_35784654/article/details/126472214

版权

3.对数组的增加、删除、替换 splice

输出

4.数组的排序方法 sort

输出

5.截取一个数组的元素并生成一个新数组slice

一、数组在内存的存储形式

var obj = {
    name: 'jack',
    age: 18,
}
var obj1 = obj
obj1.age = 20

console.log('obj.age ',obj.age)

var arr = [10,20,30]
var arr1 = arr
arr1[1] = 200
console.log(arr[1])


//数组和进行赋值时，只是把栈里面的首地址赋值出去，该地址对应到堆里面的空间只有一个，一个对内容进行修改，另外的一个内容也会进行改变（可以将栈里面的地址比作一个遥控器，堆里面的数组比作电视，多个遥控器控制一个电视）

二、数组的基本操作

1.数组尾部的数据增加和删除

var arr1 =[10,20,30,40,50,60,70,80]
console.log(arr1);

//尾部插入      push
var arr2 =[10,20,30,40,50,60,70,80]
arr2.push(300)
console.log('push尾部插入后的数组 :' )
console.log(arr2);


      
//尾部删除      pop
var arr3 =[10,20,30,40,50,60,70,80]
var num1 = arr3.pop()  //会返回删除的元素
console.log( 'pop尾部删除后的数组');
console.log(arr3)
console.log( 'pop删除的数 :' + num1)

输出

2.数组前的数据增加和删除

//数组的第一个数的删除 shift
var arr4 =[10,20,30,40,50,60,70,80]
var num2 = arr4.shift()   //删除数组第一个数，并返回删除的那个数(直接修改原数组)
console.log('shift删除后的数组 :');
console.log(arr4)
console.log('shift删除的数:' +  num2)
    
//数组的最前面的位置插入  unshift 
var arr5 =[10,20,30,40,50,60,70,80]
arr5.unshift(222)    //单个参数情况下直接在最前面插入 
var length = arr5.unshift(5 , 3)  //多个参数情况下 先插入最前面的，保存为一个数组，把这个数组看成一个整体，再进行插入3
console.log('unshift插入后的数组');
console.log(arr5)
console.log('unshift插入后的长度:' +  length)

输出

3.对数组的增加、删除、替换 splice


//对于splice删除第几个是数组的下标
//删除
var arr6 =[10,20,30,40,50,60,70,80]
arr6.splice(4,2)    //删除  传入两个参数   数组名.splice(第一个数据的位置，往后删除几个)
console.log('使用splice删除后的数组:');
console.log(arr6)     //使用splice删除后的数组

//增加
var arr7 =[10,20,30,40,50,60,70,80]
arr7.splice(0 , 0 , 555)    //数组名.splice(插入位置, 0 ,插入项)
console.log('使用splice插入后的数组:');
console.log(arr7)


//替换
var arr8 =[10,20,30,40,50,60,70,80]
arr8.splice(2, 3 , 300)  //数组名.splice(替换的起始项,替换的项数,替换值)
console.log('替换后的数组 : ')
console.log(arr8)

输出

4.数组的排序方法 sort


var arr12 =[145,20,30,40,50,60,70,100]
arr12.sort() 
console.log('排序后的数组')
console.log(arr12)
//结果为 [100,145,20,30,40,50,60,70]
//默认为 unicode 编码进行排序


// 数组排序函数自定义   
arr12.sort(function fun(a,b){
    if(a < b){
        return -1 //负数升序排序，正数降序排序
    }
})
console.log('修改后的sort方法排序后的数组');
console.log(arr12);
//结果为 [20,30,40,50,60,70,100,145,]

输出

5.截取一个数组的元素并生成一个新数组slice

var arr13 =[10,20,30,40,50,60,70,80]  //表示的是下标
var arr = arr13.slice(2 , 5)  //  数组名.slice(start,end)  不包含 end
console.log('原数组 ：')
console.log(arr13)
console.log('返回的数组 :')
console.log(arr)

输出

6.数组的查询 indexOf()

var arr14 =[10,20,30,40,50,60,70,80]   
var place = arr14.indexOf(20)   //查询参数在数组中的位置，如果查询到，返回该数的下标，未查询到就返回-1

7.将数组拼接为一个字符串 join

var arr15 =[10,20,30,40,50,60,70,80]   
var str = arr15.join('+')
console.log('拼接后的字符串' + str);

输出

8.连接两个数组


var arr9 =[10,20,30,40,50,60,70,80]  //将两个数组连接在一起，返回的是一个新数组，不会改变原来的数组
var arr10 =['连接']
var arr11 = arr9.concat(arr10)
console.log('连接后的数组:')
console.log(arr11)

输出

三、数组的遍历方法

1.forEach map

区别

forEach方法，只遍历数组，不返回新数组

map方法，遍历数组的同时，可以对数组的元素进行修改，并返回一个新数组

var arr = [10,20,30,40,50]
function testforEach(){    //只遍历
    arr.forEach(function(item ,index){
        console.log('item :' + item ,'index :' + index)
    })
}
testforEach()

输出

function testMap(){  //遍历的同时操作数组、返回一个新的数组
    var newArr = arr.map(function(item ,index){
        return item + 10
    })
    console.log(newArr)
}
testMap()

输出

2.filter find

区别

filter 输出所有满足条件的元素，返回到一个新数组

find 输出第一个满足条件的元素，找到后停止遍历

function testFilter(){       //不会改变原数组，会将满足条件的元素装入一个新数组里面
    var newArr = arr.filter(function(item ,index){
        return item > 20
    })
    console.log(newArr)
}
testFilter()

输出

function testFind(){     //返回第一个满足条件的元素，找到第一个后停止遍历
    var num = arr.find(function(item){
        return item > 10
    })
    console.log(num)
}
testFind()

输出

3.every some

区别

every 设置一个判断条件如果数组所有元素都满足条件就返回true，只要有一个不满足就返回false

some 只要有一个满足条件就返回true，都不满足则返回false

function testEvery(){   //当全部满足条件时，返回true  否则返回false
    var boolean = arr.every(function(item){
        return item > 0
    })
    console.log(boolean)
}
testEvery()
//结果为true



function testSome(){      //只要有一个满足判断条件，就会返回true  都不满足则返回false
    var boolean = arr.some(function(item){
        return item > 50
    })
    console.log(boolean)
}
testSome()

//结果为false

4.reduce

function  testReduce1(){
    arr.reduce(function(previousValue ,currentValue ,currentIndex ,arr ){   
                                      //previousValue :上一次遍历的返回值
                                      //currentValue :当前循环的值  
                                      //currentIndex :当前循环的下标 
                                      //arr  循环的数组
        console.log('previousValue :' , previousValue , 'currentValue :' , currentValue ,'currentIndex :' ,currentIndex)

        return currentValue          //将本次循环的元素值返回给下一次的previousValue

    },0)                             //  initailValue = 0   给previousValue赋初值
}                                    // 给previousValue 给元素赋初值  元素全部循环

testReduce1()

function  testReduce2(){
    arr.reduce(function(previousValue ,currentValue ,currentIndex ,arr ){   
        console.log('previousValue :' , previousValue , 'currentValue :' , currentValue ,'currentIndex :' ,currentIndex)
        return currentValue 
    })
}                    // 不给previousValue 赋初值 数组第一个元素不循环，直接跳过
testReduce2()