js跳出循环的三种方法（break，return， continue）编写更好的条件语句

return

return 可以跳出循环，同时阻止后面代码的执行，在js中return语句只能放在函数中。若只有循环则会报错

function fn () {
  for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      return false   // a为 false
      // return      // a为 undefine
    }
    console.log(i); // 分别输出  1，2
  }
  console.log('end'); // 未执行
}
fn();
const a = fn()

break

break可以跳出当前循环语句，不阻止后面代码的执行，只在switch和循环语句中使用

function fn () {
  for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      break
    }
    console.log(i); // 分别输出  1，2
  }
  console.log('end'); // end
}
fn();

continue

continue退出当前循环，下一轮继续，常用于for循环，while等

function fn () {
  for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      continue
    }
    console.log(i); // 分别输出  1，2，4，5
  }
  console.log('end'); // end
}
fn();

编写条件语句

js中调用接口前可能要做许多判断，条件语句的调用有多种，用不同的方式会使得条件代码更加清晰

• 数组方法array.includes
• 提前退出 / 提前返回
• 用对象字面量或Map替代Switch语句
• 用 Array.every & Array.some 匹配全部/部分内容
• 使用可选链和空值合并

数组方法array.includes

进行多条件选择

function printAnimals(animal) {
// if (animal === 'dog' || animal === 'cat')
   const animals = ['dog', 'cat', 'hamster', 'turtle']; 
   if (animals.includes(animal)) {
     console.log(animal);
   }
}

提前退出 / 提前返回

有多个条件才能进行的逻辑

function printAnimals(animal) {
let result; 
  if (animal) {
    if (animal.type) {
      if (animal.name) {
        if (animal.gender) {
          result = ${animal.name} is a ${animal.gender} ${animal.type};;
        } else {
          result = "No animal gender";
        }
      } else {
        result = "No animal name";
      }
    } else {
      result = "No animal type";
    }
  } else {
    result = "No animal";
  }
  return result;
}

function printAnimals(animal) {
  if(!type) return 'No animal type';
  if(!name) return 'No animal name';
  if(!gender) return 'No animal gender';
  return ${name} is a ${gender} ${type};
}

如果if判断不return出来，而是执行一些逻辑，还是使用else if，因为不用每个条件都判断

用对象字面量或Map替代Switch语句

function printFruits(color) {
  // use switch case to find fruits by color
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

如果是简单的类型，就是将条件设为key，返回值设为value创建出一个对象
然后直接返回

// const fruitColor = {
//     red: ['apple', 'strawberry'],
//     yellow: ['banana', 'pineapple'],
//    purple: ['grape', 'plum']
//  };

const fruitColor = new Map()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum']);

function printFruits(color) {
  return fruitColor.get(color) || [];
}

用 Array.every & Array.some 匹配全部/部分内容

Array.every()方法能够检索数组中所有满足值满足该条件，都满足返回true，有一个不满足返回false
Array.some()方法能够检索数组中是否满足指定条件，有一个满足返回true（后面的元素不再检测），都没有返回false，不改变原始数组（如果数组为空，则任何条件皆返回false）

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];
const isAllRed = fruits.every(f => f.color == 'red'); // 是否都是红色水果
const isAnyRed = fruits.some(f => f.color == 'red'); // 是否有红色水果

使用可选链和空值合并

const car = {
    model: 'Fiesta',
    manufacturer: {
      name: 'Ford',
      address: {
        street: 'Some Street Name',
        number: '5555',
        state: 'USA'
      }
    }
} 
// const street = car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.street || 'default street';
const street = car?.manufacturer?.address?.street ?? 'default street';

参考文章：https://blog.csdn.net/JiaPeng366/article/details/107410121
https://mp.weixin.qq.com/s/waDSTlv-jxt8o_Tyev3UUw