五个JavaScript小技巧

这些JavaScript小技巧都是偷来的，没有特殊的顺序，只是一个简单的集合。

1、提前退出

function transformData(rawData) {
  // 检查有没有数据
  if (!rawData) {
    return [];
  }

  // 检查具体情况
  if (rawData.length == 1) {
    return [];
  }

  // 此处显示实际功能代码
  return rawData.map((item) => item);
}

采用先检查无效用例并从该函数返回的方法，否则它将继续执行函数的预期用例并执行，避免意外和不必要的代码处理。

2、Switch切换到对象字面量(Object Literal)

//Switch
let createType = null;
switch (contentType) {
  case "post":
    createType = () => console.log("creating a post...");
    break;
  case "video":
    createType = () => console.log("creating a video...");
    break;
  default:
    createType = () => console.log('unrecognized content type');
}

createType();

// 对象字面量Object literal
const contentTypes = {
  post: () => console.log("creating a post..."),
  video: () => console.log("creatinga  video..."),
  default: () => console.log('unrecognized content type')
};

const createType = contentTypes[contentType] || contentTypes['default'];
createType();

switch进行case时经常会忘记break。这样就会导致意想不到的问题。

• 不必担心case或break
• 更容易阅读并快速了解正在发生的事情
• 对象字面量很容易写
• 更少的代码

3、一次循环生成两个数组

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;
}, [[], []]);
console.log(truthyValues);//[15, 23, 32]
console.log(falseyValues);//[2, 8, 1]

有时为获得符合某个条件的数据需要循环一次，然而在另一个条件下再次这样做。这意味着在一个数组上循环两次，但上例只需要循环一次可以生成多个数组。

4、没有'foo'变量

// bad
const foo = y && z;

// good
const isPostEnabled = isPost && postDateValid;

这一点似乎很明显，但我敢肯定我们都见过这样做的代码。花点时间，尽你所能恰当地说出一些事情的名字。

这对于工作专业人员或处于教育他人位置的人员尤其重要。变量命名应该用来帮助解释和给出代码中正在发生的事情的上下文。

应该有人能够阅读您的代码，并松散地开始理解试图解决的问题。

5、嵌套三元操作符

let result = null;
if (conditionA) {
  if (conditionB) {
    result = "A & B";
  } else {
    result = "A";
  }
} else {
  result = "Not A";
}

const result = !conditionA
  ? "Not A"
  : conditionB
  ? "A & B"
  : "A";

if、else更容易阅读，嵌套三元操作符可以根据你自己的喜好自行选择使用。