以下是 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()
返回值: 返回反转后的数组。