前后端交互必备之js数组方法大全

CSDN写作新手，写的不妥之处，请大佬纠正且多多包涵。

文章目录

• 数组简介
• 一、js数组方法
• 二、js数组方法的使用
  • 1.基础方法
  • 2.进阶方法

---

数组简介

        数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。
数组就类似一个储物柜，储物柜有按顺序排好的小储物箱，每个小储物箱都有一个序号，可以放置很多东西，同时我们也可以按照序号取东西出来。

                     创建数组的4种方法 

          1、自面量创建 var arr = [ ];

          2、构造函数方法创建数组，new一个数组创建 var arr = new Array();

          3、也是采用构造函数创建数组对象，不过设置了初始长度：var arr = new Array(5);

          4、也是采用构造函数创建数组对象，且在创建的同时给它赋予了初始值“5”：

                 var arr = new Array("5");

---

一、js数组方法

             数组的方法有：push,unshift,pop,shift,splice,slice(类似非数组方法截取字符串的substr)，

   concat,reverse,sort,join,tostring,indexof,lastindexof,forEach,filter,map,some,every,find,findindex

二、js数组方法的使用

1.基础方法

1、push 往数组最后一个位置追加元素

<script>
    var arr = [1,2,3,4,5,6]
    arr.push(7)
    console.log(arr)
</script>

2、unshift 往数组第一个位置追加元素

 var arr = [1,2,3,4,5,6]
    arr.unshift(0)
    console.log(arr)

3、pop移除数组最后一个元素，并返回被移除的元素

var arr = [1,2,3,4,5,6]
    var res = arr.pop()
    console.log(arr)
    console.log(res)

4、shift 移除第一个元素，并返回被移除的元素

 var arr = [1, 2, 3, 4, 5, 6]
    var res = arr.shift()
    console.log(arr)
    console.log(res)

5、splice 移除数组某个位置的元素，可以移除多个，并可以加参数3替补元素

     参数1 表示开始删除的索引

     参数2 表示删除的个数

     参数3或4或5等等 表示要替补的元素

var arr = [1,2,3,4,5,6]
    arr.splice(1,1,666)
    console.log(arr)

6、slice （顾头不顾尾）切割数组，返回新数组，不改变原数组

    参数1 表示切割开始的索引

    参数2 表示切割结束的索引

注：如果只传一个参数的话，表示从这个索引位置切割到最后一个

var arr = ['a','b','c','d','e','f']
     var res = arr.slice(0,5)
     console.log(arr)
    console.log(res)

7、concat 拼接数组，返回新数组，不改变原数组

 var arr = ['a', 'b', 'c', 'd', 'e', 'f']
    var res1 = arr.concat(1,2,3)
    // 或者
    var res2 = arr.concat([1,2,3])
    console.log(arr)
    console.log(res1)
    console.log(res2)

8、reverse 数组反转，返回新数组，会改变原数组

  var arr = ['a', 'b', 'c', 'd', 'e', 'f']
    var res = arr.reverse()
    console.log(arr)
    console.log(res)

9、sort 数组排序，返回新数组，会改变原数组

 var arr = [5,2,3,7,5,9]
    var res = arr.sort()
    console.log(arr)
    console.log(res)

10、join 把数组用字符串拼接，返回拼接字符串，不影响原数组

 var arr = ['a', 'b','c', 'd', 'e', 'f']
    var res = arr.join('-')
    console.log(arr)
    console.log(res)

11、tostring 把数组转出字符串

var arr = ['a', 'b','c', 'd', 'e', 'f']
    var res = arr.toString()
    console.log(res)

12、indexof 查询某个元素的索引，不存在返回-1（可以利用这个特性判断元素是否存在数组）

var arr = ['a', 'b','c', 'd', 'e', 'f']
    var res1 = arr.indexOf('c')
    var res2 = arr.indexOf('博古初见')
    console.log(res1)
    console.log(res2)

13、lastindexof 查询某个元素的最后一个索引位置

  var arr = ['a', 'a','b','c', 'd', 'e', 'f']
    var res = arr.lastIndexOf('a') 
    console.log(res)

2.进阶方法

1、forEach 遍历数组，会遍历数组的每一个元素

var arr = [{
        id: 1,
        name: '张三',
        job: '法外狂徒'
    },
    {
        id: 2,
        name: '李四',
        job: '电玩小子'
    },
    {
        id: 3,
        name: '王五',
        job: '隔壁老王'
    }]
    arr.forEach(item => {console.log(item.job)})

2、filter 过滤数组，根据条件进行过滤，返回一个新数组，不影响原数组

   var arr = [{
        id: 1,
        name: '张三',
        job: '法外狂徒'
    },
    {
        id: 2,
        name: '李四',
        job: '电玩小子'
    },
    {
        id: 3,
        name: '王五',
        job: '隔壁老王'
    }]
    var res = arr.filter(item => {
        return item.name === '张三'
    })
    console.log(res)

3、map 根据原数组，返回一个新数组，此数组结构发生改变

 var arr = [{
        id: 1,
        name: '张三',
        job: '法外狂徒'
    },
    {
        id: 2,
        name: '李四',
        job: '电玩小子'
    },
    {
        id: 3,
        name: '王五',
        job: '隔壁老王'
    }]
    var res = arr.map(item => {
        return item.name
    })

4、some 用户查询数组中是否符合条件的元素，如果有返回true，没有返回false

var arr = [{
        id: 1,
        name: '张三',
        job: '法外狂徒'
    },
    {
        id: 2,
        name: '李四',
        job: '电玩小子'
    },
    {
        id: 3,
        name: '王五',
        job: '隔壁老王'
    }]
    var res1 = arr.some(item => {
        return item.id===2
    })
    var res2 = arr.some(item => {
        return item.id===11
    })
    console.log(res1)
    console.log(res2)

5、find 查找符合条件的某个元素，返回该元素对象

 var arr = [{
        id: 1,
        name: '张三',
        job: '法外狂徒'
    },
    {
        id: 2,
        name: '李四',
        job: '电玩小子'
    },
    {
        id: 3,
        name: '王五',
        job: '隔壁老王'
    }]
    var res = arr.find( item =>{
        return item.name = '张三'
    })
    console.log(res)