原文连接：https://juejin.cn/post/6984823298685304863?utm_source=gold_browser_extension

方法是否改变原数组

改变

• pop
• push
• shift
• unshift
• reverse
• splice
• fill
• sort
• copyWithin

不改变

• forEach
• filter
• map
• some
• every
• find
• reduce
• entries
• concat
• slice
• flat

查找元素和索引

indexOf(查找索引)

// 找出第一个符合条件的数组成员的位置,找不到则返回-1
arr.indexOf(10)
复制代码

lastIndexOf(查找索引)

// 找出最后一个符合条件的数组成员的位置,找不到则返回-1
arr.lastIndexOf(10)
复制代码

find(查找元素)

// 找出第一个符合条件的数组成员,找不到则返回undefined
arr.find((val, i) => {
  return val === 10
})
复制代码

findLast(查找元素)

// 从后往前找出第一个符合条件的数组成员,找不到则返回undefined
arr.findLast((val, i) => {
  return val === 10
})
复制代码

findIndex(查找索引)

// 找出第一个符合条件的数组成员的索引,找不到则返回-1
arr.findIndex((val, i) => {
  return val === 10
})
复制代码

findLastIndex(查找索引)

// 从后往前找出第一个符合条件的数组成员的索引,找不到则返回-1
arr.findLastIndex((val, i) => {
  return val === 10
})
复制代码

at(获取索引值)

// 接受负索引,-1表示最后一个元素,-2表示倒数第二个元素,超出索引则返回undefined
arr.at(-1)
复制代码

遍历

forEach(遍历)

arr.forEach((val, i) => {
  // TODO
})
复制代码

filter(过滤)

let newArr = arr.filter((val, i) => {
  // 返回所有大于40的元素给新数组
  return val > 40;
})
复制代码

map(修改所有元素)

// 修改所有元素,返回新数组
let newArr = arr.map((val, i) => {
  return val + 1
});
复制代码

some(验证所有元素)

// 检测数组中是否有元素大于10,有一个满足条件则返回true
let flag = arr.some((val, i) => {
    return val > 10
})
复制代码

every(验证所有元素)

// 每个元素值都大于200则返回true
let flag = arr.every((val, i) => {
  return val > 200;
})
复制代码

插入与弹出

pop(弹出最后一个)

let res = arr.pop(); // 弹出数组的最后一个元素,返回该元素
复制代码

push(向末尾插入)

let rest = arr.push(值); // 向数组的最后一个位置插入元素,返回插入后的长度
复制代码

shift(弹出第一个)

let res = arr.shift(); // 弹出数组的第一个元素,返回该元素
复制代码

unshift(向开头插入)

let res = arr.unshift(值); // 向数组的第一个位置插入元素,返回插入后的长度
复制代码

其他常用方法

isArray(判断是否为数组)

Array.isArray(xxx)
复制代码

includes(是否包含该元素)

// 检测数组中是否存在值为3的元素,有则返回true
let flag = arr.includes(3)
复制代码

hasOwnProperty(指定索引是否有值)

// 判断数组中是否存在索引为index的值
arr.hasOwnProperty(index)
复制代码

concat(合并多个数组)

// [...[1, 2, 3], ...[4, 5], 6, ...[7, 8]]
let arr1 = [1, 2, 3].concat([4, 5], 6, [7, 8])  // [1, 2, 3, 4, 5, 6, 7, 8]
复制代码

join(合并所有元素)

// 用|合并数组中的所有元素,返回字符串
let str = arr.join('|')
复制代码

reverse(反转)

arr.reverse()
复制代码

slice(截取指定区间元素)

let newArr = arr.slice(3,6) // 截取3~5的元素,原数组不变
复制代码

splice(删除指定区间元素并插入元素)

// arr: [0, 1, 2, 3, 4, 5, 6, 7] -> [0, 1, 2, 7]
arr.splice(3,4) // 删除数组中从3开始的后4个元素
// let newArr = arr.splice(3, 4, 3); // newArr:[3, 4, 5, 6], arr:[0, 1, 2, 3, 7]
arr.splice(开始位置,要删除的个数,插入的元素) // 开始位置元素后删除指定个数后插入元素
复制代码

fill(批量填充)

// 批量初始化数组
let arr = Array(5).fill("");  // ["", "", "", "", ""]
/*
  参数一: 填充值
  参数二: 开始填充位置(不写默认是全部填充)
  参数三: 结束填充位置-1(不写表示填充到末尾)
*/
arr.fill(0, 2, 4)
复制代码

sort(排序)

// 按照数字正序排序
arr.sort((a, b) => a - b)
// 按照数字反序排序
arr.sort((a, b) => b - a)
// 按照对象属性排序
arr.sort((a, b) => a.xxx - b.xxx)
复制代码

flat(降维)

数组降维,并会去除数组中的空项

let arr1 = [1, 2, , [3, 4]]
// 降维1次: [1, 2, 3, 4]
arr1.flat()
let arr2 = [1, 2, [3, 4, [5, 6]]]
// 降维2次: [1, 2, 3, 4, 5, 6]
arr2.flat()
// 降维n次: 展开任意深度的嵌套数组
arr3.flat(infinity)
复制代码

reduce

const arr = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue

// accumulator: 每一次的return结果,初始值为数组的第一个元素
// currentValue: 初始值为数组的第二个元素
arr.reduce(reducer)
// accumulator: 每一次的return结果,初始值为5
// currentValue: 初始值为数组的第一个元素
arr.reduce(reducer, 5)
复制代码

常见问题

置空

let arr = [1, 2, 3];
a = [];  // 方法1
arr.length = 0;  // 方法2
a.splice(0, a.length);  // 方法3
复制代码

求和

let nums = [1, 5, 2, 6];
// 从左到右的累加
let sum = nums.reduce((accumulator, curValue) => accumulator + curValue);
// 从右到左的累加
let sum = nums.reduceRight((accumulator, curValue) => accumulator + curValue);
复制代码

删除重复项

let fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];
// 若数组中的元素为引用类型,则只能通过方法3解决(或者自己写个方法)
// 方法1
let uniqueFruits = Array.from(new Set(fruits));
// 方法2
let uniqueFruits = [...new Set(fruits)];
// 方法3(使用lodash方法)
let uniqueFruits = _.uniqWith(fruits, _.isEqual);
复制代码

过滤所有虚值

const arr = [1, undefined, NaN, 2, null, 'enicmarko', true, 3, false]
const newArr = arr.filter(Boolean) // [1, 2, 'enicmarko', true, 3]
复制代码

计算每个元素出现的次数

const arr = [1, 2, 2, 3, 3, 3, 3, 2, 3, 4];

const reducer = (accumulator, currentValue) => {
  if (accumulator[currentValue]) {
    accumulator[currentValue]++
  } else {
    accumulator[currentValue] = 1
  }
  return accumulator
}
arr.reduce(reducer, {})
复制代码

退出循环

参考: segmentfault.com/a/119000002…

分类：

前端

标签：

JavaScript