Vue必备知识-数组常用方法

数组常用方法

方法是否改变原数组
改变

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

不改变

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

查找元素和索引

indexOf(查找索引)

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

lastIndexOf(查找索引)

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

find(查找元素)

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

findIndex(查找索引)

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

遍历

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(删除指定区间元素)

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)

常见问题

置空

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);