20 个超级有用的 JavaScript 技巧，让你的工作更轻松

// bad
if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") {
  //logic
}

// better
if (["abc", "def", "ghi", "jkl"].includes(x)) {
  //logic
}

// 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);

// 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.

//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"

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];
  }
}

// bad
let test;
function checkReturn() {
  if (!(test === undefined)) {
    return test;
  } else {
    return callMe("test");
  }
}

// better
function checkReturn() {
  return test ?? callMe("test");
}

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

// bad
if (test) {
  callMethod();
}

// better
test && callMethod();

<div> {this.state.isLoading && <Loading />} </div>

// 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]();

// 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

// bad
if (type === "test1") {
  test1();
} else if (type === "test2") {
  test2();
} else if (type === "test3") {
  test3();
} else if (type === "test4") {
  test4();
} else {
  throw new Error("Invalid value " + type);
}

// better
var types = {
  test1,
  test2,
  test3,
  test4,
};
types[type] && types[type]();

let test1 = "a";
let test2 = "b";

// bad
let obj = { test1: test1, test2: test2 };

// better
let obj = { test1, test2 };

// bad
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;

// better
const { test1, test2, test3 } = this.data;

// bad
const welcome = "Hi " + test1 + " " + test2 + ".";

// better
const welcome = `Hi ${test1} ${test2}`;

// bad
    const data =
        "hello maxwell this is a test\n\t" + "test test,test test test test\n\t";
  
   // better
    const data = `hello maxwell this is a test
                    test test,test test test test`;

// bad
if (arr.indexOf(item) > -1) {
  // item found
}
if (arr.indexOf(item) === -1) {
  // item not found
}

// better
if (~arr.indexOf(item)) {
  // item found
}
if (!~arr.indexOf(item)) {
  // item not found
}


//The bitwise (~) operator will return true (except for -1), 
//the reverse operation only requires !~. Alternatively, the includes() function can be used.

if (arr.includes(item)) {
  // true if the item found
}

// bad
let total = parseInt("583");
let average = parseFloat("32.5");

// better
let total = +"583";
let average = +"32.5";

async function getData() {
        const promises = [fetch("url1"), fetch("url2"), fetch("url3"), fetch("url4")];
        for (const item of promises) {
            // Print out the promise
            console.log(item);
        }

        // better
        for await (const item of promises) {
            // Print out the results of the request
            console.log(item);
        }
    }

const promises = [fetch("index.html"), fetch("https://does-not-exist/")];

const results = await Promise.allSettled(promises);

// Filter out successful requests
const successfulPromises = results.filter((p) => p.status === "fulfilled");

// Filter out failed requests and output the reason
const errors = results
.filter((p) => p.status === "rejected")
.map((p) => p.reason);

// bad
const swapWay = (arr, i, j) => {
  const newArr = [...arr];

  let temp = newArr[i];

  newArr[i] = list[j];
  newArr[j] = temp;

  return newArr;
};


//Since ES6, swapping values from different locations in an array has become much easier

// better
const swapWay = (arr, i, j) => {
  const newArr = [...arr];

  const [newArr[j],newArr[i]] = [newArr[i],newArr[j]];

  return newArr;
};

function randomNumber(max = 1, min = 0) {
  if (min >= max) {
    return max;
  }

  return Math.floor(Math.random() * (max - min) + min);
}

function getRandomColor() {
  const colorAngle = Math.floor(Math.random() * 360);
  return `hsla(${colorAngle},100%,50%,1)`;
}