JS数组遍历的几种方法

不念不忘少年蓝@ 2021-09-19 03:02 521阅读 0赞

## for ##

最简单的一种循环遍历方法，也是使用频率最高的一种，可优化  
    循环过程中支持修改索引（修改 i）

var arr = [1, 2, 3, 4, 5, 6]
    for(var i = 0; i < arr.length; i++) { 
    	console.log(arr[i])
    }
    
    // 1 2 3 4 5 6

优化：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显

var arr = [1, 2, 3, 4, 5, 6]
    var len = arr.length
    for(var i = 0; i < len; i++) { 
    	console.log(arr[i])
    }
    
    // 1 2 3 4 5 6

## for…in… ##

这个循环用的人也很多，但是效率最低（输出的 key 是数组索引），如果遍历的是对象，输出的则是对象的属性名

var arr = ['我', '是', '谁', '我', '在', '哪']
    for(let key in arr) { 
        console.log(key)
    }
    
    // 0 1 2 3 4 5
    
    let obj = { 
            a: 11,
            b: 22,
            c: 33
    }
    for(let key in obj) { 
    	console.log(key)
    }
    // a b c

## for…of…（ES6） ##

虽然性能要好于 `for..in...`，但仍然比不上普通的 `for` 循环  
    **注意：不能循环对象，因为任何数据结构只要部署 `Iterator`接口，就可以完成遍历操作，有些数据结构原生具备 `Iterator` 接口，比如`Array`、`Map`、`Set`、`String`等，而 `Iterator` 接口是部署在数据结构的`Symbol.iterator`属性上的，而对象`Object`恰恰是没有`Symbol.iterator`属性的，所以无法被`for..of`遍历**

var arr = ['我', '是', '谁', '我', '在', '哪']
    for(var key of arr) { 
        console.log(key)
    }
    
    // 我 是 谁 我 在 哪

## forEach（也叫作增强for循环） ##

1. 数组里的元素个数有几个，该方法里的回调就会执行几次  
    2. 第一个参数是数组里的元素，第二个参数为数组里元素的索引，第三个参数则是它自己（利用第三个参数可以进行数组去重）  
    3. 数组自带的遍历方法，`foreach`在循环次数未知或者计算起来较复杂的情况下效率比`for`循环高  
    4. 循环的数组元素是基本数据类型，不会改变原数据的数据，循环的数组元素为对象，会改变原数组的对象属性的值  
    5. 循环过程中不支持修改索引，回调中使用`return`不会报错，但是无效  
    **注意：不能使用`break`和`continue`跳出整个循环或当前循环的，会报错，但是结合`try...catch`可以实现跳出循环**

## map（ES6） ##

遍历每一个元素并且返回对应的元素(可以返回处理后的元素) (map 映射 一一 对应)  
    返回创建的新数组和原来旧数组的长度是一样的，使用比较广泛，但其性能还不如 `forEach`  
    前两种写法都会改变原数组，第三中方式则不会改变原数组  
    **注意：不能使用`break`和`continue`跳出整个循环或当前循环的，会报错，但是结合`try...catch`可以实现跳出循环**

// 一、会改变原数组
    var arr = [1, 2, 3, 4, 5, 6]
    var newArr = arr.map(function (item, idnex) { 
        return item * item
    })
    
    console.log(arr)      // [1, 2, 3, 4, 5, 6]
    console.log(newArr)   // [1, 4, 9, 16, 25, 36]
    
    // 二、会改变原数组元素中对象的属性值
    var arr = [{ a: 1, b: 2},{ a: 11, b: 12}]
    let newARR = arr.map((item)=>{ 
        item.b = 111
        return item
    })
    console.log('arr数组',arr) // [{a: 1, b: 111},{a: 11, b: 111}]
    console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]
    
    // 三、不会改变原数组
    var arr = [{ a: 1, b: 2},{ a: 11, b: 12}]
    let newARR = arr.map((item)=>{ 
        return { 
        	...item,
        	b:111
        }
    })
    console.log('arr数组',arr) // [{a: 1, b: 2},{a: 11, b: 12}]
    console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]
    
    // 四、使用try...catch...可以跳出循环
    try { 
        var arr = [1, 2, 3, 4];
        arr.map((item) => { 
            //跳出条件
            if (item === 3) { 
                throw new Error("LoopTerminates");
            }
            console.log(item);
            return item
        });
    } catch (e) { 
        if (e.message !== "LoopTerminates") throw e;
    };
    // 1 2

## filter（ES6） ##

遍历数组，过滤出符合条件的元素并返回一个新数组

var arr = [
    	{  id: 1, name: '买笔', done: true },
    	{  id: 2, name: '买笔记本', done: true },
    	{  id: 3, name: '练字', done: false }
    ]
        
    var newArr = arr.filter(function (item, index) { 
    	return item.done
    })
    
    console.log(newArr)
    
    // [{ id: 1, name: '买笔', done: true },{ id: 2, name: '买笔记本', done: true }]

## some（ES6） ##

遍历数组，只要有一个以上的元素满足条件就返回 true，否则返回 false

var arr = [
    	{  id: 1, name: '买笔', done: true },
    	{  id: 2, name: '买笔记本', done: true },
    	{  id: 3, name: '练字', done: false }
    ]
    
    var bool = arr.some(function (item, index) { 
    	return item.done
    })
    
    console.log(bool)    // true

## every（ES6） ##

遍历数组，每一个元素都满足条件 则返回 true，否则返回 false

var arr = [
    	{  id: 1, name: '买笔', done: true },
    	{  id: 2, name: '买笔记本', done: true },
    	{  id: 3, name: '练字', done: false }
    ]
    
    var bool = arr.every(function (item, index) { 
    	return item.done
    })
    
    console.log(bool)    // false

## find（ES6） ##

遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素则返回 undefined

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
        
    var num = arr.find(function (item, index) { 
    	return item === 3
    })
    
    console.log(num)   // 3

## findIndex（ES6） ##

遍历数组，返回符合条件的第一个元素的索引，如果没有符合条件的元素则返回 -1

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
        
    var num = arr.findIndex(function (item) { 
    	return item === 3
    })
    
    console.log(num)   // 4