想讓你的代碼變得更加優雅嗎？

做爲一名開發人員，工做以外的時間老是在學習新事物。做爲前端開發人員必須知道一些使咱們的代碼如何更優雅，工做更輕鬆的技巧，讓本身的代碼寫的更加高大上，下面這些技巧獲取能夠幫助到你。

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
const welcome = 'Hi ' + user + ' ' + name + '.'

//short
const welcome = `Hi ${user} ${name}`;

18. 對象屬性賦值

let test1 = 'a'; 
let test2 = 'b';
//Long
let obj = {test1: test1, test2: test2}; 

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

19. 字符串轉換成數字

//Long
let test1 = parseInt('123'); 
let test2 = parseFloat('12.3'); 

//Short
let test1 = +'123'; 
let test2 = +'12.3';

20. Array.find

當咱們確實有一個對象數組而且咱們想要根據對象屬性查找特定對象時，find方法確實頗有用。

const data = [{
        type: 'test1',
        name: 'abc'
    },
    {
        type: 'test2',
        name: 'cde'
    },
    {
        type: 'test1',
        name: 'fgh'
    },
]
// long
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); 

21. 多條件判斷

若是咱們有代碼來檢查類型，而且基於類型須要調用不一樣的方法，咱們能夠選擇使用多個else if或進行切換，有沒有更好的呢？

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

// short
const types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
 
let func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

22. 索引查找

當咱們迭代數組以查找特定值時，咱們確實使用indexOf()方法，若是咱們找到更好的方法呢？讓咱們看看這個例子。

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

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

按位~運算符將返回非-1的真實值。取反就像作~同樣簡單。另外，咱們也能夠使用include()函數：

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

23. Object.entries()

此功能有助於將對象轉換爲對象數組

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** ouput

[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]

**/

24. Object.values()

const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:

[ 'abc', 'cde']

**/

25. 重複一個字符串屢次

要一次又一次地重複相同的字符，咱們能夠使用for循環並將它們添加到同一循環中，可是若是咱們有一個簡寫方法呢？

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

//short 
'test '.repeat(5);

26. 在數組中查找最大值和最小值

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