浅谈JS如何写出漂亮的条件表达式

多条件语句

多条件语句使用Array.includes

举个例子

function printAnimals(animal) {
  if (animal === "dog" || animal === "cat") {
    console.log(`I have a ${animal}`);
  }
}

console.log(printAnimals("dog")); // I have a dog

这种写法在条件比较少的情况下看起来没有问题,此时我们只有 2 种动物,但是如果我们有更多的条件需要判断(更多的动物)呢?如果我们继续拓展判断的条件,那么代码将会变得难以维护,而且逻辑会不清晰。

解决方法

可以使用Array.includes来重写条件语句

function printAnimals(animal) {
  const animals = ["dog", "cat", "hamster", "turtle"];

  if (animals.includes(animal)) {
    console.log(`I have a ${animal}`);
  }
}

console.log(printAnimals("hamster")); // I have a hamster

在这里,我们创建了一个动物数组,以便将条件与代码的其余部分分开提取。现在,如果我们想要检查任何其他动物,我们需要做的就是添加一个新的数组项。

我们还可以在这个函数的范围之外使用 animals 变量,以便在代码的其他地方重用它。这是一种编写更清晰、更容易理解和维护的代码的方法。不是吗?

多属性对象

这是一个非常好的技巧来压缩你的代码,使它看起来更简洁。让我们以前面的示例为例,添加更多的条件。如果这个动物不是一个简单的字符串,而是一个具有某些属性的对象呢?

所以现在的要求是:

  • 如果没有动物,抛出一个错误
  • 打印动物的类型
  • 打印动物的名字
  • 打印动物的性别
const printAnimalDetails = (animal) => {
  let result; // declare a variable to store the final value

  // condition 1: check if animal has a value
  if (animal) {
    // condition 2: check if animal has a type property
    if (animal.type) {
      // condition 3: check if animal has a name property
      if (animal.name) {
        // condition 4: check if animal has a gender property
        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;
};

console.log(printAnimalDetails()); // 'No animal'

console.log(printAnimalDetails({ type: "dog", gender: "female" })); // 'No animal name'

console.log(printAnimalDetails({ type: "dog", name: "Lucy" })); // 'No animal gender'

console.log(
  printAnimalDetails({ type: "dog", name: "Lucy", gender: "female" })
); // 'Lucy is a female dog'

上面的代码它工作得很好,但是代码很长,很难维护。如果不使用提示工具,可能会浪费一些时间来确定右括号的位置。想象将会发生什么如果代码更复杂的逻辑。很多if...else的语句!

我们可以使用三元操作符、&&条件等来重构上面的函数,但是让我们使用多个返回语句来编写更精确的代码。

const printAnimalDetails = ({ type, name, gender } = {}) => {
  if (!type) return "No animal type";
  if (!name) return "No animal name";
  if (!gender) return "No animal gender";

  // Now in this line of code, we're sure that we have an animal with all //the three properties here.

  return `${name} is a ${gender} ${type}`;
};

console.log(printAnimalDetails()); // 'No animal type'

console.log(printAnimalDetails({ type: dog })); // 'No animal name'

console.log(printAnimalDetails({ type: dog, gender: female })); // 'No animal name'

console.log(printAnimalDetails({ type: dog, name: "Lucy", gender: "female" })); // 'Lucy is a female dog'

在重构版本中,还包括解构默认参数默认参数确保如果我们将 undefined 作为参数传递给方法,我们仍然有一个要解构的值,这里是一个空对象 {}。

通常,代码是在这两种方法之间编写的。

举个例子

function printVegetablesWithQuantity(vegetable, quantity) {
  const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];

  // condition 1: vegetable should be present
  if (vegetable) {
    // condition 2: must be one of the item from the list
    if (vegetables.includes(vegetable)) {
      console.log(`I like ${vegetable}`);

      // condition 3: must be large quantity
      if (quantity >= 10) {
        console.log("I have bought a large quantity");
      }
    }
  } else {
    throw new Error("No vegetable from the list!");
  }
}

printVegetablesWithQuantity(null); //  No vegetable from the list!
printVegetablesWithQuantity("cabbage"); // I like cabbage
printVegetablesWithQuantity("cabbage", 20);
// 'I like cabbage`
// 'I have bought a large quantity'

现在,我们有:

  • 过滤无效条件的 if/else 语句
  • 3 层嵌套的 if 语句(条件 1、2 和 3)
  • 一个通用的规则是当发现无效条件时尽早返回。
function printVegetablesWithQuantity(vegetable, quantity) {
  const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];

  // condition 1: throw error early
  if (!vegetable) throw new Error("No vegetable from the list!");

  // condition 2: must be in the list
  if (vegetables.includes(vegetable)) {
    console.log(`I like ${vegetable}`);

    // condition 3: must be a large quantity
    if (quantity >= 10) {
      console.log("I have bought a large quantity");
    }
  }
}

通过这样做,我们减少了一个嵌套语句的级别。这种编码风格很好,特别是当使用长if语句时。通过反转条件并提前返回,我们可以进一步减少嵌套if。

请看下面的条件 2 是怎么做的:

function printVegetablesWithQuantity(vegetable, quantity) {
  const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];

  if (!vegetable) throw new Error("No vegetable from the list!");
  // condition 1: throw error early

  if (!vegetables.includes(vegetable)) return;
  // condition 2: return from the function is the vegetable is not in
  //  the list

  console.log(`I like ${vegetable}`);

  // condition 3: must be a large quantity
  if (quantity >= 10) {
    console.log("I have bought a large quantity");
  }
}

通过反转条件 2 的条件,代码不再具有嵌套语句。当我们有很多条件并且希望在任何特定条件不满足时停止进一步的处理时,这种技术是有用的。

因此,总是以减少嵌套和尽早返回为目标,但不要过度。

替换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 [];
  }
}

printFruits(null); // []
printFruits("yellow"); // ['banana', 'pineapple']

上面的代码实现没有错误,但是很冗长,同样的结果可以使用更简洁的语法来实现。

// use object literal to find fruits by color
const fruitColor = {
  red: ["apple", "strawberry"],
  yellow: ["banana", "pineapple"],
  purple: ["grape", "plum"],
};

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

同样的,也可以使用 Map 来实现:

// use Map to find fruits by color
const fruitColor = new Map()
  .set("red", ["apple", "strawberry"])
  .set("yellow", ["banana", "pineapple"])
  .set("purple", ["grape", "plum"]);

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

Map是 ES5 以来可用的对象类型,它允许存 key-value。

对于上面的示例,可以使用 Array.filter 实现相同的结果。

const fruits = [
  { name: "apple", color: "red" },
  { name: "strawberry", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "pineapple", color: "yellow" },
  { name: "grape", color: "purple" },
  { name: "plum", color: "purple" },
];

function printFruits(color) {
  return fruits.filter((fruit) => fruit.color === color);
}

默认参数与解构

在使用 JavaScript 时,我们总是需要检查 null/undefined 并分配默认值或编译中断。

function printVegetablesWithQuantity(vegetable, quantity = 1) {
// if quantity has no value, assign 1

  if (!vegetable) return;
    console.log(`We have ${quantity} ${vegetable}!`);
  }
  //results
}

printVegetablesWithQuantity('cabbage'); // We have 1 cabbage!
printVegetablesWithQuantity('potato', 2); // We have 2 potato!

如果蔬菜是一个对象呢?我们可以分配一个默认参数吗?

function printVegetableName(vegetable) {
  if (vegetable && vegetable.name) {
    console.log(vegetable.name);
  } else {
    console.log("unknown");
  }
}

printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage

在上面的示例中,我们希望打印蔬菜名(如果它可用)或打印 unknown。

我们可以通过使用默认参数&解构来避免条件if (vegetable && vegetable.name){}。

// destructing - get name property only
// assign default empty object {}

function printVegetableName({ name } = {}) {
  console.log(name || "unknown");
}

printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage

因为我们只需要属性名,所以我们可以使用 {name} 来改变参数的结构,然后我们可以在代码中使用 name 作为变量,而不是使用 vegetable.name。

我们还将一个空对象 {} 赋值为默认值,否则在执行 printVegetableName(undefined) 时,它将给出一个错误—— Cannot destructure property name of undefined or null,因为在 undefined 中没有 name 属性。

匹配所有或部分条件

我们可以通过使用这些Array方法来减少代码行数。

下面的代码,我们想要检查是否所有的水果都是红色的:

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

function test() {
  let isAllRed = true;

  // condition: all fruits must be red
  for (let f of fruits) {
    if (!isAllRed) break;
    isAllRed = f.color == "red";
  }

  console.log(isAllRed); // false
}

上面的代码太过冗长,我们可以通过使用 Array.every 来减少代码行:

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

function test() {
  // condition: short way, all fruits must be red
  const isAllRed = fruits.every((f) => f.color == "red");

  console.log(isAllRed); // false
}

同样的,如果我们想要测试任何一个水果是否是红色的,我们可以使用 Array.some:

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

function test() {
  // condition: if any fruit is red
  const isAnyRed = fruits.some((f) => f.color == "red");

  console.log(isAnyRed); // true
}

使用可选链和 Nullish 合并

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE

这两个功能对于 JavaScript 编写更简洁的条件非常有用。在编写本文时,它们还没有得到完全的支持,可能需要使用Babel进行编译。

可选链接能够处理类似树的结构,而不需要显式地检查中间节点是否存在,并且Nullish与可选链接结合使用非常有效,可以确保不存在节点的默认值。

举个例子:

const car = {
  model: "Fiesta",
  manufacturer: {
    name: "Ford",
    address: {
      street: "Some Street Name",
      number: "5555",
      state: "USA",
    },
  },
};

// to get the car model
const model = (car && car.model) || "default model";

// to get the manufacturer street
const street =
  (car &&
    car.manufacturer &&
    car.manufacturer.address &&
    car.manufacturer.address.street) ||
  "default street";

// request an un-existing property
const phoneNumber =
  car &&
  car.manufacturer &&
  car.manufacturer.address &&
  car.manufacturer.phoneNumber;

console.log(model); // 'Fiesta'
console.log(street); // 'Some Street Name'
console.log(phoneNumber); // undefined

因此,如果我们想打印出来,如果汽车制造商来自美国,代码应该是这样的:

const isManufacturerFromUSA = () => {
  if (
    car &&
    car.manufacturer &&
    car.manufacturer.address &&
    car.manufacturer.address.state === "USA"
  ) {
    console.log("true");
  }
};

checkCarManufacturerState(); // 'true'

可以清楚地看到,对于更复杂的对象结构,这会变得多么混乱。有一些第三方库,如 lodash 或idx,它们有自己的功能。例如 lodash 有 _.get 方法。但是,在 JavaScript 语言本身中引入这个特性。

以下是这些新功能的工作原理:

// to get the car model
const model = car?.model ?? "default model";

// to get the manufacturer street
const street = car?.manufacturer?.address?.street ?? "default street";

// to check if the car manufacturer is from the USA
const isManufacturerFromUSA = () => {
  if (car?.manufacturer?.address?.state === "USA") {
    console.log("true");
  }
};

目前在 Stage 3 阶段。

以上就是基于JavaScript实现条件表达式的一些分享,希望对你能有所帮助~

以上就是浅谈JS如何写出漂亮的条件表达式的详细内容,更多关于JS如何写出漂亮的条件表达式的资料请关注我们其它相关文章!

(0)

相关推荐

  • 详解写好JS条件语句的5条守则

    在用 JavaScript 工作时,我们经常和条件语句打交道,这里有5条让你写出更好/干净的条件语句的建议. 目录: 1.多重判断时使用 Array.includes 2.更少的嵌套,尽早 return 3.使用默认参数和解构 4.倾向于遍历对象而不是 Switch 语句 5.对 所有/部分 判断使用 Array.every & Array.some 6.总结 1.多重判断时使用 Array.includes 让我们看一下下面这个例子: // condition function test(fr

  • JSP实现带查询条件的通用分页组件

    分页功能的代码就是这样的,在需要展示列表的页面,我们基本都需要加上分页功能,如果某天boss想要修改分页功能的样式,我们不能去一个一个的改吧. 下边给大家分享一个自己封装的通用分页组件. 1. 效果展示 2. 使用方式 1 )在需要显示分页信息的位置,直接引入pagination.jsp页面. <!-- 分页内容 --> <%@include file="/WEB-INF/decorators/pagination.jsp" %> <!-- 分页内容结束

  • 如何利用JavaScript编写更好的条件语句详解

    前言 在任何编程语言中,代码需要根据不同的条件在给定的输入中做不同的决定和执行相应的动作. 例如,在一个游戏中,如果玩家生命点为0,游戏结束.在天气应用中,如果在早上被查看,显示一个日出图片,如果是晚上,则显示星星和月亮.在这篇文章中,我们将探索JavaScript中所谓的条件语句如何工作. 如果你使用JavaScript工作,你将写很多包含条件调用的代码.条件调用可能初学很简单,但是还有比写一对对if/else更多的东西.这里有些编写更好更清晰的条件代码的有用提示. 1. 数组方法 Array

  • JavaScript中的条件判断语句使用详解

    在写一个程序,可能有一种情况,当你需要采用一个路径出给定两个路径.所以,需要使用条件语句,让程序来做出正确的决策和执行正确的行动. JavaScript支持其用于执行根据不同的条件不同的操作条件语句.在这里,我们将解释if..else语句. JavaScript支持if..else语句的形式如下: if 语句 if...else 语句 if...else if... 语句. if 语句: if语句是基本的控制语句,它允许JavaScript来作出决定,有条件地执行语句. 语法: if (expr

  • JScript中的条件注释详解

    JScript 可以使用以下语句根据条件编译变量的值控制脚本的编译.既可以使用 JScript 提供的变量,也可以使用 @set 指令或 /define 命令行选项定义自己的变量. @cc_on   激活条件编译支持.   @if   根据表达式的值,有条件地执行一组语句.   @set   创建使用条件编译语句的变量.   @cc_on.@if 或 @set 语句激活条件编译.条件编译的一些典型用途包括在 JScript 中使用新功能.将调试支持嵌入到一个脚本中以及跟踪代码执行. 当编写由 W

  • 分享5个小技巧让你写出更好的 JavaScript 条件语句

    在使用 JavaScript 时,我们常常要写不少的条件语句.这里有五个小技巧,可以让你写出更干净.漂亮的条件语句. 1. 使用 Array.includes 来处理多重条件 举个栗子 : // 条件语句 function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } 乍一看,这么写似乎没什么大问题.然而,如果我们想要匹配更多的红色水果呢,比方说『樱桃』和『蔓越莓』?我

  • JavaScript中条件语句的优化技巧总结

    对多个条件使用 Array.includes function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } 上面的例子看起来不错.然而,如果还有更多红颜色的水果需要判断呢,比如樱桃和小红莓,我们要用更多的 ||来扩展这个表述吗? 我们可以用 Array.includes 重写上面的条件! function test(fruit) { const redFruits =

  • javascript里的条件判断

    JavaScript 是一种可以在浏览器中运行的脚本语言,是一种弱语言(相对于C,C#,JAVA而言),只要是计算机语言就会使用到条件判断式,而JavaScript作为一种"弱"语言,它的条件判断常常令人困惑不解,特别是有其它强语言编程经历的人来说,更是不可理喻!高手和无惑的人别取笑,我自己也曾经有一段时间郁闷过.先写一个例子吧: var s = "meizz"; if (s && s==true) {     alert("Is true

  • Javascript基础教程之if条件语句

    if 是常用语法之一,其格式如下 if(coditon) statement1 (else statement2) 其中,coditon可以是任何表达式,甚至不比是真正的布尔值,因为JavaScript会将其自动转化为布尔值. 如果条件执行结果为true,则执行statement1,如果条件为false,则执行结果statment2,(如果statement2存在,则else不是必须的) 每个条件语句可以是单行代码,也可以是代码块.以下是简单的举例 复制代码 代码如下: var iNumber

  • 浅谈JS如何写出漂亮的条件表达式

    多条件语句 多条件语句使用Array.includes 举个例子 function printAnimals(animal) { if (animal === "dog" || animal === "cat") { console.log(`I have a ${animal}`); } } console.log(printAnimals("dog")); // I have a dog 这种写法在条件比较少的情况下看起来没有问题,此时我们只

  • 浅谈JS正则表达式的RegExp对象和括号的使用

    RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

  • 浅谈js的解析顺序 作用域 严格模式

    一.javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的.我们看一下下面的代码. alert(a); var a = 1; 如果执行顺序是从上到下的,在上面弹出一个a,浏览器会认为从上到下执行的,那么当它alert(a)的时候,他就会发现没有这个东西,那么他就会报错,但是实际上他弹出来的结果是undefined.返回值是undefined说明a没有被定义也就是没有赋值.下面我来讲解一下javascript的解析顺序. 1.ES5中有声明意义的关键字

  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function()构造函数: var fnMethodName = new Function('x','alert(x);') // 由Function构造函数的参数个数可变.最后一个参数写函数体

  • 浅谈js中同名函数和同名变量的执行问题

    经测试未写成闭包形式的在同一个文件中或者不同的 js 文件中定义的同名函数,调用时会执行后面一个定义的函数.即使这样写也会执行后面一个即会弹出2: <script type="text/javascript"> function t(){ alert(1); } t(); function t(){ alert(2); } </script> 另外,定义的变量与css样式也是以后面的为准. 但是对于函数,经测试这样写却会执行前面的函数直接量即弹出1,暂时不知道是

  • 浅谈JS对象添加getter与setter的5种方法

    定义 getter 与 setter 1.通过对象初始化器在创建对象的时候指明(也可以称为通过字面值创建对象时声明) (function () { var o = { a : 7, get b(){return this.a +1;},//通过 get,set的 b,c方法间接性修改 a 属性 set c(x){this.a = x/2} }; console.log(o.a); console.log(o.b); o.c = 50; console.log(o.a); })(); 在 chro

  • 浅谈JS前端模块化的几种规范

    前言 有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端.客户端提供一个纯粹的js执行引擎,不需要 WebView 容器.iOS 端有成熟的JavaScriptCore.Android 可以使用 V8 引擎.这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运算能力,可以看成是一个阉割版的 Hybrid SDK 额外增加了一些数据处理能力. 问题结束了吗?处理逻辑的时候还需要用到2个库:cheer

  • 浅谈js二维码扫码登录是什么原理

    目录 二维码登录的本质 认识二维码 系统认证机制 扫描二维码登录的一般步骤 大概流程 二维码准备 扫描状态切换 状态确认 总结 前几天看了极客时间一个二维码的视频,写的不错,这里总结下 在日常生活中,二维码出现在很多场景,比如超市支付.系统登录.应用下载等等.了解二维码的原理,可以为技术人员在技术选型时提供新的思路.对于非技术人员呢,除了解惑,还可以引导他更好地辨别生活中遇到的各种二维码,防止上当受骗. 二维码,大家再熟悉不过了 购物扫个码,吃饭扫个码,坐公交也扫个码 在扫码的过程中,大家可能会

  • 浅谈JS读取DOM对象(标签)的自定义属性

    DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: <div id="test" class="hello"></div> var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为tes

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

随机推荐