以下是 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()

作用:结合 mapflat,适用于嵌套数组的扁平化。

// 示例:将角色的权限列表扁平化 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累计计算(如求和、合并对象等)

注意事项

  1. 避免副作用mapfilter 等方法不会修改原数组,而是返回新数组。
  2. 性能优化:对于大型数组,优先使用 includesSet 来提高查找效率:
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()

返回值: 返回反转后的数组。

最后修改:2025 年 03 月 28 日
如果觉得我的文章对你有用,请随意赞赏