js代码优化技巧

import { var1, obj } from './module1.js'; // import变量和下面声明变量重复
const { var1 } = obj // 解构对象出现也会出现变量重复
let var1 = [1,2,3]

import { var1 as var1FromImport, obj } from './module1.js';
const { var1: var1FromObj } = obj
let var1 = [1,2,3]

// Longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}

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

// Longhand
let test: boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}

// Shorthand
let test = (x > 10) ? true : false;
//或者我们也可以直接用
let test = x > 10;
console.log(test);

let x = 300,
test2 = (x > 100) ? 'greater than 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

// Longhand
if (test1 !== null || test1 !== undefined) {
    let test2 = test1;
}

// Shorthand
let test2 = test1 || '默认值'; // || test1为任何假值（如0、false、空字符串等）时就返回
let test3 = test1 ?? '默认值'; // ?? 空值合并操作符 test1严格等于null或undefined
let test3 = test1 && '默认值'; 

const name = obj && obj.name;

const name = obj?.name ?? '默认值';

//Longhand 
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;

//Shorthand 
let [test1, test2, test3] = [1, 2, 3];

const hasCar = true
const people = {
  name: '张三',
  age: 18
}
if(hasCar){
  people.hasCar = true
}

const hasCar = true
const hasCarObj = hasCar ? {
  hasCar: true
} : {}
const people = {
  name: '张三',
  age: 18,
  ...hasCarObj
}

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(item => item % 2 === 0).map(item => item * 2);
// filteredArr : [4, 8]

const arr = [1, 2, 3, 4, 5];

const reducedArr = arr.reduce((acc, item) => {
  if (item % 2 === 0) {
    acc.push(item * 2);
  }
  return acc;
}, []);
// reducedArr: [4, 8]