以下是 JavaScript/TypeScript 中数组的常用方法及其典型应用场景,结合你的代码场景(如权限验证)进行说明:
**1. **map()
作用:对数组中的每个元素执行回调函数,返回新数组(不修改原数组)。
// 示例:将角色名称提取为数组
const roles = [{ name: 'admin' }, { name: 'user' }];
const roleNames = roles.map(role => role.name); // ["admin", "user"]**2. **filter()
作用:筛选符合条件的元素,返回新数组。
// 示例:筛选出状态为激活的角色
const activeRoles = roles.filter(role => role.status === 1);**3. **find()
作用:返回第一个符合条件的元素,或 undefined。
// 示例:检查用户是否有 'admin' 角色
const isAdmin = roles.find(role => role.name === 'admin');
if (isAdmin) {
// 有管理员权限
}**4. **some()
作用:判断至少一个元素是否符合条件,返回布尔值。
// 示例:检查用户是否有任意一个所需权限
const hasAnyPermission = requirePermissions.some(permission =>
roles.some(role => role.name === permission),
);**5. **every()
作用:判断所有元素是否符合条件,返回布尔值。
// 示例:检查用户是否拥有所有必需的权限(替代你的 for 循环)
const userPermissions = roles.map(role => role.name); // 提取权限数组
const hasAllPermissions = requirePermissions.every(
permission => userPermissions.includes(permission),
);
if (!hasAllPermissions) {
throw new UnauthorizedException('您无此权限');
}**6. **reduce()
作用:对数组元素进行累积计算,返回单一值。
// 示例:统计角色数量
const totalRoles = roles.reduce((count, _) => count + 1, 0);**7. **includes()
作用:检查数组是否包含指定元素,返回布尔值。
// 示例:检查权限数组是否包含 'edit' 权限
const permissions = ['read', 'write'];
if (permissions.includes('edit')) {
// 允许编辑操作
}**8. **forEach()
作用:遍历数组,对每个元素执行回调(无返回值)。
// 示例:打印所有角色名称
roles.forEach(role => console.log(role.name));**9. **sort()
作用:对数组进行排序(修改原数组或返回新数组)。
// 示例:按角色名称排序
roles.sort((a, b) => a.name.localeCompare(b.name));**10. **flatMap()
作用:结合 map 和 flat,适用于嵌套数组的扁平化。
// 示例:将角色的权限列表扁平化
const allPermissions = roles.flatMap(role => role.permissions);在你的代码中如何应用?
以权限验证为例:
原逻辑(使用 for 循环)
for (let i = 0; i < requirePermissions.length; i++) {
const curPermission = requirePermissions[i];
const found = roles.find(item => item.name === curPermission);
if (!found) {
throw new UnauthorizedException('您无此权限');
}
}优化后的逻辑(使用 every())
// 提取用户权限为数组
const userPermissions = roles.map(role => role.name);
// 检查是否所有权限都满足
const hasAllPermissions = requirePermissions.every(
permission => userPermissions.includes(permission),
);
if (!hasAllPermissions) {
throw new UnauthorizedException('您无此权限');
}关键区别
| 方法 | 适用场景 |
|---|---|
map | 转换数组元素格式(如提取字段) |
filter | 过滤符合条件的元素 |
find | 查找单个符合条件的元素 |
some | 检查是否存在至少一个符合条件的元素 |
every | 检查所有元素是否符合条件 |
includes | 简单判断数组是否包含特定值 |
reduce | 累计计算(如求和、合并对象等) |
注意事项
- 避免副作用:
map、filter等方法不会修改原数组,而是返回新数组。 - 性能优化:对于大型数组,优先使用
includes或Set来提高查找效率:
const userPermissionsSet = new Set(userPermissions);
const hasAllPermissions = requirePermissions.every(permission =>
userPermissionsSet.has(permission),
);通过合理使用这些方法,可以显著提升代码的简洁性和可读性。
1. push() 方法
let arr = [1, 2, 3];
arr.push(4); // 向数组末尾添加一个或多个元素
console.log(arr); // 输出: [1, 2, 3, 4]语法: array.push(element1, element2, ..., elementN)
返回值: 数组的新长度
2. pop() 方法
let lastElement = arr.pop(); // 删除数组的最后一个元素
console.log(lastElement); // 输出: 4
console.log(arr); // 输出: [1, 2, 3]语法: array.pop()
返回值: 被删除的元素
3. shift() 方法
let firstElement = arr.shift(); // 删除数组的第一个元素
console.log(firstElement); // 输出: 1
console.log(arr); // 输出: [2, 3]语法: array.shift()
返回值: 被删除的元素
4. unshift() 方法
arr.unshift(0); // 向数组开头添加一个或多个元素
console.log(arr); // 输出: [0, 2, 3]语法: array.unshift(element1, element2, ..., elementN)
返回值: 数组的新长度
5. concat() 方法
let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2); // 合并两个或多个数组
console.log(newArr); // 输出: [1, 2, 3, 4]语法: array.concat(array2, array3, ..., arrayN)
返回值: 新数组(浅拷贝)
6. slice() 方法
let slicedArr = newArr.slice(1, 3); // 返回数组的一部分(从索引1到索引3,不包括索引3)
console.log(slicedArr); // 输出: [2, 3]语法: array.slice(startIndex, endIndex)
返回值: 新数组(浅拷贝)
7. splice() 方法
let removed = newArr.splice(1, 2, 'a', 'b'); // 删除或替换现有元素,并添加新元素
console.log(newArr); // 输出: [1, 'a', 'b', 4]
console.log(removed); // 输出: [2, 3]语法: array.splice(startIndex, deleteCount, item1, item2, ..., itemN)
返回值: 被删除的元素组成的数组
8. forEach() 方法
newArr.forEach(element => console.log(element)); // 对数组的每个元素执行一次提供的函数
// 输出: 1, 'a', 'b', 4语法: array.forEach(callbackFn(currentValue, index, array), thisArg)
返回值: undefined
9. map() 方法
let mappedArr = newArr.map(x => typeof x === 'number' ? x * 2 : x); // 创建一个新数组,其结果是该数组中的每个元素调用一次提供的函数后的返回值
console.log(mappedArr); // 输出: [2, 'a', 'b', 8]语法: array.map(callbackFn(currentValue, index, array), thisArg)
返回值: 新数组
10. filter() 方法
let filteredArr = newArr.filter(x => typeof x === 'number'); // 创建一个新数组,包含通过所提供函数测试的所有元素
console.log(filteredArr); // 输出: [1, 4]语法: array.filter(callbackFn(currentValue, index, array), thisArg)
返回值: 新数组
11. reduce() 方法
let sum = filteredArr.reduce((acc, curr) => acc + curr, 0); // 对数组中的每个元素执行一个提供的 reducer 函数,将其结果汇总为单个返回值
console.log(sum); // 输出: 5语法: array.reduce(callbackFn(accumulator, currentValue, currentIndex, array), initialValue)
返回值: 单个值
12. find() 方法
let arr = [1, 2, 3, 4];
let found = arr.find(x => x > 2); // found 是 3语法: array.find(callbackFn(currentValue, index, array), thisArg)
返回值: 返回找到的元素,否则返回 undefined。
13. findIndex() 方法
let arr = [1, 2, 3, 4];
let index = arr.findIndex(x => x > 2); // index 是 2语法: array.findIndex(callbackFn(currentValue, index, array), thisArg)
返回值: 返回找到的元素的索引,否则返回 -1。
14. some() 方法
let arr = [1, 2, 3, 4];
let hasEven = arr.some(x => x % 2 === 0); // hasEven 是 true语法: array.some(callbackFn(currentValue, index, array), thisArg)
返回值: 返回布尔值。
15. every() 方法
let arr = [1, 2, 3, 4];
let allEven = arr.every(x => x % 2 === 0); // allEven 是 false语法: array.every(callbackFn(currentValue, index, array), thisArg)
返回值: 返回布尔值。
16. includes() 方法
let arr = [1, 2, 3, 4];
let includesTwo = arr.includes(2); // includesTwo 是 true语法: array.includes(valueToFind, fromIndex)
返回值: 返回布尔值。
17. indexOf() 方法
let arr = [1, 2, 3, 4];
let index = arr.indexOf(3); // index 是 2语法: array.indexOf(searchElement, fromIndex)
返回值: 返回找到的索引,否则返回 -1。
18. lastIndexOf() 方法
let arr = [1, 2, 3, 2, 4];
let lastIndex = arr.lastIndexOf(2); // lastIndex 是 3语法: array.lastIndexOf(searchElement, fromIndex)
返回值: 返回找到的索引,否则返回 -1。
19. sort() 方法
let arr = [3, 1, 4, 1, 5, 9];
arr.sort(); // arr 现在是 [1, 1, 3, 4, 5, 9]语法: array.sort(compareFn)
返回值: 返回排序后的数组。
20. reverse() 方法
let arr = [1, 2, 3, 4];
arr.reverse(); // arr 现在是 [4, 3, 2, 1]语法: array.reverse()
返回值: 返回反转后的数组。