物件陣列

JavaScript一切皆物件。通常JS陣列物件指的就是陣列（Array），只不過這個陣列（Array）也是物件罷了；

“ 物件陣列 ”，我也不清楚有沒有這個概念，我的理解就是由物件組成的陣列。如：

let arr = [
    { id:1, name:'a', value:'A' },
    { id:2, name:'b', value:'B' },
    { id:3, name:'c', value:'C' }
]

其實也就是一個數組，只是陣列的元素比較特殊，是物件。

1、map( ) 方法

map( ) 方法返回一個新陣列，新陣列中的元素為原陣列元素呼叫函式處理後的值。

map( ) 不會改變原始陣列。

let oldArr = [
    { id:1, name:'a', value:'A' },
    { id:2, name:'b', value:'B' },
    { id:3, name:'c', value:'C' }
];
let newArr = oldArr.map( item => item.name );
// oldArr不變，newArr = [ "a", "b", "c" ]

於是想要找出物件陣列中，指定鍵值等於指定值所對應的其他鍵值的值，我暈了，簡單點，就是找出如下 arr 物件陣列中，value = 3 所對應的 label 值（ 'c' ）。

就可以這麼做：

var arr = [ { value:1, label:'a' }, { value:2, label:'b' }, { value:3, label:'c' }, { value:4, label:'d' } ];
var myValue = 3 ;
var myLabel = arr.map( x=>{return x.value} ).indexOf(myValue) == -1 ? '' : arr[arr.map(x=>{return x.value}).indexOf(myValue)].label;

// myLabel = 'c'

2、forEach( ) 方法

forEach( )方法用於呼叫陣列的每個元素，並將元素傳遞給回撥函式。

let oldArr = [
    { id:1, name:'a', value:'A' },
    { id:2, name:'b', value:'B' },
    { id:3, name:'c', value:'C' }
];
let newArr = [];
oldArr.forEach( item => { newArr.push( item.name ) } );
// oldArr 不變，newArr = [ "a", "b", "c" ]

3、filter( ) 方法

filter( ) 方法建立了一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素，即過濾（filter）。

此方法不改變原陣列。

oldArr.filter(item => {return item.name < 'c'})
'a' < 'b' < 'c'
// 結果 ：[ {id: 1, name: "a", value: "A"},{id: 2, name: "b", value: "B"} ]

element-ui 中 <el-tabel> 元件 過濾表格資料的例子：

tableData: [
　　{
　　　　date: '2016-05-02',
　　　　name: '王小虎',
　　　　address: '上海市普陀區金沙江路 1518 弄'
　　},
　　{
　　　　date: '2016-05-04',
　　　　name: '李小二',
　　　　address: '上海市普陀區金沙江路 1517 弄'
　　}
]
tableData.filter( data => ! search || data.name.toLowerCase().includes(search.toLowerCase()) )
// 如果輸入的 search = '李'，那麼 tableData 過濾後的結果為：
[{ date: '2016-05-04', name: '李小二', address: '上海市普陀區金沙江路 1517 弄'}]