JavaScript的程式碼簡潔技巧

這篇文章主要是想和大家一起學習一下，工作之中有哪些讓我們眼前一亮的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: &#39;帽子&#39;, 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: &#39;帽子&#39;, price: 50, id: &#39;&#39; },]// 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. 傳回所有沒有父級欄位（pid）的資料
3. 如果大家有更多類似的想法和操作請一定要留言哦

相關免費學習推薦：

javascript#(影片)

以上是JavaScript的程式碼簡潔技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！