JavaScript的編碼技巧

小編給大家分享一下JavaScript的編碼技巧，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

注意：下面的代碼對比沒有絕對的正確和錯誤，有些寫法的使用場景會比較單一，根據大家的習慣和喜好判斷即可，如果有更好或不同意見歡迎留言交流哦～

1. 短路操作：

當我們遇到這樣的情況的時候，你會是

const res1 = item.a ? item.a : item.b // 看起來很是簡潔const res2 = item.a ? item.b : item.a // 看起來很是簡潔

還是利用js邏輯運算來實現呢？

const res1 = item.a || item.b;const res1 = item.a && item.b;

2. 通過條件判斷給變量賦值布爾值的正確姿勢：

當我們需要比較單一的值來獲取結果的時候，利用直接的運算，要不if判斷要簡潔的多～

let res;if(a === '余光'){
	res = true }else{
	res = false;}// good?const res = a === '余光'

3. 在if中判斷數組長度不為零的正確姿勢：

場景：如果數組內存在元素，則進行操作：

// badif (arr.length !== 0) {
    // todo}// goodif (arr.length) {
    // todo}

以此類推，當我們需要判斷數組的長度為為空時：

if(!arr.length){
	// todo}

4. 使用includes簡化if判斷：

場景：如果參數等于1、2、3、4，就進行下一步操作

寫第一版代碼：

if(a === 1 || a === 2 || a === 3 || a ===4){
	// todo}

看完感覺異常的頭疼，遂修改為：

if([1,2,3,4].includes(a)){
	// todo}

5. 使用some判斷是否存在符合條件的值：

場景：尋找是否存在價格小于n的商品

const itemList = [
	{name: '手機', price: 1000},
	{name: '手機殼', price: 10},
	{name: '帽子', price: 50},]function checkData(n){
	for(let i = 0; i < item.length; i++){
		if(item.price < n){
			return true;
		}
	}
	return false;}

方法寫完了，但既然js為我們提供了那么多數組的方法，用起來：

const itemList = [
	{name: '手機', price: 1000},
	{name: '手機殼', price: 10},
	{name: '帽子', price: 50},]const checkData = (n) => itemList.some(item => item.price < n)

再次優化

const checkData = (n, itemList) => itemList.some(item => item.price < n)

6. 使用filter方法過濾原數組，形成新數組

情景：剔除某些不需要的元素，例如每一條數據的id是之后操作的必須數據，為了剔除缺陷數據，我們會這么做：

const data = [
    { name: '手機', price: 1000, id: 1 },
    { name: '手機殼', price: 10, id: 2 },
    { name: '帽子', price: 50, id: '' },]// badlet newArr = []for (let i = 0; i < data.length; i ++) {
    if (data.id) {
        newArr.push(arr[i])
    }}

掌握“過濾”思想，我們這樣處理：

const afterData = data.filter(item => item.id);

7. 使用map對數組內的元素進行批量處理：

情景：在涉及到價格的交互中，我們拿到的價格字段通常是以分為單位的，我們要怎么做展示呢？

const data = [10000, 20000, 980000]const afterData = data.map(price => price / 100)

8. 解構數組進行變量值的替換

情景：需要將兩個值進行交換

// badlet a = 1,
    b = 2let temp = a
a = b
b = temp// goodlet a = 1,
    b = 2[b, a] = [a, b]

9. 解構融到代碼中：

情景：獲取對象中的某個元素，并設置默認值

寫第一版代碼：

// badsetForm (person) {
    this.name = person.name    this.age = person.age 
}// goodsetForm ({name = '余光', age}) {
    this.name = name    this.age = age 
}

10. 多個方法合體時都能做什么？（舉例一）

這是最后一條代碼簡潔思路，拿一個具體的場景距離，拋磚引玉，歡迎大家在評論區留言～

場景：

前端拿到的數據是

data = [
    { id: 1, name: '一級標題-1' },
    { id: 2, name: '一級標題-2' },
    { id: 3, name: '二級標題-1', pid: 1 },
    { id: 3, name: '一級標題-3' },
    { id: 3, name: '二級標題-2', pid: 2 },]

我們需要形成及聯關系，如：

needData = [
    {
        id: 1,
        name: '一級標題-1',
        children: [
            { id: 3, name: '二級標題-1', pid: 1 }
        ]
    },
    {
        id: 2,
        name: '一級標題-2',
        children: [
            { id: 5, name: '二級標題-2', pid: 2 }
        ]
    },
    { id: 4, name: '一級標題-3' },]

于是我借助數組提供的多個api：

newList = data.reduce((result, item, _, arr) => {
    if (!item.pid) {
        return [...result, item];
    }
    const parentItem = arr.find(({ id }) => id === item.pid);
    if (parentItem) {
        const { children = [] } = parentItem;
        parentItem.children = [...children, item];
    }
    return result;}, []);

思路：

1. 尋找存在父級的元素

2. 將它發到正確的位置上

3. 返回所有沒有父級字段（pid）的數據

如果大家有更多類似的思路和操作請一定要留言哦

看完了這篇文章，相信你對“JavaScript的編碼技巧”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！