JavaScript 的几个小技巧

arashicage 发布于2019-08-23 18:38 / 3045人阅读

摘要：的几个小技巧尽早将无效的用例尽早返回，避免意外和不必要的代码处理。要添加一种新的就需要再添加一个分支判断多重判断时使用或者，避免过长逻辑判断改进后一次循环两个数组

JavaScript 的几个小技巧 1. 尽早 return

function transformData(rawData) {
  // check if no data
  if (!rawData) {
    return [];
  }

  // actual function code goes here
  return rawData.map((item) => item);
}

将无效的用例尽早返回，避免意外和不必要的代码处理。

2. 用对象映射方式替代分支语句

function getDrink (type) {
  if (type === "coke") {
    type = "Coke";
  } else if (type === "pepsi") {
    type = "Pepsi";
  } else if (type === "lemonade") {
    type = "Lemonade";
  } else if (type === "fanta") {
    type = "Fanta";
  } else {
    // acts as our "default"
    type = "Unknown drink!";
  }
  return "You"ve picked a " + type;
}

// Object literal
function getDrink (type) {
  var drinks = {
    "coke": "Coke",
    "pepsi": "Pepsi",
    "lemonade": "Lemonade",
    "default": "Default item"
  };
  return "The drink I chose was " + (drinks[type] || drinks["default"]);
}

分支语句的处理方式导致函数代码量大，要覆盖所有的逻辑分支。

要添加一种新的 type 就需要再添加一个分支判断

3. 多重判断时使用 Array.includes 或者 !~Array.indexOf()，避免过长逻辑判断

function testFun(fruit) {
  if (fruit == "apple" || fruit == "strawberry" || fruit === "cherry") {
    console.log("red");
  }
}

// ----- 改进后 ------
function testFun(fruit) {
  const fruits = ["apple", "strawberry", "cherry"];
  if (redFruits.includes(fruit)) {
    console.log("red");
  }
   
  // if (!~redFruits.indexOf(fruit)) {
  //   console.log("red");
  // }
}

4. 一次循环两个数组

const exampleValues = [2, 15, 8, 23, 1, 32];
const [truthyValues, falseyValues] = exampleValues.reduce((arrays, exampleValue) => {
  if (exampleValue > 10) {
    arrays[0].push(exampleValue);
    return arrays;
  }

  arrays[1].push(exampleValue);
  return arrays;
}, [[], []]);

私有云混合云用到的几个函数云主机的几个品牌选云服务器的几个注意和需求 JAVASCRIPT技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105600.html

关于PHP数组的几个小技巧

摘要：我们知道在中多了几个对数组使用的新特性。这里我们举两个实际的例子吧例子一仔细体会。例子二看到了吧，可以直接在循环中指定变量，然后在循环体中来使用，是不是很简单好了本文就这些内容了，欢迎继续关注。更多知识，请前往我们知道在PHP7.1中多了几个对数组使用的新特性。这里我们举两个实际的例子吧：例子一： // PHP 7.1+ $options = [enabled => true, ...

chenjiang3 2019-07-01 12:26 评论0 收藏0
Pandas数据类型转换的几个小技巧

摘要：利用的一些辅助函数进行类型转换的函数和复杂的自定函数之间有一个中间段，那就是的一些辅助函数。这些辅助函数对于某些特定数据类型的转换非常有用如。利用Pandas进行数据分析时，确保使用正确的数据类型是非常重要的，否则可能会导致一些不可预知的错误发生。笔者使用Pandas已经有一段时间了，但是还是会在一些小问题上犯错误，追根溯源发现在对数据进行操作时某些特征列并不是Pandas所能处理的...

luckyw 2019-07-30 16:26 评论0 收藏0
JavaScript几个小技巧

摘要：反之左操作数值为真，整个表达式的值则依赖于右操作数。以上的这种特性称为运算符的短路行为，根据这个特性我们可以有效减少语句的使用，还可以增强程序的健壮性。数值上一个空串，会转换为字符串字符串减会转换为数值，如失败则返回。 &&、||运算的高级用法在JavaSript中，&&运算符除了可以对布尔值进行与（AND）运算之外，还可以对真假值进行与（AND）运算。JavaScript中所有...

Apollo 2019-08-21 11:44 评论0 收藏0
正则系列——JavaScript正则表达式基础语法巩固篇

摘要：基础语法巩固正则表达式引擎根据正则去匹配字符的时候，是通过检查索引的方式。妻原配就是好，可以直接使用正则表达式调用它。下面解释一下上面这些常用的元字符查找单个字符，除了换行和行结束符。正则系列文章整理到了上一章内容：正则表达式实战篇知识回顾前2章分别学习了正则表达式入门技巧，以及遇到正则需求该如何去分析问题，还有正则表达式实战的一些场景解释。这一章内容偏向理论，推荐你点击开头的...

phodal 2019-08-22 11:09 评论0 收藏0