数组方法

作者: Do_Du | 来源:发表于2019-11-07 13:58 被阅读0次

复习js数组方法

https://www.w3school.com.cn/js/js_array_sort.asp

一、查找数组内指定元素的位置 indexOf、lastIndexOf、findIndex

indexOf：查到指定元素第一次出现的位置返回其索引，没有找到返回-1
lastIndexOf：查找指定元素第最后一次出现的位置返回其索引，索引还是从前往后数
findIndex：查找符合条件的数组第一个元素位置，返回的是符合条件的数组索引

    var arr = [2,3,4,"root","evenyao",3,8,7]
    console.log(arr.indexOf(3)) // 1
    console.log(arr.indexOf(11)) // 查不到返回-1
    console.log(arr.lastIndexOf(3)) // 5

_index = arr .findIndex((item)=>{
   return item =='root'
 })
console.log(_index ) // 3

二、纯一维数组可以通过toString转成字符串

    var arr = [2,3,4,"root","evenyao",3,8,7]
    console.log(arr.toString()) // 2,3,4,root,evenyao,3,8,7

插播：字符串类型的一维数组形式转化成数组

var arr = "[2,3,4,"root","evenyao",3,8,7]"
console.log(JSON.parse(arr)) // [2,3,4,"root","evenyao",3,8,7]

三、添加push、删除元素pop（在数组末尾（后面）操作）

push：向数组添加元素，返回的是新数组长度

    var arr = [2,3,4,"root","evenyao",3,8,7]
    var newArr1 = arr.push('newWord')
    console.log(newArr1) // 9
    console.log(arr) //  [2, 3, 4, "root", "evenyao", 3, 8, 7, "newWord"]

添加数组对象

var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      }
    ]

    brr.push({
      code:3,
      name: '333'
    })
    console.log(brr)

image.png

pop：向数组删除最后元素，返回的是新数组长度

    var arr = [2,3,4,"root","evenyao",3,8,7]
    var newArr1 = arr.pop()
    console.log(newArr1) // 7
    console.log(arr) //  [2, 3, 4, "root", "evenyao", 3, 8]

删除数组对象

var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      }
    ]

    brr.pop()
    console.log(brr)

image.png

三、添加unshift、删除元素shift（在数组首部（前面）操作）

unshift：添加数组到第一个元素，返回新增后的数组长度

     var arr = [2,3,4,"root","evenyao",3,8,7]
    var newArr1 = arr.unshift('首部添加')
    console.log(newArr1)  // 9
    console.log(arr)  //  ["首部添加", 2, 3, 4, "root", "evenyao", 3, 8, 7]

shift：删除数组第一个元素，返回删除的元素

    var arr = [2,3,4,"root","evenyao",3,8,7]
    var newArr1 = arr.shift()
    console.log(newArr1)  // 2
    console.log(arr)  // [3, 4, "root", "evenyao", 3, 8, 7]

四、拼接数组 - splice可以用来添加新项和删除元素

splice(添加新元素的位置a，要删除多少个元素b，添加的元素c)，添加的元素可以1个或者多个，用逗号隔开

b为0时，是添加

var arr = [2,3,4,"root","evenyao",3,8,7]
arr.splice(2,0,'添加新项1')
console.log(arr)

返回： ["首部添加", 2, 3, 4, "root", "evenyao", 3, 8, 7]

b为1时，是替换
在下标索引2的位置，删除元素（即删除下标索引2的元素，即删除4）；再在下表索引2的位置插入‘添加新项1’；

var arr = [2,3,4,"root","evenyao",3,8,7]
arr.splice(2,1,'添加新项1')
console.log(arr)

返回： [2, 3, "添加新项1", "root", "evenyao", 3, 8, 7]

c 为空时是删除

splice(下标索引a，删除的个数b），从a的位置开始删除b个元素

var arr = [2,3,4,"root","evenyao",3,8,7]
arr.splice(3,2) // [2, 3, 4, 3, 8, 7]

数组对象同理

    var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      }
    ]

    brr.splice(1,0,{code: 3,name: '33'})
    console.log(brr)

image.png

五、截取数组 - slice截取（裁剪）出新数组

slice() 可接受两个参数，比如 (1, 3)，该方法会从开始参数选取元素，直到结束参数（不包括）为止。
返回的是截取的元素，元素组会改变，截取的元素将不存在
注：若只有一个参数slice(2)，则截取从下标索引2开始所有元素

//         0,1,2,3       ,4      ,5,6,7
var arr = [2,3,4,"root","evenyao",3,8,7]
var newArr = arr.slice(1,3)  // 从下标索引1开始截取到下标索引3，但是不包括下标索引3的元素
console.log(newArr) // [2, 3, 4, "root", "evenyao", 3, 8, 7]
console.log(arr) //  [3, 4]

slice只有一个参数

    var arr = [2,3,4,"root","evenyao",3,8,7]
    var newArr = arr.slice(2) //截取下标2开始所有元素
    
    console.log(newArr) // [2, 3, 4, "root", "evenyao", 3, 8, 7]
    console.log(arr) // [4, "root", "evenyao", 3, 8, 7]

六、合并（连接）数组 - concat合并两个数组

concat()方法不会更改现有数组。它总是返回一个新数组

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

七、反转数组 - reverse

    var arr = [2,3,4,"root","evenyao",3,8,7]
    arr.reverse()
    console.log(arr) //  [7, 8, 3, "evenyao", "root", 4, 3, 2]

八、数组排序 - sort

    var arr = [2,3,4,"root","evenyao",3,8,7]
    arr.sort()
    console.log(arr) //  [2, 3, 3, 4, 7, 8, "evenyao", "root"]

默认地，sort() 函数按照字符串顺序对值进行排序。该函数很适合字符串（"Apple" 会排在 "Banana" 之前）。不过，如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。正因如此，sort() 方法在对数值排序时会产生不正确的结果。我们通过一个比值函数来修正此问题：

    var points = [40, 100, 1, 5, 25, 10];
    // points.sort(); //  [1, 10, 100, 25, 40, 5]
    points.sort((a, b) => {return a - b});  // 升序：[1, 5, 10, 25, 40, 100]
    console.log(points)

    var points = [40, 100, 1, 5, 25, 10];
    points.sort((a, b) => {return b - a});  // 降序：[100, 40, 25, 10, 5, 1]
    console.log(points)

九、查找数组最大值、最小值

查找最大值：Math.max.apply(null,arr)
查找最小值：Math.min.apply(null,arr)

    var arr = [2,3,4,3,8,7]
    console.log( Math.min.apply(null,arr)) // 2
    console.log( Math.min.apply(null,arr)) // 8

十、数组循环

Array.forEach(item,index,arr)：循环

可以传3个参数，第一个是数组项的值，第二个是索引，第三个当前数组本身
forEach循环没有返回值，且循环内的操作会改变原数组

    var arr = [2,3,4,3,8,7]
    arr.forEach((item,index,arr)=>{
      console.log(item,index,arr)
    })

image.png

forEach循环没有返回值，且循环内的操作会改变原数组

    var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      }
    ]

    var crr = brr.forEach((item,index,arr)=>{
      item.code = '0' + item.code
    })
    console.log(brr)
    console.log(crr)

image.png

Array.map()：循环

map()循环可以传3个参数，第一个是数组项的值，第二个是索引，第三个当前数组本身
map()循环一般需要return；
当没有return，相当于forEach，
当有return时，通过对每个数组元素执行函数来创建新数组，不会对没有值的数组元素执行函数；不会改变原数组。
例子1没有return，相当于forEach功能，会改变原数组，且没有返回值，返回undefined；
例子2有return，有返回值，生成新数组，且原数组不变

var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      }
    ]
    var crr = brr.map((item,index,arr)=>{
      item.code = '0' + item.code
    })
    console.log(brr)
    console.log(crr)

image.png

var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      }
    ]
    var crr = brr.map((item,index,arr)=>{
      let obj = Object.assign({},item) // 强复制
      obj.code = '0' + item.code
      return obj
    })
    console.log(brr)
    console.log(crr)

image.png

Array.filter()：返回过滤符合条件的数组

过滤符合条件的数组；
可以传3个参数，第一个是数组项的值，第二个是索引，第三个当前数组本身
返回新数组（筛选出符合条件的数组元素组成新数组），不会改变原数组

var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      }
    ]

    var crr = brr.filter((item,index,arr)=>{
      return item.code == 1
    })
    console.log(brr)
    console.log(crr)

image.png

var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter((value, index, array) =>{
      return value > 18
    });
    console.log(over18) // [45, 25]

Array.reduce()/reduceRight()

数组内所有元素相+-*
reduce(total,value, index, array)可以传四个参数，totoal是前面相加减的和，vlaue是数组项的值

    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.reduceRight((total,value, index, array) =>{ // reduce效果相同
      return total + value
    });
    console.log(over18) // 99

Array.some()：查找数组中是否满足某个条件，只要有一个满足则返回true

var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      },
      {
        code:3,
        name: '11'
      },
    ]

    var crr = brr.some((item,index,arr)=>{
      return item.name == '11' // true
    })
    console.log(crr)

Array.every()：查找数组中是否满足某个条件，必须所有元素均满足才返回true，否则返回 false

var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      },
      {
        code:3,
        name: '11'
      },
    ]

    var crr = brr.every((item,index,arr)=>{
      return item.name == '11' // false
    })
    console.log(crr)

Array.find()：寻找符合条件的第一个元素

可以传3个参数，第一个是数组项的值，第二个是索引，第三个当前数组本身

 var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      },
      {
        code:3,
        name: '11'
      },
    ]

    var crr = brr.find((item,index,arr)=>{
      return item.name == '11' // {code: 1, name: "11"}
    })

Array.findIndex()：寻找符合条件的第一个元素的索引下标

 var brr = [
      {
        code:1,
        name: '11'
      },
      {
        code: 2,
        name: '22'
      },
      {
        code:3,
        name: '11'
      },
    ]

    var crr = brr.findIndex((item,index,arr)=>{
      return item.name == '11' // 0
    })

数组方法

复习js数组方法

一、查找数组内指定元素的位置 indexOf、lastIndexOf、findIndex

二、纯一维数组可以通过toString转成字符串

三、添加push、删除元素pop（在数组末尾（后面）操作）

push：向数组添加元素，返回的是新数组长度

pop：向数组删除最后元素，返回的是新数组长度

三、添加unshift、删除元素shift（在数组首部（前面）操作）

unshift：添加数组到第一个元素，返回新增后的数组长度

shift：删除数组第一个元素，返回删除的元素

四、拼接数组 - splice可以用来添加新项和删除元素

五、截取数组 - slice截取（裁剪）出新数组

六、合并（连接）数组 - concat合并两个数组

七、反转数组 - reverse

八、数组排序 - sort

九、查找数组最大值、最小值

十、数组循环

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读