JavaScript 简写技巧：

---

一、多个字符串检查

// 普通写法
// const isVowel = (letter) => {
//     if (letter === "red" || letter === "green" ||
//		letter === "yellow" || letter === "pink" || letter === "white") {
//         return true;
//     }
//     return false;
// };


// 简写方法
const isVowel = (letter) => ["red", "green", "yellow", "pink","white"].includes(letter);
isVowel('red') ? console.log(1) : console.log(2)
console.log(isVowel('red'));

二、For-of和For-in循环

For-of 和 For-in 循环是迭代 array 或 object 的好方法，因为无需手动跟踪 object 键的索引。

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

// 普通写法
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  // ...
}

// 简写方法
for (const element of arr) {
  // ...
}

const obj = {a: 1,b: 2,c: 3,};

// 普通写法
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  // ...
}

// 简写方法
for (const key in obj) {
  const value = obj[key];
  // ...
}

三、Falsey（假值）检查

// 普通写法
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};

// 简写方法
const isFalsey = (value) => !value;

四、三元运算符

// 普通写法
let info;
if (value < minValue) {
  info = "Value is too small";
} else if (value > maxValue) {
  info = "Value is too large";
} else {
  info = "Value is in range";
}

// 简写方法
const info =value < minValue ? "Value is too small": 
		    value > maxValue ? "Value is too large" : "Value is in range";

五、函数调用

function f1() {
  // ...
}
function f2() {
  // ...
}

// 普通写法
if (condition) {
  f1();
} else {
  f2();
}

// 简写方法
(condition ? f1 : f2)();

六、Switch简写

const dayNumber = new Date().getDay();

// 普通写法
let day;
switch (dayNumber) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

// 简写方法
const days = {
  0: "Sunday",
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
  4: "Thursday",
  5: "Friday",
  6: "Saturday",
};
const day = days[dayNumber];

七、回退值

// 普通写法
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}

// 简写方法
const name = user?.name || "Anonymous";

八、 Object.values()获取对象键值与 Object.keys()获取对象键名

const data = { test1: 'abc', test2: 'cde' };
const values = Object.values(data);
const keys = Object.keys(data);
console.log(values);//[ 'abc', 'cde']

九、使用filter方法过滤原数组，形成新数组

// bad
let arr = [1, 3, 5, 7],
    newArr = []
for (let i = 0; i < arr.length; i ++) {
    if (arr[i] > 4) {
        newArr.push(arr[i])
    }
}

// good
let arr = [1, 3, 5, 7]
let newArr = arr.filter(n => n > 4) // [5, 7]

十、使用map对数组中所有元素批量处理，形成新数组

// bad
let arr = [1, 3, 5, 7],
    newArr = []
for (let i = 0; i < arr.length; i ++) {
    newArr.push(arr[i] + 1)
}

// good
let arr = [1, 3, 5, 7]
let newArr = arr.map(n => n + 1) // [2, 4, 6, 8]

十一、解构数组进行变量值的替换

// bad
let a = 1,
    b = 2
let temp = a
a = b
b = temp

// good
let a = 1,
    b = 2
[b, a] = [a, b]

十二、Array.find 缩写法

const data = [{
        type: 'test1',
        name: 'abc'
    },
    {
        type: 'test2',
        name: 'cde'
    },
    {
        type: 'test1',
        name: 'fgh'
    },
]function findtest1(name) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].type === 'test1' && data[i].name === name) {
            return data[i];
        }
    }
}
//Shorthand
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }

十三、解构赋值缩写法

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

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

十四、查询条件缩写法

// Longhand
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);
}
// Shorthand
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
 
var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

十五、把一个字符串重复多次

//longhand 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 
console.log(str); // test test test test test 
//shorthand 
'test '.repeat(5);

十六、找出一个数组中最大和最小的值

const arr = [1, 2, 3]; 
Math.max(…arr); // 3
Math.min(…arr); // 1

十七、获取字符串中的字符

let str = 'abc';
//Longhand 
str.charAt(2); // c
//Shorthand 
//注意：如果事先知道目标字符在字符串中的索引，我们可以直接使用该索引值。如果索引值不确定，运行时就有可能抛出 undefined。
str[2]; // c

十八、两个位运算符缩写

// Longhand
Math.floor(1.9) === 1 // true

// Shorthand
~~1.9 === 1 // true  两个按位非运算符只适用于 32 位整型

十九、幂运算的缩写法

//longhand
Math.pow(2,3); // 8

//shorthand
2**3 // 8

二十、数组里面的参数放到一个对象里面：

param[item.columnName] = item.value

if (that.customFieldList && that.customFieldList.length > 0) {
   that.customFieldList.forEach(item => {
     if (item.value && !Array.isArray(item.value)) {
         param[item.columnName] = item.value
     } else if (item.value && Array.isArray(item.value)) {
         param[item.columnName] = String(item.value)
     }
   })
}