JS 对象数组 -- 那些棘手的方法

对象数组

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 弄'}]