前后端交互必备之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)

前后端交互必备之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)