循环跳出（对象，数组）

这是目录，简书不支持 [TOC] 所以用图片来代替

Screenshot from 2018-06-25 23-41-29.png

全局测试数组和对象

循环无外乎用于数组或者对象中，数组对象也是一个数组这里用最简单的数组来代替。

 const arr = [
    [{ key: 'key1', name: 'name1' }, { title: "111", 'otherName': "猪八戒" }],
    [{ key: 'key2', name: 'name2' }, { title: "222", 'otherName': "孙悟空" }],
    [{ key: 'key3', name: 'name3' }, { title: "333", 'otherName': "沙僧" }],
    [{ key: 'key4', name: 'name4' }, { title: "444", 'otherName': "唐僧" }],
    [{ key: 'key5', name: 'name5' }, { title: "555", 'otherName': "小白龙" }],
  ];
const obj = {
    name: 'mine',
    age: 28,
    gender: male,
    name1: 'mine1',
    age1: '30',
    gender: 'female',
}
const obj2 = {
      a: {
        name: 'mine1',
        age: 28,
        gender: 'male',
      },
      b: {
        name2: 'mine2',
        age2: 30,
        gender2: 'male2',
      },
      c: {
        name3: 'mine3',
        age3: 31,
        gender3: 'male3',
      },
    };

forEach的注意事项

注意： 没有办法中止或者跳出 forEach 循环，除了抛出一个异常。如果你需要这样，使用forEach()方法是错误的，你可以用一个简单的循环作为替代。如果您正在测试一个数组里的元素是否符合某条件，且需要返回一个布尔值，那么可使用 Array.every 或 Array.some。如果可用，新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。（摘自MDN）

break

注意：break只能用在循环或者switch中
数组循环：

forEach中用break

arr.forEach((outerItem,outerIndex)=>{
    outerItem.forEach((innerItem,innerIndex)=>{
        if(innerItem.key==="key3"){
        break;
        }
        console.log(outerIndex);
        })
    })

结果报错，因为我测试代码中开启了eslint
如果直接在控制台中运行，报错。
Uncaught SyntaxError: Unexpected end of input
结论：foreach中不能用break

for循环中用break

for (let i = 0; i < 10;i++){
    if (i === 5) {
      break;
    }
    console.log(i);
}

输出结果

    0
    1
    2
    3
    4

for循环中用break是结束此次循环

双层for循环中内层用break

 for (let i = 0; i < 10; i += 1) {
      for (let j = 0; j < 5; j += 1) {
        if (j === 3) {
          break;
        }
        console.log(`当前j:${j}`);
      }
      console.log(`当前i：${i}`);
 }

输出结果

    当前j: 0
    当前j: 1
    当前j: 2
    当前i：0
    当前j: 0
    当前j: 1
    当前j: 2
    当前i：1
    当前j: 0
    当前j: 1
    当前j: 2
    当前i：2
    当前j: 0
    当前j: 1
    当前j: 2
    当前i：3
    当前j: 0
    当前j: 1
    当前j: 2
    当前i：4
    当前j: 0
    当前j: 1
    当前j: 2
    当前i：5
    当前j: 0
    当前j: 1
    当前j: 2
    当前i：6
    当前j: 0
    当前j: 1
    当前j: 2
    当前i：7
    当前j: 0
    当前j: 1
    当前j: 2
    当前i：8
    当前j: 0
    当前j: 1
    当前j: 2
    当前i：9

结论
break用于双层forEach中是跳出内层循环，继续外层的下一次循环

对象for in 中用break

for (let key in obj) {
      if (key === 'age2') {
        break;
      } else {
        console.log(key);
      }
 }

输出结果

    name
    age
    gender
    name2

break对于对象是结束本次循环

双层for in 对象循环

    for (const outerKey in obj2) {
      if (obj2[outerKey]) {
        for (const innerKey in obj2[outerKey]) {
          if (innerKey === 'age2') {
            break;
          } 
           console.log(innerKey);
        }
        console.log(outerKey);
      }
    }

输出结果

    name;
    age;
    gender;
    a;
    name2;
    b;
    name3;
    age3;
    gender3;
    c;

结论：对于双层for in 循环,break也是跳出本层循环，进行下一次外层循环

continue

概述： continue 语句结束当前（或标签）的循环语句的本次迭代，并继续执行循环的下一次迭代。
注意:
与 break 语句的区别在于， continue 并不会终止循环的迭代，而是：
在 while 循环中，控制流跳转回条件判断；
在 for 循环中，控制流跳转到更新语句。
continue 语句可以包含一个可选的标号以控制程序跳转到指定循环的下一次迭代，而非当前循环。此时要求 continue 语句在对应的循环内部。(摘自MDN)

forEach中用continue

arr.forEach((outerItem,outerIndex)=>{
    outerItem.forEach((innerItem,innerIndex)=>{
        if(innerItem.key==="key3"){
        continue;
        }
        console.log(outerIndex);
        })
    })

这次是直接在新建了html文件直接运行在chrome文件下，（去掉或者注释continue就会正常运行）
index.html:47 Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
at Array.forEach (<anonymous>)
at index.html:47

结论：forEach中不能使用continue

for循环中用continue

for (let i = 0; i < 10;i++){
    if (i === 5) {
      continue;
    }
    console.log(i);
}

输出结果

    0
    1
    2
    3
    4
    6
    7
    8
    9

没有打印出5
结论：直接结束当前一步，进入当前循环的下一步
continue

双层for循环中内层用continue

 for (let i = 0; i < 10; i += 1) {
      for (let j = 0; j < 5; j += 1) {
        if (j === 5) {
          continue;
        }
        console.log(`当前j:${j}`);
      }
      console.log(`当前i：${i}`);
 }

输出

  当前j: 0
  当前j: 1
  当前j: 2
  当前j: 4
  当前i：0
  当前j: 0
  当前j: 1
  当前j: 2
  当前j: 4
  当前i：1
  当前j: 0
  当前j: 1
  当前j: 2
  当前j: 4
  当前i：2
  当前j: 0
  当前j: 1
  当前j: 2
  当前j: 4
  当前i：3
  当前j: 0
  当前j: 1
  当前j: 2
  当前j: 4
  当前j: 0
  当前j: 1
  当前j: 2
  当前i：5
  当前j: 0
  当前j: 1
  当前j: 2
  当前j: 4
  当前i：6
  当前j: 0
  当前j: 1
  当前j: 2
  当前j: 4
  当前i：7
  当前j: 0
  当前j: 1
  当前j: 2
  当前j: 4
  当前i：8
  当前j: 0
  当前j: 1
  当前j: 2
  当前j: 4
  当前i：9

发现当走入if判断时候，没有走入continue下面的 console.log(当前j:${j});,走了循环外面的 console.log(当前i：${i});， 但是接着又走了下一次的循环（内部)，
跳出当前循环的当前步骤（不执行后面的代码）,进入当前循环的下一个步骤

对象for in 中用break

for (let i = 0; i < 10;i++){
    if (i === 5) {
      continue;
    }
    console.log(i);
}

输出

    0
    1
    2
    3
    4
    6
    7
    8
    9

发现没有输出5
同样的是立即结束当前步骤，进入当前循环的下一步

双层for in 对象循环

    for (const outerKey in obj2) {
      if (obj2[outerKey]) {
        for (const innerKey in obj2[outerKey]) {
          if (innerKey === 'age2') {
            continue;
          } 
           console.log(innerKey);
        }
        console.log(outerKey);
      }
    }

输出结果

    name
    age
    gender
    a
    name2
    b
    name3
    age3
    gender3
    c

同样的显而易见是一样的效果同上

return

return语句终止函数的执行，并返回一个指定的值给函数调用者。
描述:
当在函数体中使用return语句时，函数将会停止执行。如果指定一个值，则这个值返回给函数调用者。例如，以下函数返回其>参数x的平方，其中x是数字。

forEach中用return

arr.forEach((outerItem,outerIndex)=>{
    outerItem.forEach((innerItem,innerIndex)=>{
        if(innerItem.key==="key3"){
            return false;
        }
        console.log(outerIndex);
        })
    })

arr.forEach((outerItem,outerIndex)=>{
    outerItem.forEach((innerItem,innerIndex)=>{
        if(innerItem.key==="key3"){
        return true;
        }
        console.log(outerIndex);
        })
    })

输出结果

    0
    0
    1
    1
    2
    3
    3
    4
    4

上面两个表达式输出结果是一致的，所以可以总结为
结束当前步骤进入当前循环的下一步，与continue类似

for循环中用return

for (let i = 0; i < 10;i++){
    if (i === 5) {
      return;
    }
    console.log(i);
}

输出结果

    Uncaught SyntaxError: Illegal return statement

for 循环中不能用return

双层for循环中内层用return

 for (let i = 0; i < 10; i += 1) {
      for (let j = 0; j < 5; j += 1) {
        if (i === 5) {
          return;
        }
        console.log(`当前j:${j}`);
      }
      console.log(`当前i：${i}`);
 }

同样的报错 Uncaught SyntaxError: Illegal return statement

对象for in 中用return

for (let i = 0; i < 10;i++){
    if (i === 5) {
      return;
    }
    console.log(i);
}

报错 Uncaught SyntaxError: Illegal return statement

双层for in 对象循环使用return

同上，双层的也会报错 Uncaught SyntaxError: Illegal return statemen、

总结

break

(1).结束当前整个循环，执行当前循环下边的语句。忽略循环体中任何其它语句和循环条件测试。
(2).只能跳出一层循环，如果你的循环是嵌套循环，那么你需要按照你嵌套的层次，逐步使用break来跳出。[逐层判断，逐步跳出]
(3).break在循环体内，强行结束循环的执行，也就是结束整个循环过程，不在判断执行循环的条件是否成立，直接转向循环语句下面的语句。
(4).当break出现在循环体中的switch语句体内时，其作用只是跳出该switch语句体。
总的来说：就近原则，结束当前的整个循环。

continue

(1).终止本次循环的执行，即跳过当前这次循环中continue语句后尚未执行的语句，接着进行下一次循环条件的判断。
(2).结束当前循环，进行下一次的循环判断。
(3).终止当前的循环过程，但他并不跳出循环,而是继续往下判断循环条件执行语句.他只能结束循环中的一次过程,但不能终止循环继续进行.

return：

(1).return 从当前的方法中退出,返回到该调用的方法的语句处,继续执行。
(2).return 返回一个值给调用该方法的语句，返回值的数据类型必须与方法的声明中的返回值的类型一致。
(3). return后面也可以不带参数，不带参数就是返回空，其实主要目的就是用于想中断函数执行，返回调用函数处。

forEach循环

中使用break, continue均报错
使用return 就会结束当前步骤，进入当前循环的下一步

for 循环

中使用break就会结束当前循环
使用continue就是结束当前步骤，进入当前循环的下一步
使用return 就会报错

双层for循环

中使用break跳出当前循环进入外层循环
使用continue结束当前步骤，进入当前循环的下一步
使用return 就会报错

for in循环

使用break就是结束当前循环
结束当前步，进入当前循环的下一步
使用return 报错

双层for in 循环

使用break就是结束当前循环，直接进行外层的下一次循环
结束当前步骤，进入当前循环的下一次循环
使用return 就会报错