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判定是否有这个数值