javascript - 数组的常用方法

105 阅读8分钟

数组的常用方法:

  • push
    • 语法: 数组.push(数据)
    • 作用: 向数组尾部添加数据
    • 返回值: 数组的最新长度(length)
  • pop
    • 语法: 数组.pop()
    • 作用: 删除数组的最后一位数据
    • 返回值: 被删除的数据
  • unshift
    • 语法: 数组.unshift(数据)
    • 作用: 向数组开头添加数据
    • 返回值: 数组的最新长度(length)
  • shift
    • 语法: 数组.shift()
    • 作用: 删除数组第一位数据
    • 返回值: 被删除的数据
  • reverse
    • 语法: 数组.reverse()
    • 作用: 翻转数组
    • 返回值: 翻转后的数组
  • sort
    • 语法1: 数组.sort()
    • 作用:将数组数据转换为字符串以后,一一比较进行排序
    • 语法2:数组.sort(function fn(a,b){return a - b})
    • 作用:将数组数据按照大小进行升序排列
    • 语法3:数组.sort(function fn(a,b){return b - a})
    • 作用:将数组数据按照大小进行降序排列
    • 返回值:排序后的数据
  • splice
    • 语法1: 数组.splice(开始索引,多少个)
    • 作用: 截取数组部分内容
    • 语法2: 数组.splice(开始索引,多少个,插入的数据1,插入的数据2,插入的数据3..)
    • 作用: 截取数组部分内容,并插入新的数据,从哪截的从哪插入
    • 返回值: 截取出来的部分内容,组成的数组

---------------------------能改变原数组的,只有以上几种方法,其他不会------------------------

  • slice
    • 语法1: 数组.splice(开始索引,结束索引)
      • 参数:
      • 包前不包后:包含开始索引位置的数据,不包括结束索引位置的数据
      • 不写开始索引,默认是0, 不写结束索引,默认是数组的length
      • 参数支持写负数,表示倒数第几个,其实就是length + 负数
    • 作用: 截取数组部分内容
    • 返回值: 截取出来的部分内容组成的新数组
  • concat
    • 语法: 数组.concat(数组1,数组2,....数组3,数组4)
    • 作用: 进行数据拼接,把原始数据和小括号里面的内容,拼接在原始数据中
    • 返回值: 拼接后的数组
  • join
    • 语法: 数组.join('连接符')
    • 作用: 使用'连接符',把数组内的每一个数据连接成一个字符串(不写连接符,默认,链接)
    • 返回值: 连接好的字符串
  • indexOf
    • 语法1: 数组.indexOf(要检查的数据)
      • 作用: 从左到右,检查该数值第一次在数组内出现的索引号
    • 语法2: 数组.indexOf(要检查的数据,开始索引)
      • 作用: 在索引开始的位置,从左到右,检查该数值第一次在数组内出现的索引号
    • 返回值: 找到数据的情况下,返回第一次出现该数据的索引号
      • 如果没有找到该数据,则会返回 -1
  • lastIndexOf
  • 语法1: 数组.indexOf(要检查的数据)
    • 作用: 从右到左,检查该数值第一次在数组内出现的索引号
  • 语法2: 数组.indexOf(要检查的数据,开始索引)
    • 作用: 在索引开始的位置,从右到左,检查该数值第一次在数组内出现的索引号
  • 返回值: 找到数据的情况下,返回第一次出现该数据的索引号
    • 如果没有找到该数据,则会返回 -1
var arr = [1, 2, 3]

// 1:push  向最后一位添加数据
var newArr = arr.push(4)
console.log(newArr)  //1 2 3 4

// 2:pop  删除最后一位数据
var newArr = arr.pop()
console.log(newArr)  //3

// 3:unshift  //向第一位添加数据
var newArr = arr.unshift(0)
console.log(newArr)  //0 1 2 3

// 4:shift  //删除第一位数据
var newArr = arr.shift()
console.log(newArr)  //2 3

// 5:reverse  翻转数组
var newArr = arr.reverse()
console.log(newArr)  //3 2 1

// 6:sort  排序数组
var arr = [10, 102, 301, 10002, 2]
var newArr = arr.sort()
console.log(newArr)  //10, 10002, 102, 2, 301

// 6-2:升序
var arr = [8, 66, 22, 10]
var newArr = arr.sort(function fn(a,b){return a - b})
console.log(newArr)  // 8 10 22 66

// 6-3:降序
var arr = [8, 66, 22, 10]
var newArr = arr.sort(function fn(a,b){return b - a})
console.log(newArr)  // 66 22 10 8

// 7-1:splice 截取数据
var arr = [100, 200, 300, 400, 500]
var num = arr.splice(1,2)
console.log(num)  //200 300
console.log(arr) //100 400 500

// 7-1:splice 截取数据并插入
var arr = [100, 200, 300, 400, 500]
var num = arr.splice(1,2,666,888)
console.log(num)  //200 300
console.log(arr) 100 666 888 400 500

----------------------------------------------------------------------------

// 8:slice 截取数据
var arr = [1, 2, 5, 6, 2, 6, 1]
var num = arr.slice(1,4)  //包前不包后
console.log(num) 2 5 6

var num = arr.slice(1,-3)  //负数就是length + 负数
console.log(num)  // 2 5 6  

// 9:concat  数据拼接
var arr = [1, 2, 5]
var num = arr.concat(666,888,'pink')
console.log(num) 1 2 5 666 888 'pink'

// 10:join 链接符
var arr = [1, 2, 5, 6, 2, 6, 1]
var num = arr.join('!')  //用连接符连接起来,转换为字符串
console.log(num)  //1!2!5!6!2!6!1

// 11:indexOf
var arr = [1, 2, 5, 6, 2, 6, 1]
var num = arr.indexOf(2,6)  //这里第二个值是从索引号开始查找,找不到就是 -1
console.log(num)  //-1

// 12:lastIndexOf
var arr = [1, 2, 5, 6, 2, 6, 1]
var num = arr.lastIndexOf(2,0)
console.log(num)  //-1

数组遍历常用方法

  • forEach
    • 语法:数组.forEach(function (item, index, origin) {})
      • item: 数组中的每一个值
      • index: 数组中每一个值对应的索引号
      • origin: 原始数组
    • 作用: 遍历数组
    • 返回值: 没有返回值,永远都是undefined
  • map
    • 语法: 数组.map(function (item, index, origin))
    • 作用: 映射数组
    • 返回值: 返回一个和原数组长度相同的数组,但是内部数据可以经过映射加工
    • 映射加工: 就是在函数内部以 return 的形式书写
  • filter
    • 语法: 数组名.filter(function (item,index,origin) {})
    • 作用: 过滤数组
    • 返回值: 返回一个新数组,内部存储的是原数组过滤出来的部分内容
    • 过滤条件: 以return 的形式书写
  • find
    • 语法: 数组名.find(function (item,index,origin) {})
    • 作用: 找到数组中满足条件的第一项
    • 返回值: 如果找到了返回的是找到的数据 如果没有找到返回undefined
    • 查找条件以return的形式书写
  • findIndex
    • 语法:数组名.findIndex(function (item,index,origin) {})
    • 作用: 找到数组中满足条件的第一项的下标
    • 返回值: 如果找到了返回满足条件的第一项的索引 如果没有找到返回 -1
    • 查找条件以return的形式书写
  • some
    • 语法: 数组.come(function (item,index,origin) {})
    • 作用: 判断数组内是否有一个满足条件
    • 返回值: 一个布尔值 true / false
    • 判断条件: 以return 的形式书写
  • every
    • 语法: 数组.every(function (item,index,origin) {})
    • 作用: 判断数组内是否全部都满足条件
    • 返回值: 一个布尔值 true / false
    • 判断条件: 以return 的形式书写
  • reduce
    • 语法: 数组.reduce(function (prev,item,index,origin) {}init)
      • prev: 表示初始值 或者上一次的运算结果
      • item: 表示数组的每一项的值
      • index: 表示数组的每一项的索引
      • origin: 原数组
    • 作用: 用来实现叠加效果
    • 返回值: 最终叠加的结果
    • 注意:
      • 1: 叠加的条件以 return 的形式书写
      • 2: prev 的初始值,如果传递了init,n那么就是init的值,如果没有传递init,那么默认值就是数组[0]上的值
      • 如果传递了init,循环执行 数组.length次(因为传递以后从下标0开始的)如果没有传递init,循环执行 数组.length - 1 次
var arr = [100, 200, 300, 400, 500, 600]

// 1:forEach
arr.forEach(function(item,index,origin){
    console.log(item,index);  //打印了数组里的每个值和索引
})

// 2: map
var newArr = arr.map(function(item,index,origin){
    return item * 2 
})
console.log(newArr)  //这里相当于把原数组放大了2倍的值

// 3:filter
var newArr = arr.filter(function(item,index,origin){
    return item > 300
})
console.log(newArr)  //这里返回的值是满足条件的数据组成的新数组

// 4:find
var newArr = arr.find(function (item,index,origin) {
    return item > 350
})
console.log(newArr) 
//这里返回的数值是找到的第一个满足条件的数据,也就是400,如果没有找到满足条件的,则是undefined

// 5:findIndex
var newArr = arr.findIndex(function (item,index,origin) {
    return item > 350
})
console.log(newArr)
//这里返回的是找到的第一个满足条件的数据索引,也就是3,如果没有找到满足条件的,则是-1

var arr = [1, 2, 3, 4, 5, 6, 7, 8]

// 6:some
var bo1 = arr.some(function (item,index,origin) {
    return item % 2 === 0  //这里的判断条件只要有一个满足就会显示true
})
console.log(bo1);  //true

// 7:every
var bo2 = arr.every(function (item,index,origin) {
    return item % 2 === 0  //这里的判断条件看所有数据是不是全部是偶数,只要有一个不满足就会显示false
})
console.log(bo2)  //false

// 8:reduce
var arr = [1, 2, 3, 4, 5, 6, 7, 8]
var sum = arr.reduce(function (prev,item,index,origin) {
    sum = prev + item  //这里每次运行完毕之后就会把prev的值相加之后重新传上去
},0)
console.log(sum)
// 这里如果传了init的话,那么prev的值就是init传过来的,如果没有传的话,那么默认就是下标[0]上的值
数组去重-案例
// 分析: 拿数字挨个和后面对比,用indexOf的方式对比,如果返回值为索引号,就证明有重复的,
// 然后就可以把当前的这个数字删掉,  如果返回的是-1,那么就证明后面没有重复的
var arr = [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5]
for(var i = 0;i < arr.length;i++){
    // 如果当前分支条件成立, 那么代表数组后续一定有与当前重复的值
    if(arr.indexOf(arr[i],arr[i + 1] !== -1)){
        arr.splice(i,1)  // 分支成立时, 将当前项删掉, 达到去重的目的
        i--  // 直接使用 splice 会出现 数组塌陷的情况, 会导致去重无法清除干净, 加上 i--, 解决数组塌陷
    }
}
consloe.log(arr)