一文读懂JS数组的基本知识（附Demo）

前言

敲习惯了Python以及Java，对于JS的一些基本语法还需要多多补充

了解基本的API以及Demo方式的使用即可，在实操中感悟

1. API使用

JavaScript数组是存储多个值的列表，可以包含各种数据类型，包括数字、字符串、对象、甚至其他数组

一、 创建数组：

• 使用数组字面量：let arr = [1, 2, 3, 4, 5];
• 使用Array构造函数：let arr = new Array(1, 2, 3, 4, 5);

二、访问数主元素：（通过索引访问数组元素，索引从0开始）

let arr = [1, 2, 3, 4, 5];
console.log(arr[0]); // 输出 1
console.log(arr[2]); // 输出 3

三、常用数组方法：

• push() 和 pop()：在数组末尾添加或删除元素

let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop();   // [1, 2, 3]

• unshift() 和 shift()：在数组开头添加或删除元素

let arr = [1, 2, 3];
arr.unshift(0); // [0, 1, 2, 3]
arr.shift();    // [1, 2, 3]

• concat()：连接两个或多个数组

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = arr1.concat(arr2); // [1, 2, 3, 4]

• slice()：返回数组的一个子集，不改变原数组

let arr = [1, 2, 3, 4, 5];
let subArr = arr.slice(1, 3); // [2, 3]

• splice()：从数组中添加或删除元素，改变原数组

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 'a', 'b'); // [1, 2, 'a', 'b', 4, 5]

• forEach()：对数组中的每个元素执行一次提供的函数

let arr = [1, 2, 3];
arr.forEach((item) => console.log(item)); // 输出 1 2 3

• map()：创建一个新数组，其结果是对原数组中的每个元素执行一个提供的函数

let arr = [1, 2, 3];
let newArr = arr.map((item) => item * 2); // [2, 4, 6]

• filter()：创建一个新数组，其中包含所有通过提供函数测试的元素

let arr = [1, 2, 3, 4, 5];
let filteredArr = arr.filter((item) => item > 3); // [4, 5]

• reduce()：对数组中的每个元素执行提供的函数，将其结果累积为单个值

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, item) => acc + item, 0); // 10

• find() 和 findIndex()：找到第一个符合条件的元素或其索引

let arr = [1, 2, 3, 4];
let foundItem = arr.find((item) => item > 2); // 3
let foundIndex = arr.findIndex((item) => item > 2); // 2

2. Demo

示例 1：数组去重

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

示例 2：合并和排序两个数组

let arr1 = [3, 5, 7];
let arr2 = [2, 4, 6];
let mergedArr = arr1.concat(arr2);
mergedArr.sort((a, b) => a - b);
console.log(mergedArr); // [2, 3, 4, 5, 6, 7]

示例 3：数组元素计数

let arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
let count = arr.reduce((acc, item) => {
  acc[item] = (acc[item] || 0) + 1;
  return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }

示例 4：数组扁平化

let nestedArr = [1, [2, 3], [4, [5, 6]]];
let flatArr = nestedArr.flat(2);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

示例 5：数组元素的平方

let numbers = [1, 2, 3, 4];
let squares = numbers.map((num) => num * num);
console.log(squares); // [1, 4, 9, 16]

示例 6：找到数组中的最大值

let numbers = [10, 5, 8, 12, 7];
let maxNumber = numbers.reduce((max, num) => (num > max ? num : max), numbers[0]);
console.log(maxNumber); // 12

示例 7：从对象数组中提取特定属性值

let users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
let names = users.map((user) => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

示例 8：过滤掉数组中的假值（如 null、undefined、0、false）

let arr = [0, 1, false, 2, '', 3, null, 'a', undefined, 'b'];
let filteredArr = arr.filter(Boolean);
console.log(filteredArr); // [1, 2, 3, 'a', 'b']

示例 9：合并并去重多个数组

let arr1 = [1, 2, 3];
let arr2 = [3, 4, 5];
let arr3 = [5, 6, 7];
let mergedArr = [...new Set([...arr1, ...arr2, ...arr3])];
console.log(mergedArr); // [1, 2, 3, 4, 5, 6, 7]

示例 10：数组中对象按某个属性值排序

let users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];
users.sort((a, b) => a.age - b.age);
console.log(users);
// [{ name: 'Charlie', age: 20 }, { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]

示例 11：检查数组中是否包含特定值

let fruits = ['apple', 'banana', 'orange'];
let hasApple = fruits.includes('apple');
console.log(hasApple); // true

示例 12：数组分组

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let groupBy = (arr, size) => {
  let groups = [];
  for (let i = 0; i < arr.length; i += size) {
    groups.push(arr.slice(i, i + size));
  }
  return groups;
};
let groupedArr = groupBy(numbers, 3);
console.log(groupedArr); // [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

示例 13：计算数组元素的平均值

let numbers = [1, 2, 3, 4, 5];
let average = numbers.reduce((sum, num) => sum + num, 0) / numbers.length;
console.log(average); // 3

示例 14：找到数组中所有重复的值

let numbers = [1, 2, 2, 3, 4, 4, 5, 5, 6];
let duplicates = numbers.filter((item, index, arr) => arr.indexOf(item) !== index);
let uniqueDuplicates = [...new Set(duplicates)];
console.log(uniqueDuplicates); // [2, 4, 5]

3. 实战

通过includes判定是否有这个数值