数组循环对比总结（修改原数组、退出循环）

退出循环对比

1、for循环

var arr = ['a', 'b', 'c', 'd', 'e'];
var show = [];
for (var i = 0; i < arr.length; i++) {
    if (i === 2) {
        // break;// ['a', 'b'] 成功跳出循环
        // continue;// ['a', 'b', 'd', 'e'] 只能跳出本次循环
        // return;// Uncaught SyntaxError: Illegal return statement 注意node环境下不报错
        return true;// Uncaught SyntaxError: Illegal return statement 注意node环境下不报错
        // return false;// Uncaught SyntaxError: Illegal return statement 注意node环境下不报错
    }
    show.push(arr[i]);
}
console.log(show)

2、forEach方法

var arr = ['a', 'b', 'c', 'd', 'e'];
var show = [];
arr.forEach((item, index) => {
    if (index === 2) {
        // break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b", "d", "e"] 只能跳出本次循环
        // return true;// ["a", "b", "d", "e"] 只能跳出本次循环
        return false;// ['a', 'b', 'd', 'e'] 只能跳出本次循环
    }
    show.push(item);
})
console.log(show)

3、for...in...

var arr = ['a', 'b', 'c', 'd', 'e'];
var show = [];
for (var item in arr) {
    if (item === '2') {
        // break;// ["a", "b"] 跳出循环成功
        // continue;// ["a", "b", "d", "e"] 只能跳出本次循环
        // return;// Uncaught SyntaxError: Illegal return statement 注意node环境下不报错
        return true;// Uncaught SyntaxError: Illegal return statement 注意node环境下不报错
        // return false;// Uncaught SyntaxError: Illegal return statement 注意node环境下不报错
    }

    show.push(arr[item]);
}
console.log(show)

4、for...of...

var arr = ['a', 'b', 'c', 'd', 'e'];
var show = [];
for (var item of arr) {
    if (item === 'b') {
        // break;// [ 'a' ] 跳出循环成功
        // continue;// [ 'a', 'c', 'd', 'e' ] 只能跳出本次循环
        // return;// Uncaught SyntaxError: Illegal return statement 注意node环境下不报错
        // return true;// Uncaught SyntaxError: Illegal return statement 注意node环境下不报错
        // return false;// Uncaught SyntaxError: Illegal return statement 注意node环境下不报错
    }
    show.push(item);
}
console.log(show)

5、map()

var arr = ['a', 'b', 'c', 'd', 'e']; 
var show = [];
arr.map((item, index) => {
    if (index === 2) {
        // break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b", "d", "e"] 只能跳出本次循环
        // return true;// ["a", "b", "d", "e"] 只能跳出本次循环
        return false;// ['a', 'b', 'd', 'e'] 只能跳出本次循环
    }
    show.push(item);
})
console.log(show)

6、some()

var arr = ['a', 'b', 'c', 'd', 'e'];
var show = [];
arr.some((item, index) => {
    if (index === 2) {
        break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b", "d", "e"] 只能跳出本次循环
        // return true;// [ 'a', 'b' ] 成功跳出循环
        // return false;// ['a', 'b', 'd', 'e'] 只能跳出本次循环
    }
    show.push(item);
})
console.log(show)

7、every()方法

var arr = ['a', 'b', 'c', 'd', 'e'];
var show = [];
arr.every((item, index) => {
    if (index === 2) {
        // break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b"] 成功跳出循环
        // return true;// ["a", "b", "d", "e"] 只能跳出本次循环
        return false;// ["a", "b"] 成功跳出循环
    }
    
    return show.push(item);
})
console.log(show)

8、filter()

var arr = ['a', 'b', 'c', 'd', 'e'];
var show = [];
arr.filter((item, index) => {
    if (index === 2) {
        // break;// Uncaught SyntaxError: Illegal break statement
        // continue;// Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
        // return;// ["a", "b", "d", "e"] 只能跳出本次循环
        // return true;// ["a", "b", "d", "e"] 只能跳出本次循环
        // return false;// [ 'a', 'b', 'd', 'e' ] 只能跳出本次循环
    }
    
    show.push(item);
})
console.log(show)

综上：

1. forEach、map、filter无法退出循环 forEach无法退出循环的原因
2. for循环、for...in...、for...of...通过break可以跳出循环
   some()通过return:true跳出循环
   every()通过return;跳出循环

是否修改原数组及返回值对比

1、map()

var arr = ['a', 'b', 'c', 'd', 'e'];
var show = [];

let test = arr.map((item, index) => {
    if (index === 2) {
        item = 'test'
    }
    show.push(item);
    return item;
})
console.log(show) // [ 'a', 'b', 'test', 'd', 'e' ]
console.log(arr) // [ 'a', 'b', 'c', 'd', 'e' ]
console.log(test) // [ 'a', 'b', 'test', 'd', 'e' ]

let test = arr.map((item, index) => {
    if (index === 2) {
        return
    }
    show.push(item);
    return item;
})
console.log(show) // [ 'a', 'b', 'd', 'e' ]
console.log(arr) // [ 'a', 'b', 'c', 'd', 'e' ]
console.log(test) // [ 'a', 'b', undefined, 'd', 'e' ]

map方法并未修改原数组 返回的数组长度永远和原数组相等

2、forEach()

var arr = ['a', 'b', 'c', 'd', 'e'];
var show = [];

let test = arr.forEach((item, index) => {
    if (index === 2) {
        item = 'test'
    }
    show.push(item);
    return item;
})
console.log(show) // [ 'a', 'b', 'test', 'd', 'e' ]
console.log(arr) // [ 'a', 'b', 'c', 'd', 'e' ]
console.log(test) // undefined

let test = arr.forEach((item, index) => {
    if (index === 2) {
        return
    }
    show.push(item);
    return item;
})
console.log(show) // [ 'a', 'b', 'd', 'e' ]
console.log(arr) // [ 'a', 'b', 'c', 'd', 'e' ]
console.log(test) // undefined

forEach方法是否改变原数组取决于数组元素的类型是引用类型还是基本类型， 且无返回值

3、some()、every()、filter()

some()、every()、filter()都不会改变原数组
some()、eveyr()返回结果为布尔类型
filter() 为过滤作用 可以指定返回内容