干货！！！js数组常用方法😊😊

一骑绝尘蛙
256 阅读6分钟

js数组方法

数组的常用方法很多，最近整理了一下给小伙伴们一些参考

参考文档：

MDN-Array

ECMAScript6入门-Array

方法列表

  • join() 
  • push()
  • pop()
  • shift()
  • unshift()
  • sort()
  • reverse()
  • concat()
  • slice()
  • splice()
  • indexOf()        （ ES5新增）
  • lastIndexOf()   （ES5新增）
  • forEach()         （ES5新增）
  • map()              （ES5新增）
  • filter()              （ES5新增）
  • every()             （ES5新增）
  • some()             （ES5新增）
  • find()               （ES6新增）
  • findIndex()       （ES6新增）
  • includes()         （ES6新增）

join()

把数组转换为字符串，通过给定的字符进行连接，默认是,

let foods = ['红烧肉', '清蒸鱼', '叫花鸡'];
console.log(foods.join()); 
// 输出: "红烧肉,清蒸鱼,叫花鸡" 
console.log(foods.join('')); 
// 输出: "红烧肉清蒸鱼叫花鸡" 
console.log(foods.join('-'));
// 输出: "红烧肉-清蒸鱼-叫花鸡"

push()

把一个或多个元素添加到数组的末尾，并返回新的数组长度

let foods = ['鸡肉', '兔肉'] 
let length = foods.push('鸭肉') 
console.log(length) 
// 输出:3 
console.log(foods) 
// 输出: ['鸡肉','兔肉','鸭肉'] 
foods.push('大雁', '麻雀', '燕子', '布谷') 
console.log(foods) 
// 输出: ['鸡肉','兔肉','鸭肉'，'大雁', '麻雀', '燕子', '布谷']

pop()

从数组中删除最后一个元素，并返回该元素的值。注意：数组的长度会发生改变

let foods = ['鸭鸭','猪猪'] 
let food = foods.pop()
console.log(food) 
// 输出: 猪猪 
console.log(foods) 
// 输出: ['鸭鸭']

shift()

从数组中删除第一个元素，并返回该元素的值。注意：数组的长度会发生改变

let amis = ['鸭鸭','猪猪'] 
let ami = amis.shift() 
console.log(ami) 
// 输出: 鸭鸭 
console.log(amis) 
// 输出: ['猪猪']

unshift()

将一个或者多个元素添加到数组的开头，并返回数组的新长度

let foods = ['清蒸鱼', '红烧鱼'] 
let length = foods.unshift('回锅肉') 
console.log(length) 
// 输出: 3 
console.log(foods) 
// 输出: ['回锅肉','清蒸鱼', '红烧鱼'] 
foods.unshift('锅包肉', '腊肉') 
console.log(foods) 
// 输出: ['锅包肉', '腊肉','回锅肉','清蒸鱼', '红烧鱼']

sort()

对数组的元素进行排序，并返回数组。默认比较的数组元素转为字符串的utf-16的顺序，也可以传入函数进行排序

let numArr = [6, 2, 7, 1, 4, 9] 
console.log(numArr.sort()) 
// 输出: [1,2,4,6,7,9] 
let letterArr = ['e', 'c', 'z', 'd', 'f'] 
console.log(letterArr.sort()) 
// 输出 ['c','d','e','f','z'] 
let personArr = [ 
    { name: 'jack', age: 25 }, 
    { name: 'rose', age: 13 }, 
    { name: 'lucy', age: 20 } 
] 
console.log( 
// a 和 b 就是数组中比较的元素 
personArr.sort((a, b) => { 
// 返回的 小于 0 和等于0 a继续在b之前 
// 返回的 大于 0 a 和 b 的位置会调换 return a.age - b.age 
    }) 
) 
// 按照 年龄 进行升序排列,如果希望倒序，可以调换位置

reverse()

将数组进行翻转，并返回该数组。注意：改变的是原始数组

let foods = ['红烧鱼', '清蒸鱼'] 
foods.reverse() 
console.log(foods) 
// 输出: ['清蒸鱼','红烧鱼']

concat()

用来合并两个或者多个数组，返回的是新数组，不会改变原始数组

let foods = ['红烧鱼', '清蒸鱼'] 
let fruits = ['西瓜', '香蕉'] 
console.log(foods.concat(fruits)) 
// 输出: ['红烧鱼', '清蒸鱼','西瓜','香蕉'] 
let meats = ['牛肉', '猪肉'] 
console.log(foods.concat(fruits, meats)) 
// 输出: ['红烧鱼', '清蒸鱼','西瓜','香蕉','牛肉','猪肉']

slice()

返回一个新的数组对象，值是有传入的起始索引和结束索引决定的

let foods = ['红烧鱼', '清蒸鱼','西瓜','香蕉','牛肉','猪肉'] 
console.log(foods.slice(5)) 
// 输出: ['猪肉'] 
console.log(foods.slice(3,5)) 
// 输出: ['香蕉','牛肉']

splice()

根据给定的起始索引和结束索引删除指定个元素，会改变原数组

let foods = ['红烧鱼', '花菜','西瓜','香蕉','牛肉','猪肉'] 
// 从索引1开始删除1个元素 
foods.splice(1,1) 
console.log(foods) 
// 输出: ['红烧鱼', '西瓜', '香蕉', '牛肉', '猪肉'] 
// 从索引2开始删除，删除所有 
foods.splice(2) 
console.log(foods) 
// 输出: ['红烧鱼', '西瓜']

indexOf()

返回在数组中可以找到的符合条件的第一个索引值，如果不存在，返回-1

let foods =['西瓜','红烧鱼'] 
console.log(foods.indexOf('红烧鱼')) 
// 输出: 1 
console.log(foods.indexOf('清蒸鱼')) 
// 输出: -1

lastIndexOf()

从后往前查找符合条件的元素，符合返回索引，如果不存在，返回-1

let foods =['红烧鱼','西瓜','红烧鱼'] 
console.log(foods.lastIndexOf('红烧鱼')) 
// 输出: 2 
console.log(foods.lastIndexOf('清蒸鱼')) 
// 输出: -1

forEach()

将数组的每一个元素，挨个的传递给传入的回调函数 回调函数会接收三个参数，分别为

  • element
    当前元素。
  • index
    当前元素的索引。
  • array
    调用findIndex的数组。
let foods =['红烧鱼','西瓜','清蒸鱼'] 
foods.forEach(v=>{
    console.log(v) 
    }) 
// 依次输出: 红烧鱼 西瓜 清蒸鱼

map()

返回一个新的数组，新数组的元素，是数组中每个元素调用一个提供的函数后返回的结果 回调函数会接收三个参数，分别为

  • element
    当前元素。
  • index
    当前元素的索引。
  • array
    调用findIndex的数组。
let foods = ['红烧鱼', '西瓜'] 
let newFoods = foods.map(v => {
return v + '好好吃' 
}) 
console.log(foods) 
// 输出: ['红烧鱼', '西瓜'] 
console.log(newFoods) 
// 输出: ['红烧鱼好好吃', '西瓜好好吃']

filter()

返回一个新的数组，新数组的元素是数组中每个元素调用一个提供的函数，根据返回值的真假决定是否保留 回调函数会接收三个参数，分别为

  • element
    当前元素。
  • index
    当前元素的索引。
  • array
    调用findIndex的数组。
let foods = ['红烧鱼', '清蒸鱼', '回锅肉', '锅包肉'] 
console.log( foods.filter(v => {
return v.indexOf('魚') == 0 
}) 
) 
// 输出: ['红烧鱼', '清蒸鱼']

every()

检验数组中的每个值是否都满足回调函数的校验，都满足结果为true，反之为false 回调函数会接收三个参数，分别为

  • element
    当前元素。
  • index
    当前元素的索引。
  • array
    调用findIndex的数组。
let numArr = [2, 5, 6, 7, 8, 9] 
console.log( numArr.every(v => {
    return v > 2 
   }) 
) 
// 输出: false 
console.log( numArr.every(v => {
    return v >= 2 
   }) 
) 
// 输出: true

some()

和every类似，只需要有任意一个元素满足回调函数的校验条件结果就是true，都不满足就是false 回调函数会接收三个参数，分别为

  • element
    当前元素。
  • index
    当前元素的索引。
  • array
    调用findIndex的数组。
let numArr = [2, 5, 6, 7, 8, 9] 
console.log( numArr.some(v => {
    return v == 1 
   }) 
) 
// 输出: false 
console.log( numArr.some(v => {
    return v == 2 
   }) 
) 
// 输出: true

find()

返回满足提供的回调函数校验的第一个元素的值，如果都不满足，返回undefined 回调函数会接收三个参数，分别为

  • element
    当前元素。
  • index
    当前元素的索引。
  • array
    调用findIndex的数组。
let foods = ['红烧鱼', '清蒸鱼', '回锅肉', '佛跳墙'] 
console.log( foods.find(v => {
    return v.indexOf('佛') != -1 
   }) 
) 
// 输出: 佛跳墙 
console.log( foods.find(v => {
    return v.indexOf('西瓜') != -1 
   }) 
) 
// 输出: undefined

findIndex()

返回数组中满足提供的回调函数校验的第一个元素的索引，否则返回-1 回调函数会接收三个参数，分别为

  • element
    当前元素。
  • index
    当前元素的索引。
  • array
    调用findIndex的数组。
let foods = [ 
{ name: '白菜', color: '绿' },
{ name: '辣椒', color: '红' },
{ name: '萝卜', color: '白' } 
] 
console.log( 
  foods.findIndex(v => {
    return v.color == '白' 
  })
) 
// 输出: 2 
console.log( 
  foods.findIndex(v => {
    return v.color == '黄' 
  }) 
) 
// 输出: -1

includes()

返回数组中是否存在指定的值，如果存在返回true，否则返回false

let foods = ['红烧鱼', '西瓜', '清蒸鱼', '剁椒鱼头'] 
console.log(foods.includes('西瓜')) 
// 输出: true 
console.log(foods.includes('回锅肉')) 
// 输出: false

结尾

这些是平常比较常用的js数组方法，如果还有一些没提到的欢迎补充🥰😘
希望能帮到学习js数组的小伙伴们

avatar
文章
阅读
粉丝