一些有效的JS小技巧

本文主要和大家聊一些有效的JS小技巧,需要的朋友可以參考下，希望能幫助到大家。

1、三元運算子

當你在專案有想寫if...else語句是，在不是多重判斷的情況下，可以考慮三元操作來取代

let a = 1, answer = null
if( a > 5 ) {
    answer = '大帅比'
}else{ 
    answer = '前端强无敌'
}
简写：answer = a > 5 ?  '大帅比' : '前端强无敌'

2、for簡化（ES6提供的新方法）

for(let i = 0; i < arr.length; i++){}
简写：for (let [index, item] of arr.entries()) {
        index为下标，item为每一项内容
}

3、箭頭函數（es6）

function test （）{ console.info（name） }
setTimeout（function() { console.info(''okay) }， 1500）
arr.forEach(function (item) {    
    console.info(item)
})
简写： let test = （args） => {  console.info(name) }
setTimeout(() => { console.info('okay') }, 1500)
arr.forEach(item => console.info(item))

看起來比較簡單，箭頭函數使用時候this是不會改變的~！

4、擴充運算子

數組合併：

const a = [1, 3, 5]
const nums = [2, 4, 6].concat(a);

陣列複製： //因為陣列為引用類型，很多時候需要clone一個單獨的進行操作

const arr = [1, 2, 3, 4]
cons arr2 = arr.slice()
简写： const nums = [2, 4, 6,  ...a]  // [2, 4, ...a, 6]

a可以插入在任何位置而不是只能尾部追加，比concat更加便捷！

物件中的使用：

const obj =  { a:1 , b:2, c:3,  ...obj2 } =  { a:1 , b:2, c:3,  d:5, e: 6}
obje = {d:5, e: 6}

5、物件屬性簡寫

當key value相同時

const obj = {x:x，y:y}
简写：cont obj = {x，y}

6、當行字串簡寫

const learn = 'study vue react rn nih\n\t'
                     +  'study vue react rn nih\n\t'
                     +  'study vue react rn nih\n\t'
                     +  'study vue react rn nih\n\t'
                     +  'study vue react rn nih\n\t'
简写：const learn = `study vue react rn nih
                                  study vue react rn nih
                                 study vue react rn nih
                                 study vue react rn nih
                                study vue react rn nih`

7、模板字串

const url = 'http://ab.cc.com/' + data + '/beta/info'
简写：const url = `http://ab.cc.com/${data}/beta/info`

${}直接放入變數即可，用起來十分順手~記得是反引號！ ！ ！

8、Array.find

想要在某個數組中找到需要的數據，需要循環操作，在ES6中find可以簡化其操作

cont data = [
{'type': 'dog',  'color': 'red'},
{'type': 'cat', 'color: 'white'},
{'type': 'bird', 'color': 'blue'}
]
function findeClor(color) {
        for(let i = 0; i < data.length; i ++ ) {
                if(data[i].type== &#39;cat&#39; && data[i].color== color) {
                        return data[i]
                } 
        }
}
简写：let cat = data.find(item => item.type == &#39;cat&#39; && item.color== &#39;red&#39;)

9、偽數組轉換為真數組（偽數組是沒有interator介面）

let p = document.getElementById('p')

p是一個偽數組，不能使用forEach之類的方法進行遍歷，只能使用較為麻煩的for迴圈

let p = Array.from(p)  或者 let p = [...p]

此時的p就是一個真正可遍歷的陣列

10、陣列去重,Set

let a = [ 2, 3, 1, 2]

new Set() 傳回的是偽數組，需要使用擴充運算子將其轉換我真真的數組，Array.from()也是不錯的選擇

let b = [... new Set(a)]   //  [2, 3, 1]

11、預設參數

#function  test(a, b, c = '大帥比'， d = false){

}

test('前端'， '北媽')

#沒有傳入c，d兩個參數，這時候c預設就是'大帥比'，d預設是false

#12、強制參數

JS中，函數若沒有傳遞參數，參數會預設為undefined。這時可能會導致程式異常，需要一個異常拋出

function(data) {
        if(data === undefined) {
                throw new Error('Missing')   
        } 
        return bar
}
简写:
mandatory = () => {
        throw new Erroe ('Missing')
}
foo = (bar = mandatory()) => {
        return bar
}

以上是一些有效的JS小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！