20 个超级有用的 JavaScript 技巧,让你的工作更轻松(上)

上一篇 / 下一篇  2022-11-08 13:13:06

  2022年度软件测试行业的趋势预测:如果你也想了解更多发展趋势,那就点击下方链接填写调查问卷吧!助力测试行业发展,还能获得精美礼包哦~链接:http://vote.51testing.com/

  1. 多条件 if 语句
  将多个值放入一个数组中,然后调用该数组的 include 方法。
  // bad
  if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") {
    //logic
  }
  // better
  if (["abc", "def", "ghi", "jkl"].includes(x)) {
    //logic
  }
  2. 简化 if true...else 条件表达式
  // bad
  let test: boolean;
  if (x > 100) {
    test = true;
  } else {
    test = false;
  }
  // better
  let test = x > 10 ? true : false;
  //or 
  let test = x > 10;
  console.log(test);
  3. 假值(undefined, null, 0, false, NaN, empty string)检查
  当我们创建一个新变量时,有时我们想检查引用的变量是否是一个假值,例如 null 或 undefined 或空字符串。JavaScript 确实为这种检查提供了一个很好的快捷方式——逻辑 OR 运算符 (||)
  || 仅当左侧为空或 NaN 或 null 或 undefined 或 false 时,如果左侧操作数为假,则将返回右侧操作数,逻辑或运算符 (||) 将返回右侧的值。
  // bad
  if (test1 !== null || test1 !== undefined || test1 !== "") {
    let test2 = test1;
  }
  // better
  let test2 = test1 || "";
  // bad
  if (test1 === true) or if (test1 !== "") or if (test1 !== null)
  // better
  if (test1){
    // do some
  }else{
    // do other
  }
  //Note: If test1 has a value, the logic after if will be executed. 
  //This operator is mainly used for null, undefined, and empty string checks.
  4. null/undefined 检查和默认赋值
  //null checking and default assignmentlet test1 = null;let test2 = test1 ?? "";
  console.log("null check", test2); // output empty string ""
  //undefined checking and default assignmentconst test = undefined ?? "default";console.log(test);// expected output: "default"
  5. 获取列表中的最后一项
  在其他语言中,此功能被制成可以在数组上调用的方法或函数,但在 JavaScript 中,你必须自己做一些工作。
  let array = [0, 1, 2, 3, 4, 5, 6, 7];
  console.log(array.slice(-1)) >>> [7];
  console.log(array.slice(-2)) >>> [6, 7];
  console.log(array.slice(-3)) >>> [5, 6, 7];
  function lastItem(list) {
    if (Array.isArray(list)) {
      return list.slice(-1)[0];
    }
    if (list instanceof Set) {
      return Array.from(list).slice(-1)[0];
    }
    if (list instanceof Map) {
      return Array.from(list.values()).slice(-1)[0];
    }
  }
  6.比较后返回
  // bad
  let test;
  function checkReturn() {
    if (!(test === undefined)) {
      return test;
    } else {
      return callMe("test");
    }
  }
  // better
  function checkReturn() {
    return test ?? callMe("test");
  }
  7. 使用可选的链接运算符 -?。
  也称为链判断运算,它允许开发人员读取深度嵌套在对象链中的属性值,而无需验证每个引用,当引用为空时,表达式停止计算并返回 undefined。
  const travelPlans = {
          destination: "DC",
          monday: {
              location: "National Mall",
              budget: 200,
          },
      };
      // bad
      const res = travelPlans && travelPlans.tuesday && travelPlans.tuesday.location && travelPlans.tuesday.location.href;
      console.log(res);  // Result: undefined
      // better
      const res1 = travelPlans?.tuesday?.location?.href;
      console.log(res1);  // Result: undefined
  8. 多个条件的 && 运算符
  要仅在变量为真时调用函数,请使用 && 运算符。
  // bad
  if (test) {
    callMethod();
  }
  // better
  test && callMethod();
  当你想在 React 中有条件地渲染组件时,这对于使用 (&&) 进行短路很有用。例如:
  <div> {this.state.isLoading && <Loading />} </div>
  9.开关简化
  我们可以将条件存储在键值对象中,并根据条件调用它们。
  // bad
  switch (data) {
    case 1:
      test1();
      break;
    case 2:
      test2();
      break;
    case 3:
      test();
      break;
      // And so on...
  }
  // better
  var data = {
    1: test1,
    2: test2,
    3: test,
  };
  // If type exists in data, execute the corresponding function
  data[type] && data[type]();
  10.默认参数值
  // bad
  function add(test1, test2) {
    if (test1 === undefined) test1 = 1;
    if (test2 === undefined) test2 = 2;
    return test1 + test2;
  }
  // better
  add = (test1 = 1, test2 = 2) => test1 + test2;
  add(); //output: 3

TAG: 软件开发 Java

 

评分:0

我来说两句

Open Toolbar