美文网首页
数组常用方法

数组常用方法

作者: 江湖小盛 | 来源:发表于2021-11-28 22:13 被阅读0次
  • Array.map()
    将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组
let arr = [1, 2, 3];
let newArr = arr.map((item, index) => {
    return item * 3
});
// newArr = [3, 6, 9]
  • Array.forEach()
    将数组中的每个元素执行传进提供的函数,方法执行没有返回值,不影响原数组
function resultFn(array, ...res) {
  res.forEach((item, index) => {
    array[index] = item
  })
}
let result = [];
resultFn(result, 1, 2, 3);
// console.log(result) [1, 2, 3]
  • Array.filter()
    将所有元素进行判断,将满足条件的元素作为一个新的数组返回
let arr = [1, 2, 3, 4, 5];
let result = arr.filter((item, index) => {
    return item > 2
});
// console.log(result) [3, 4, 5]

let arr = [1, 2, 3, 2, 3, 4];
let result = arr.filter((el, index, arr) => {
    return arr.indexOf(el) === index
});
// console.log(arr) [1, 2, 3, 4]; 数组去重
  • Array.every()
    将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为false
let arr = [1, 2, 3, 2, 3, 4];
let result = arr.every((item, index, arr) => {
    return item < 6
});
// console.log(result) true
  • Array.some()
    a) 将所有元素进行判断返回一个布尔值,如果有一个元素满足条件,则表达式返回true 剩余的元素不会再执行检测
    b) 若所有元素都不满足判断条件,则返回false
let arr = [1, 2, 3, 2, 3, 4];
let result = arr.some((item) => {
    return item > 2
});
// console.log(result)  true
  • Array.reduce()
    接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
    1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
    2、currentValue (数组中当前被处理的元素)
    3、index (当前元素在数组中的索引)
    4、array (调用 reduce 的数组)
    5、 initialValue (作为第一次调用 callback 的第一个参数。)
let arr = [1, 2, 3, 4];
let result = arr.reduce((prev, cur, index, arr) => {
    return prev + cur;
}, 0)
// console.log(result)  10, 数组求和

const timeArr = [
  {
    label: '分钟',
    value: 'minute'
  },
  {
    label: '小时',
    value: 'hour'
  },
  {
    label: '天',
    value: 'day'
  }
]
const timeArrMap = timeArr.reduce((acc, cur) => {
  acc[cur.label] = cur.value
  return acc
}, {})

const dataForm = ref({
  max: '200',
  unit: '天'
})

const timeName = computed(() => {
  const value = dataForm.value.max
  return value + timeArrMap[dataForm.value.unit]
})

setTimeout(() => {
  dataForm.value.maxitime = 100
  dataForm.value.unit = '小时'
}, 3000)
  • Array.find()
    a) 返回通过测试(函数内判断)的数组的第一个元素的值
    b) 数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数
    c) 如果没有符合条件的元素返回 undefined
let arr = [1, 3, 5, 7, 9];
let result = arr.find((item)  => {
    return item > 7
});
// console.log(result) 9
  • Array.findIndex()
    a) 返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
    b) 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
    c) 如果没有符合条件的元素返回 -1
let arr = [1, 2, 3, 4, 5];
let result = arr.findIndex((item)  => {
    return item > 4
});
console.log(result) // 4
  • Array.includes()
    a) 判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
if (type === 1 || type === 2 || type || 3) {
  // code
}
// 用include简写
if ([1, 2, 3].includes(type)) {
  // code
}

其他基础常用方法

  • Array.shift()
    a) 删除数组第一位元素,返回删除的值
    b) 会改变原数组
let arr = ['vue', 'css', 'js']
arr.shift() // vue
console.log(arr) // ['css', 'js']
  • Array.unshift()
    a) 添加数组第一位元素,返回新增后的数组长度
    b) 会改变原数组
let arr = ['vue', 'css', 'js']
arr.unshift('react') // 4
console.log(arr) // ['vue', 'css', 'js', 'react']
  • Array.pop()
    a) 删除数组最后一位元素,返回删除的值
    b) 会改变原数组
let arr = ['vue', 'css', 'js']
arr.pop() // js
console.log(arr) //  ['vue', 'css']
  • Array.push()
    a) 给数组末尾添加元素,返回新增后的数组长度
    b) 会改变原数组
let arr = ['vue', 'css', 'js']
arr.push('react', 'anglar') // 5
  • Array.concat()
数组拼接 arr1.concat(arr2)
  • Array.reverse()
反转数组
  • Array.tostring()
数组转换成字符串
  • Array.join()
    a) 方法将数组作为字符串返回
    b) 元素将由指定的分隔符分隔。默认分隔符是逗号 (,)
let arr = ['vue', 'css', 'js']
arr.join() // "vue,css,js"
  • Array.slice()
    a) 选择数组的一部分,并返回新数组(截取数组)
    b) slice(start, end) 左闭右开区间
let arr = ['vue', 'css', 'js']
arr.slice(1, 2) // ["css"]
  • Array.splice()
    a) 从数组中添加、替换、删除
// 添加
let arr = ['vue', 'css', 'js']
arr.splice(2, 0,'react', 'anglar') //从下标为2处,删除0个元素,新增2个元素
console.log(arr) // ["vue", "css", "react", "anglar", "js"]

// 替换
let arr = ['vue', 'css', 'js']
arr.splice(1, 1, 'hellow world') // 从下标为1处,替换1个元素
console.log(arr) // ["vue", "hellow world", "js"]

// 删除
let arr = ['vue', 'css', 'js']
arr.splice(1, 1) // 从下标为1处,删除1个元素
console.log(arrr) // ["vue", "js"]
  • Array.sort(callback)
    a)sort排序: 正序和倒序,有返回值,a-b正序,b-a倒序
arr1.sort((a, b) =>{
 return a - b
})

相关文章

网友评论

      本文标题:数组常用方法

      本文链接:https://www.haomeiwen.com/subject/uuyhxrtx.html