JavaScript 数组方法实用解析

1. some()

some() 方法用于检查数组中是否存在至少一个满足条件的元素。如果找到符合条件的元素，立即返回 true，否则返回 false。

private some(id: number) {    const arr = [        { cityId: 195, cityName: '深圳' },        { cityId: 196, cityName: '北京' },        { cityId: 198, cityName: '上海' }    ];    const result = arr.some((item: any) => item.cityId === id);    console.log(`传入:${id}, 结果:${result}`);}

2. every()

every() 方法用于检查数组中的每一个元素是否都满足给定的条件。如果所有元素都满足条件，则返回 true，否则返回 false。

private every() {    const arr = [1, 2, 3, 4, 5];    const result = arr.every((item: any) => item > 0);    console.log(`结果:${result}`);}

3. forEach()

forEach() 方法用于对数组中的每个元素执行回调函数。该方法不会改变原数组，并且不支持 continue 和 break，建议使用 return 或 throw 来控制循环。

private forEach() {    type itemType = { cityId: number, cityName: string };    const arr = [        { cityId: 195, cityName: '深圳' },        { cityId: 196, cityName: '北京' },        { cityId: 197, cityName: '上海' }    ];    arr.forEach((item: itemType, index: number, arr: any) => {        console.log(`index: ${index}, item: ${JSON.stringify(item)}, arr: ${JSON.stringify(arr)}`);    });}

4. map()

map() 方法用于创建一个新数组，新数组中的每个元素是原数组对应元素调用函数处理后的结果。该方法不会改变原数组。

let arr = [1, 2, 3, 4, 5, 6];let newArr = arr.map((item: any) => item * item);console.log(newArr);

5. filter()

filter() 方法用于创建一个新数组，包含原数组中符合条件的所有元素。该方法不会改变原数组。

private filter(id: number): string {    const arr = [        { cityId: 195, cityName: '深圳' },        { cityId: 196, cityName: '北京' },        { cityId: 197, cityName: '上海' }    ];    let name: string = '';    const result = arr.filter((item: any) => {        if (item.cityId === id) {            name = item.cityName;        }    });    console.log(`传入:${id}，结果:${name}`);    return name;}

6. find()

find() 方法用于遍历数组，返回符合条件的第一个元素。如果没有找到符合条件的元素，则返回 undefined。

let arr = [1, 2, 2, 3, 3, 3, 3, 4, 4, 5, 6];let num = arr.find((item: any) => item === 3);console.log(num);

7. findIndex()

findIndex() 方法与 find() 类似，但返回的是符合条件的第一个元素的索引。如果没有找到符合条件的元素，则返回 -1。

let arr = [1, 2, 2, 3, 3, 3, 3, 4, 4, 5, 6];let num = arr.findIndex((item: any) => item === 2);console.log(num);

8. for...of (ES6)

for...of 方法用于遍历数组，自动解构当前元素和索引，适合处理数组的迭代操作。

const arr = [    { cityId: 195, cityName: '深圳' },    { cityId: 196, cityName: '北京' },    { cityId: 197, cityName: '上海' }];for (const { cityId, cityName } of arr) {    console.log(cityId, cityName);}

9. for...in

for...in 方法用于遍历数组或对象的属性。对于数组，for...in 会遍历元素的索引字符串。

const arr = [    { cityId: 195, cityName: '深圳' },    { cityId: 196, cityName: '北京' },    { cityId: 197, cityName: '上海' }];const obj = { cityId: 195, cityName: '深圳' };for (const key in arr) {    console.log(`数组key-${key}`);}for (const key in obj) {    console.log(`对象key-${key}`);}

10. for 循环

for 循环是最基础的循环语句，适合对数组进行索引遍历。虽然可读性较低，但性能优异。

const arr = [    { cityId: 195, cityName: '深圳' },    { cityId: 196, cityName: '北京' },    { cityId: 197, cityName: '上海' }];for (let i = 0; i < arr.length; i++) {    console.log(arr[i]);}

性能对比

for：速度最快，但可读性较差。

forEach：性能较好，适合控制内容。

for...of：速度较慢，但支持自动解构。

for...in：适合处理对象属性，但数组性能较差。

通过合理选择这些方法，可以高效地完成数组操作，提升代码可读性和性能。

转载地址：http://zdgv.baihongyu.com/

你可能感兴趣的文章

OpenLayers 项目分析（三）-OpenLayers中定制JavaScript内置类