前言

大家好，今天来学习一下JavaScript中比较常用的一些数组方法。

forEach() 方法

该方法用于遍历数组中的每一个元素。这是一种循环数组元素的便捷方法，可代替传统的for或while循环。

示例：

const users = [1，2，3，4，5];

users.forEach((num) => {
  console.log(num);
})

输出：

1 2 3 4 5

map() 方法

该方法可以通过遍历在回调函数中返回一个特定值，得到一个特定值的新数组。

示例：

// 用户列表
const users = [
  {
    name: '蔡徐坤',
    age: 18
  },
  {
    name: '小黑子',
    age: 30
  }
];

const names = users.map((user) =>{
    return user.name;
})
console.log(names);

输出： ['蔡徐坤', '小黑子']

在这个例子中，我们得到了由users数组中的name属性组成的新数组。

filter() 方法

在此方法的回调方法中，如果返回条件为true，则数组的值作为新数组返回。

示例：

const users = [
  {
    name: '蔡徐坤',
    age: 18
  },
  {
    name: '小黑子',
    age: 30
  },
  {
    name: 'ikun',
    age: 16
  }
];
// 查找成年人
let adults = users.filter((user) =>{
    return user.age >= 18;
});
console.log(adults);

输出：

[ { name: '蔡徐坤', age: 18 }, { name: '小黑子', age: 30 } ]

在该示例中，filter()方法返回数组中age >= 18的对象。

reduce()方法

该方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。 回调函数有4个参数：累加值、当前值、当前索引和数组本身。

示例： 计算商品总结

const order = [
  { name: '可乐', price: 3 },
  { name: '薯条', price: 2 }
];
// 计算总价
const totalPrice = order.reduce((total, goods) =>{
    return total + goods.price;
}, 0);
console.log(totalPrice);

输出：5

注意：如果我们不提供reduce()方法的第二个参数，则total第一次遍历的值为order[0]。

sort() 方法

该方法可对数组元素进行排序。

例子：

// 对英文字母排序，先大写，后小写。
const letters = ["acc", "mcc", "Acc", "Scc", "Rcc", "Rbb"];
letters.sort();
console.log(letters);  // ['Acc', 'Rbb', 'Rcc', 'Scc', 'acc', 'mcc']

// 对数字排序
const nums = [6,1,3,2,88,9,8];

// 升序
nums.sort((a, b) => {
  return a - b
});
console.log(nums);  // [1, 2, 3, 6, 8, 9, 88]

// 降序
nums.sort((a, b) => {
  return b - a
});
console.log(nums);  // [88, 9, 8, 6, 3, 2, 1]

find() 方法

该方法返回数组中条件为true的第一个索引值。

例子：

const users = [
  { name: 'vilan', age: 18 },
  { name: 'ikun', age: 12 },
  { name: 'ikun', age: 15 },
];

const ikun = users.find((user) => {
    return user.name === 'ikun';
})
console.log(ikun);

输出：{name: 'ikun', age: 12}

every() 方法

如果每个数组元素都通过条件返回 true，则方法本身返回 true；如果任一条件为 false，方法本身返回 false。

例子：

const numbers = [1,2,3,4,5];

const checkNumber = numbers.every((num) =>{
    return num > 0;
})
console.log(checkNumber);  // true

const checkNumber2 = numbers.every((num) =>{
    return num > 1;
})
console.log(checkNumber2); // false

输出：true、false

some() 方法

该方法只需数组中有一项满足条件，则该方法的返回结果就为true；如果所有项都不满足条件，则该方法返回false.

例子：

const numbers = [1,2,3,4,5];

const checkNumber = numbers.some((num) =>{
    return num >= 5;
})
console.log(checkNumber);  // true

const checkNumber2 = numbers.some((num) =>{
    return num > 5;
})
console.log(checkNumber2); // false

输出：true、false

fill() 方法

该方法可对数组元素进行填充。

array.fill(填充值, 开始索引, 结束索引)

例子：

const numbers = [1,2,3,4,5];

// 索引[1, 3), 使用0进行填充
numbers.fill(0, 1, 3);
console.log(numbers);  // [1, 0, 0, 4, 5]

const numbers2 = new Array(5).fill(6);
console.log(numFive);  // [6,6,6,6,6]

输出： [1, 0, 0, 4, 5] 、[6,6,6,6,6]

splice() 方法

结构 array.splice(start index, delete, insert) 它修改当前数组，它可以在数组中插入新元素，也可以从数组中删除元素。当我们删除元素时，它返回删除的元素数组。

例子：

const numbers = [1,2,3,4,5];

// 删除索引为1的值
const delNumbers = numbers.splice(1,1)
console.log(delNumbers)  // [2]
console.log(numbers)  // [1, 3, 4, 5]

const numbers2 = [1,2,3,4,5];
// 删除索引1-3的值，并从开始位置开始，依次插入11,22,33,44,55值
const delNumbers2 = numbers2.splice(1,3,11,22,33,44,55);
console.log(delNumbers2)  // [2, 3, 4]
console.log(numbers2)  // [1, 11, 22, 33, 44, 55, 5]

push()、pop()、shift()、unshift() 方法

• push()方法：向数组后面添加一个或多个元素；
• pop() 方法：删除数组的最后一个元素；
• shift()方法：删除数组开头的一个元素；
• unshift() 方法：向数组的开头添加一个元素；

总结

以上讲解了在平时开发中一些常用的数组方法，合理利用这些方法可使我们在开发中达到事半功倍效果！