在$ .each函數內使用條件創建數組

Question

我想遍歷數組的元素，如果條件爲真，我想創建一個新數組。

例如：我有一個名爲Messages的數組，它的元素是對象，我想檢查id屬性是否等於5.如果是，則創建一個只包含此對象的新數組。

messages = [{ 
    "id": 10, 
    "body": "hello!" 
}, { 
    "id": 21, 
    "body": "hola!" 
}, { 
    "id": 5, 
    "body": "ciao!" 
}]; 

var message5 = []; 
var dataObj = {}; 

$.each(messages, function(index, value) { 
    if (value.id == 5) { 
    dataObj[index] = value; 
    } 
}); 

message5.push(dataObj[index]); 

我想我的結果是：

message5 = [ 
{ 
    "id": 5, 
    "body": "ciao!" 
} 
]  

Answer 1

嘗試在這種情況下使用Array.prototype.filter，

var message5 = messages.filter(function(itm){ 
    return itm.id == 5; 
}); 

console.log(message5); //[{"id": 5,"body": "ciao!"}] 

如果你想讓它更簡潔，那麼你可以使用ES6 Arrow function ，

var message5 = messages.filter(itm => itm.id == 5); 
console.log(message5); //[{"id": 5,"body": "ciao!"}] 

不過需要注意的是，上面的代碼相似，

var message5 = messages.filter(function(itm){ 
    return itm.id == 5; 
}.bind(this)); //Arrow function will automatically bind its lexical scope to it. 

Answer 2

嘗試使用過濾器：

var messages = [{ 
 
    "id": 10, 
 
    "body": "hello!" 
 
}, { 
 
    "id": 21, 
 
    "body": "holla!" 
 
}, { 
 
    "id": 5, 
 
    "body": "ciao!" 
 
}]; 
 
var message5 = messages.filter(function(message) { 
 
    return message.id == 5; 
 
}); 
 
alert(JSON.stringify(message5));

Answer 3

嘗試

var newArr = messages.filter(function(value){ 

    return value.id == 5; 

}); 

Answer 4

使用濾鏡陣列（）方法

messages.filter(function(msg){return msg['id'] === 5}) 

Answer 5

完全jQuery的方式可能是：

$(function() { 
 
    var messages = [{ 
 
    "id": 10, 
 
    "body": "hello!" 
 
    }, { 
 
    "id": 21, 
 
    "body": "holla!" 
 
    }, { 
 
    "id": 5, 
 
    "body": "ciao!" 
 
    }]; 
 
    var dataObj = []; 
 

 
    $.each(messages, function (index, value) { 
 
    if (value.id == 5) { 
 
     dataObj.push(messages[index]); 
 
    } 
 
    }); 
 
    $('#result').text(JSON.stringify(dataObj, 4, 4)); 
 
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 

 
<textarea id="result" style="width: 250px;height: 100px"></textarea>