作为一名开发人员，工作之外的时间总是在学习新事物。作为前端开发人员必须知道一些使我们的代码如何更优雅，工作更轻松的技巧，让自己的代码写的更加高大上，下面这些技巧获取可以帮助到你。

1. 多个条件判断

// long
if( x === 'a' || x === 'b' || x === 'c' || x === 'd'){
  // todo
}

// short
if(['a', 'b', 'c', 'd'].includes(x)){
  // todo
}

2. 三目运算符

当我们仅使用一些一对if/esle条件判断时, 可以简单地使用三元运算符来实现. 若有多对if/else条件判断,则不建议使用

// long
let flag
if(x > 10){
  flag = true
}else {
  flag = false
}
// short
let flag = x > 10 ? true : false

3. 变量声明

当我们要声明两个具有共同值或共同类型的变量时,可以使用此简写形式

// long
let a
let b = 1

// short
let a, b = 1

4. 空/未定义检查和分配默认值

当我们需要创建新变量时, 有时需要检查为其值引用的变量是否为null或undefined, 可以考虑如下实现:

// long
if(test1 !== null || test1 !== undefined || test1 !== ""){
  let test2 = test1;
}else {
  let test2 = ''
}

// short
let test2 = test1 || ''

5. 给多个变量赋值

当我们处理多个变量并希望将不同的值分配给不同的变量时，此法非常有用。

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

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

6. 赋值运算符的简写

我们在编程中处理很多算术运算符。这是将运算符分配给JavaScript变量的有用技术之一

// long
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;

// short
test1++;
test2--;
test3 *= 20;

7. 真值判断

// long
if (test1 === true)

// short
if (test1)

8. 多条件的与/或运算

//long 
if (test1) {
 callMethod(); 
} 

//short 
test1 && callMethod();

9. forEath

// long
for (var i = 0; i < testList.length; i++)

// short
testList.forEach(item => console.log(item))

10. 比较返回值

// long
let test;
function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return callMe('test');
    }
}
var data = checkReturn();
console.log(data); //output test
function callMe(val) {
    console.log(val);
}

// short
function checkReturn() {
    return test || callMe('test');
}

11. 箭头函数

//long 
function add(a, b) { 
   return a + b; 
} 
//short 
const add = (a, b) => a + b;

12. 短函数调用

// long
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}

// short
(test3 === 1? test1:test2)();

13. switch

我们可以将条件保存在键值对象中，并可以根据条件使用。

// long
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // And so on...
}

// short
var data = {
  1: test1,
  2: test2,
  3: test
};

data[something] && data[something]();

14. 默认参数

//long
function add(test1, test2) {
  if (test1 === undefined)
    test1 = 1;
  if (test2 === undefined)
    test2 = 2;
  return test1 + test2;
}

//short
add = (test1 = 1, test2 = 2) => (test1 + test2);
add() //output: 3

15. 参数必传校验

// long
function hello(obj){
  let {name, age} = obj
  if(!name){
    console.warn('name is null, pls check!')
    return ''
  }
  if(!age){
    console.warn('age is null, pls check!')
    return ''
  }
  return `${name}: ${age}`
}

// short
function hello(obj){
  let {name = required('name'), age = required('age')} = obj
  return `${name}: ${age}`
}

function required(key){
  console.warn(`${key} is null, pls check!')
}

16. 扩展运算符

//long
const data = [1, 2, 3];
const test = [4 ,5 , 6].concat(data);


//short
const data = [1, 2, 3];
const test = [4 ,5 , 6, ...data];
console.log(test); // [ 4, 5, 6, 1, 2, 3]

对于克隆, 我们也可以使用扩展运算符

//long
const test1 = [1, 2, 3];
const test2 = test1.slice()

//short
const test1 = [1, 2, 3];
const test2 = [...test1];

17. 模板字符串

如果您厌倦了在单个字符串中使用+来连接多个变量，可以考虑用这种方式

//long