数组方法合集

数组

创建

// 字面量创建
var arr1 = []
var arr2 = [1, 2, 3]
/**
 * 构造函数创建
 * 一个值表示数组长度
 * 多个值表示数组的元素
 */
var arr3 = new Array(6)
console.log(arr3.length) //6
var arr4 = new Array(2, 3, 5)
console.log(arr4) //[ 2, 3, 5 ]
/**
 * 数组中元素的类型
 * 可以存放任意类型的元素
 * 可以存放数组
 */
var arr5 = [123, 'hello', false, undefined, null, NaN, Infinity]
var arr6 = [
  [1, 3, 5],
  [2, 4, 6],
]

基本操作

/**
 * 数组的基本操作
 */
var arr = []
// 添加
arr[0] = 12
arr[1] = 6
// 获取元素
console.log(arr[1]) //6
// 获取元素长度
console.log(arr.length) //2
// 修改数组长度
arr.length = 5
console.log(JSON.stringify(arr)) //[12,6,null,null,null]
/**
 * 遍历数组
 */
// 数组翻转
let arr1 = [4, 6, 5, 2, 3, 1]
let newArr = []
for (let i = 0; i < arr1.length; i++) {
  newArr[i] = arr1[arr1.length - i - 1]
}
console.log(newArr) //[ 1, 3, 2, 5, 6, 4 ]
// 冒泡排序
function bubbleSort(array) {
  if (array.length < 2) return array
  for (var i = 0; i < array.length; i++) {
    for (var j = 0; j < array.length - i - 1; j++) {
      if (array[j] > array[j + 1]) {
        var temp = array[j]
        array[j] = array[j + 1]
        array[j + 1] = temp
      }
    }
  }
  return array
}
console.log(bubbleSort(arr1)) //[ 1, 2, 3, 4, 5, 6 ]

数组方法

类型相关

isArray()

/**
 * 布尔值 = Array.isArray(被检测数组)
 * 用来判断是否是数组
 */
var arr = [1, 2, 3]
var str = 'hello world'
console.log(Array.isArray(arr)) //true
console.log(Array.isArray(str)) //false

toString()

/**
 * 字符串 = 数组.toString()
 * 数组转为字符串
 */
var arr = [1, 2, 3]
console.log(arr.toString()) //1,2,3
// 除此以外，数组转为字符串的方法
console.log(String(arr)) //1,2,3
console.log(arr.join(',')) //1,2,3

Array.from()

/**
 * array = Array.from(arrayLike)
 * 将伪数组转化为字符串
 * 伪数组:包含length属性的对象或可迭代的对象
 * 伪数组没有Aray.propotype属性，不能用数组的一般方法
 */
var str = 'hello'
console.log(Array.from(str)) //[ 'h', 'e', 'l', 'l', 'o' ]

Array.of()

/**
 * Array.of(value1,value2,value3)
 * 创建数组
 * new Array() 和 Array.of() 的区别:当参数只有一个时，前者表示数组的长度，后者表示数组中的内容
 */
console.log(Array.of('hello', 'world', 'jerry')) //[ 'hello', 'world', 'jerry' ]

数组元素的添加和删除

push()、pop()

/**
 * push() -- 向数组元素的最后添加一个元素，返回添加后数组的长度
 * pop() -- 删除数组中最后一个元素，返回被删除的元素
 * 改变原数组
 */
var arr = [1, 2, 3]
console.log(arr.push(6)) //4-arr.length
console.log(arr.pop()) //6

unshift()、shift()

/**
 * unshift() -- 向数组元素的前面插入一个或多个元素，返回添加后数组的长度
 * shift() -- 删除数组中第一个元素，返回被删除的元素
 * 改变原数组
 */
var arr = [1, 2, 3]
console.log(arr.unshift(6)) //4-arr.length
console.log(arr.shift()) //6

slice()

/**
 * slice(开始位置，结束位置)
 * 从数组中提取一个或多个元素，返回新数组
 * 不改变原数组
 */
var arr = [6, 4, 5, 3, 2, 7, 8, 1]
console.log(arr.slice()) //[6, 4, 5, 3, 2, 7, 8, 1]
console.log(arr.slice(5)) //[ 7, 8, 1 ]
console.log(arr.slice(-5)) //[ 3, 2, 7, 8, 1 ]
console.log(arr.slice(2, 5)) //[ 5, 3, 2 ]
console.log(arr.slice(5, 2)) //[]
console.log(arr.slice(2, -2)) //[ 5, 3, 2, 7 ]
/**
 * slice()还可以用来将伪数组转化为数组
 * ES6后来提供Array.from()来进行数组的转换
 */
var str = 'hello'
console.log(Array.prototype.slice.call(str)) //[ 'h', 'e', 'l', 'l', 'o' ]
console.log([].slice.call(str)) //[ 'h', 'e', 'l', 'l', 'o' ]
console.log(Array.from(str)) //[ 'h', 'e', 'l', 'l', 'o' ]

splice()

/**
 * newArr = arr.splice(起始索引，需要删除的个数)
 * newArr = arr.splice(起始索引，需要删除的个数，新元素1，新元素2)
 * 返回被删除元素组成的新数组
 * 会改变原来数组
 */
var arr = [6, 4, 5, 3, 2, 7, 8, 1]
// arr.splice(5)
// console.log(arr) //[ 6, 4, 5, 3, 2 ]
// arr.splice(-5)
// console.log(arr) //[ 6, 4, 5 ]
arr.splice(1, 3)
console.log(arr) //
// arr.splice(1, 2, 'hello', 'vue')
// console.log(arr) //[ 6, 'hello', 'vue', 3, 2, 7, 8, 1 ]

fill()

/**
 * fill() -- 用一个固定值填充数组，返回为新数组,不会改变原数组
 * newArr = arr.fill(固定值)
 * newArr = arr.fill(固定值,startIndex)
 * newArr = arr.fill(固定值,startIndex,endIndex)
 */
var arr = [1, 3, 5, 6, 4]
console.log(Array(4).fill('f')) //[ 'f', 'f', 'f', 'f' ]
console.log(arr.fill('v', 3)) //[ 1, 3, 5, 'v', 'v' ]
console.log(arr.fill('m', 2, 4)) //[ 1, 3, 'm', 'm', 'v' ]

数组的合并和拆分

concat()

/**
 * newArr = arr1.concat(arr2,arr3...)
 * 数组合并
 * 返回新数组，不改变原有数组
 */
var arr1 = [1, 3]
var arr2 = [false, NaN]
var arr3 = ['hello', undefined]
console.log(arr1.concat(arr2, arr3)) //[ 1, 3, false, NaN, 'hello', undefined ]
// 数组合并的另一种方式 -- 展示运算符...
console.log([...arr1, ...arr2, ...arr3]) //[ 1, 3, false, NaN, 'hello', undefined ]

join()、split()(为字符串方法)

/**
 * join() -- 将数组转化为字符串
 * split() -- 为字符串方法，将字符串转换为数组
 */
var arr = [1, 2, 3, 4, 5]
console.log(arr.join()) //1,2,3,4,5
console.log(arr.join('-')) //1-2-3-4-5
var str = 'love,and,peace'
console.log(str.split(',')) //[ 'love', 'and', 'peace' ]

数组排序

reverse()、sort()

/**
 * reverse() -- 数组翻转
 * sort() -- 数组排序，默认从小到大
 */
var arr = [3, 2, 4, 1, 5]
console.log(arr.reverse()) //[ 5, 1, 4, 2, 3 ]
// 无参数
console.log(arr.sort()) //[ 1, 2, 3, 4, 5 ]
// 带参数
var result1 = arr.sort(function (a, b) {
  if (a > b) {
    return -1
  } else if (a < b) {
    return 1
  } else {
    return 0
  }
})
console.log(result1) //[ 5, 4, 3, 2, 1 ]
// 带参数 -- 冒泡排序
var result2 = arr.sort(function (a, b) {
  return b - a
})
console.log(result2) //[ 5, 4, 3, 2, 1 ]
// 带参数 -- 箭头函数
var result3 = arr.sort((a, b) => {
  return b - a
})
console.log(result3) //[ 5, 4, 3, 2, 1 ]
// 推荐
var result4 = arr.sort((a, b) => b - a)
console.log(result4) //[ 5, 4, 3, 2, 1 ]
/**
 * 应用
 * 给一个对象数组排序，通过其中的某个参数
 */
var arrTest = [
  {
    lesson: 'Chinese',
    price: 234,
  },
  {
    lesson: 'Math',
    price: 137,
  },
  {
    lesson: 'English',
    price: 221,
  },
]
var result5 = arrTest.sort((a, b) => a.price - b.price)
console.log(result5) //price正序排列

查找数组的方法

indexOf()、lastIndexOf()

/**
 * indexOf() -- 检索中严格类型约束（等同于 ===）
 * sort() -- 数组排序，默认从小到大
 */
var arr = ['h', 'e', 'l', 'l', 'o', 'e']
console.log(arr.indexOf('e')) //1
console.log(arr.lastIndexOf('e')) //5

includes()

/**
 * 布尔值 = arr.includes(想要查找的元素,positon)
 */
var arr = [1, 2, 3, 4, 5]
console.log(arr.includes(3)) //true
console.log(arr.includes(3, 4)) //false

find()、findIndex()

/**
 * find((item,index,arr) => {
 *   return true
 * })
 * 找出第一个满足条件的元素，否则返回undefined
 * findIndex(),同find(),找出第一个满足条件的下标
 */
var arr = [2, 3, 5, 7, 6, 4]
let result = arr.find((item, index) => {
  return item > 4
})
console.log(result) //5
let result1 = arr.findIndex((item, index) => {
  return item > 6
})
console.log(result1) //3

every()、some()

/**
 * every()
 * 每一项进行回调，都true则返回true，否则返回false
 * some()
 * 每一项进行回调，有一个为true则返回true，否则为false
 */
var arr = [4, 5, 6, 7, 8]
var result = arr.every((item, index) => {
  return item > 6
})
console.log(result) //false

var result1 = arr.some((item, index) => {
  return item > 6
})
console.log(result1) //true

遍历数组

for 循环

/**
 * for循环
 */
var names = ['alice', 'lily', 'jerry']
for (var i = 0; i < names.length; i++) {
  console.log(names[i]) //alice lily jerry
}

forEach()

/**
 * forEach() -- 无返回值
 * 数组的元素是基本类型时，无法修改原数组
 * 数组的元素为复合类型，不能修改元素，但可以修改元素的某个属性
 * 【注】如果纯粹遍历数组，用forEach；如果遍历的时候想对元素进行操作，最好用map()方法
 */
var arr = [1, 2, 3]
arr.forEach((item, index, arr) => {
  arr[index] = arr[index] * 2
})
console.log(arr) // [2, 4, 6]

var obj = [
  { id: 1, name: 'falcon' },
  { id: 2, name: 'alice' },
]
obj.forEach((item, index, arr) => {
  arr[index] = {
    id: index,
    name: '张三',
  }
})
console.log(obj) //{id: 0, name: "张三"} {id: 1, name: "张三"}

obj.forEach((item, index, arr) => {
  arr[index].id = 6
})
console.log(obj) //{id: 6, name: "张三"} {id: 6, name: "张三"}

map()

/**
 * map()
 * 对数组的每一项运行回调，返回该函数结果，组成新数组
 * map()方法如果修改整个item值，不会改变原数组，如果修改item某个属性，会改变原数组
 */
var arr = [1, 2, 3]
var result1 = arr.map((item, index) => {
  return item + 10
})
console.log(result1) //[11, 12, 13]
console.log(arr) //[1, 2, 3]

var obj = [
  {
    id: 1,
    name: 'falcon',
  },
  {
    id: 2,
    name: 'alice',
  },
]
var result2 = obj.map((item, index) => {
  return (item.name = 'jerry')
})
console.log(result2) //['jerry','jerry']
console.log(obj) //{id: 1, name: "jerry"} 1: {id: 2, name: "jerry"}

// map - 开发中的用途，将A数组中的某个值存储到B数组
var arr1 = [
  {
    id: 1,
    sort: 1,
    name: 'alice',
    age: 21,
    lesson: 'Chinese',
  },
  {
    id: 2,
    sort: 2,
    name: 'lily',
    age: 22,
    lesson: 'Math',
  },
  {
    id: 3,
    sort: 3,
    name: 'falcon',
    age: 19,
    lesson: 'English',
  },
]

var arr2 = arr1.map((item) => item.sort)

var arr3 = arr1.map((item) => ({
  myName: item.name,
  myAge: item.age,
  myLesson: item.lesson,
}))

console.log(arr1)
console.log(arr2)
console.log(arr3)

filter()

/**
 * 对数组中的每一项运行回调，返回为true的组成新数组
 * 对数组进行过滤
 */
var arr = [1, 2, 3, 4, 5, 6]
let result = arr.filter((item) => {
  return item % 2 === 0
})
console.log(result) //[2, 4, 6]

reduce()

/**
 * reduce()
 * 函数累加器,从左到右开始缩减，返回累计处理的结果
 */
// 应用1 -- 数组求和
var arr = [1, 2, 3, 4, 5, 6]
let result = arr.reduce((prev, current) => {
  return prev + current
})
console.log(result) //21
// 应用2 - 统计某个元素出现的次数
function repeatCount(arr, value) {
  if (!arr || arr.length == 0) return 0
  return arr.reduce((totalCount, item) => {
    totalCount += item == value ? 1 : 0
    return totalCount
  }, 0)
}
let arr1 = [1, 2, 6, 5, 6, 1, 6]
console.log(repeatCount(arr1, 6)) //3
// 应用3 - 求元素最大值
var arr2 = [2, 3, 5, 7, 6, 2, 3]
const maxValue = arr2.reduce((prev, item) => {
  return prev > item ? prev : item
})
console.log(maxValue) //7
// 应用4 - 多维数组排序组成一维数组
l3 = [
  [1, 3, 5],
  [2, -1, 4],
  [3, 7, 9],
]
var result = l3.reduce((a, b) => a.concat(b), []).sort((a, b) => a - b)
console.log(result)

应用

清空数组

/**
 * 清空数组的方法
 */
var arr = [3, 5, 7, 1, 2, 4, 6]
// arr.splice(0)
// arr.length = 0
arr = [] //推荐
console.log(arr)

join 练习

/**
 * 将数组分割成以 | 联系的字符串
 */
var nav = ['登录', '主页', '列表', '详情']
console.log(nav.join('|')) //登录|主页|列表|详情

数组翻转

/**
 * 数组翻转
 * 元素第i个和第length-i-1交换
 * reverse()
 */
var arr = [1, 2, 3, 4, 5]
function reverse1(array) {
  var newArr = []
  for (var i = array.length - 1; i >= 0; i--) {
    newArr[newArr.length] = array[i]
  }
  return newArr
}
console.log(reverse1(arr))

function reverse2(array) {
  for (var i = 0; i < array.length / 2; i++) {
    var temp = array[i]
    array[i] = array[array.length - i - 1]
    arr[array.length - i - 1] = temp
  }
  return array
}
console.log(reverse2(arr))

var result = arr.reverse()
console.log(result)

查询数组中每个元素出现的次数

/**
 * ["c","a","z","a","x","a"]
 * 找出数组中每个元素出现的次数，并输出
 */
var arr = ['c', 'a', 'z', 'a', 'x', 'a']
function findNum(arr) {
  var json = {}
  for (var i = 0; i < arr.length; i++) {
    var key = arr[i]
    if (json[key] === undefined) {
      json[key] = 1
    } else {
      json[key] += 1
    }
  }
  return json
}
console.log(findNum(arr))

数组去重

/**
 * js数组去重
 */
var arr = [1, 2, 2, 3, 4, 4, 4, 5, 6, 6]
// ES6 set方法
var result1 = [...new Set(arr)]
var result2 = Array.from(new Set(arr))
console.log(result1) //[ 1, 2, 3, 4, 5, 6 ]
console.log(result2)

// splice()去重
function spliceFun(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        arr.splice(j, 1)
        j--
      }
    }
  }
  return arr
}
console.log(spliceFun(arr))

// indexOf()去重
function indexOfFun(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  var array = []

  for (var i = 0; i < arr.length; i++) {
    if (array.indexOf(arr[i]) === -1) {
      array.push(arr[i])
    }
  }

  return array
}
console.log(indexOfFun(arr))

// 利用sort去重
function sortFun(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  arr = arr.sort()
  let array = []

  for (var i = 0; i < arr.length; i++) {
    if (arr[i] !== arr[i - 1]) {
      array.push(arr[i])
    }
  }

  return array
}
console.log(sortFun(arr))

// includes()去重
function includesFun(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  let array = []

  for (var i = 0; i < arr.length; i++) {
    if (!array.includes(arr[i])) {
      array.push(arr[i])
    }
  }

  return array
}

console.log(includesFun(arr))

// filter()去重(利用indexOf总是返回第一个元素的下标)
function filterFun(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  return arr.filter((item, index, arr) => arr.indexOf(item) === index)
}
console.log(filterFun(arr))

//原例 - 利用map进行数组去重
function mapFun(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  var map = new Map()
  var array = new Array()

  for (var i = 0; i < arr.length; i++) {
    if (map.has(arr[i])) {
      map.set(arr[i], true)
    } else {
      map.set(arr[i], false)
      array.push(arr[i])
    }
  }

  return array
}

console.log(mapFun(arr))

// 引例1 - 找出数组中重复的数
function mapRepeat(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  let map = new Map()
  let array = new Array()

  for (var i = 0; i < arr.length; i++) {
    map.set(arr[i], map.has(arr[i]))
  }

  for (let [key, value] of map.entries()) {
    if (value == true) {
      array.push(key)
    }
  }

  return array
}

console.log(mapRepeat(arr))

// // 引例2 - 找出数组中第一个非重复的数
function firstNoRepeat(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  let map = new Map()

  for (var i = 0; i < arr.length; i++) {
    map.set(arr[i], map.has(arr[i]))
  }

  for (let [key, value] of map.entries()) {
    if (value === true) {
      return key
    }
  }
  return '全部重复'
}
console.log(firstNoRepeat(arr))

// 原例 - 利用reduce+includes去重
function mixRepeat(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  return arr.reduce(
    (prev, curr) => (prev.includes(curr) ? prev : [...prev, curr]),
    []
  )
}
console.log(mixRepeat(arr))
// // 引例 - 实现数组对象的去重
var arrObj = [
  { value: '苹果', id: 1 },
  { value: '香蕉', id: 2 },
  { value: '苹果', id: 3 },
]
var hash = {}
arrObj = arrObj.reduce((item, next) => {
  hash[next.value] ? '' : (hash[next.value] = true && item.push(next))
  return item
}, [])
console.log(arrObj)

// js对引用类型进行去重
var arr1 = [
  1,
  1,
  'true',
  'true',
  true,
  true,
  15,
  15,
  false,
  false,
  undefined,
  undefined,
  null,
  null,
  NaN,
  NaN,
  'NaN',
  0,
  0,
  'a',
  'a',
  {},
  {},
  { a: 1 },
  { b: 1 },
  { a: 1 },
]

function referRepeat(arr) {
  if (!Array.isArray(arr)) {
    return
  }

  let newArr = []
  let newObj = {}
  arr.forEach((item) => {
    if (typeof item !== 'object') {
      // NaN是唯一一个不等与自身的类型
      if (item !== item) {
        if (!newObj[item.toString()]) {
          newArr.push(item)
          newObj[item.toString()] = true
        }
      } else {
        if (newArr.indexOf(item) === -1) {
          newArr.push(item)
        }
      }
    } else {
      let str = JSON.stringify(item)
      if (!newObj[str]) {
        newArr.push(item)
        newObj[str] = true
      }
    }
  })
  return newArr
}

console.log(referRepeat(arr1))

以上内容借鉴自千古壹号自学前端网站