json数组怎么写(js创建json对象数组)-众学网

我每周平均处理 JSON 数据 18 次，但几乎每次我都需要 Google 搜索特定的方法，如果有一本终极指南可以为我提供答案就好了??

在本文中，我将向你展示在 JavaScript 中使用对象数组的基础知识。

如果你曾经使用过 JSON 结构，那么你就已经使用过 JavaScript 对象。从字面意思看，JSON 代表 JavaScript Object Notation。

创建一个对象很简单:

{“color”:”purple”,”type”:”minivan”,//注册日期”registration”:newDate(‘2012-02-03’),//载人数”capacity”:7}

该对象代表一辆汽车。汽车可以有多种类型和颜色，并且每个对象代表一辆特定的汽车。

大多数时候你都是从外部服务获取此类数据，但是有时你需要手动创建对象及其数组，就像我创建这个电子商店时一样：

每个类别列表项在 HTML 中看起来像这样:

但我不想将此代码重复 12 次，因为这很难维护。

创建对象数组

让我们回到汽车的话题上来。我们来看看这些车：

我们用数组表示它们:

letcars=[{“color”:”purple”,”type”:”minivan”,”registration”:newDate(‘2017-01-03’),”capacity”:7},{“color”:”red”,”type”:”stationwagon”,”registration”:newDate(‘2018-03-03’),”capacity”:5},{…},…]

对象数组并非始终保持不变，我们总是需要操作它们。因此，让我们看一下如何将新对象添加到已经存在的数组中。

在头部添加一个新对象 – Array.unshift

在头部添加一个对象, 使用 Array.unshift。

letcar={color:’red’,type:’cabrio’,registration:newDate(‘2016-05-02’),capacity:2,};cars.unshift(car);在尾部添加一个新对象 – Array.push

添加一个对象到尾部的位置，使用 Array.push。

letcar={color:’red’,type:’cabrio’,registration:newDate(‘2016-05-02’),capacity:2,};cars.push(car);添加一个新对象到中间位置 – Array.splice

添加一个对象到中间位置，使用 Array.splice。此方法非常方便，因为它也可以删除数组的某一个元素。注意其参数:

Array.splice({indexwheretostart},{howmanyitemstoremove},{itemstoadd});

因此，如果我们要在第五个位置添加红色敞篷车，可以像下面这样写：

letcar={color:’red’,type:’cabrio’,registration:newDate(‘2016-05-02’),capacity:2,};cars.splice(4,0,car);对象数组的遍历

JavaScript 提供了许多函数/方法，可以解决你的某些问题，从而无需你手动实现其内部逻辑。我们来看看吧。

通过其值在数组中查找特定的对象 – Array.find

如果想在车辆数组中找到一辆红色的，我们可以使用 Array.find。

letcar=cars.find((car)=>car.color===’red’);

这个函数返回匹配到的第一个元素：

console.log(car);//output://{//color:’red’,//type:’stationwagon’,//registration:’SatMar03201801:00:00GMT 0100(GMT 01:00)’,//capacity:5//}

也可以搜索多个值：

letcar=cars.find(car=>car.color===”red”&&car.type===”cabrio”);

在这种情况下，我们将获得车辆列表中的最后一辆车。

从数组中获取符合条件的多个元素 – Array.filter

Array.find 方法只返回一个对象。如果你想获取所有红色的车，你需要使用 Array.filter。

letredCars=cars.filter((car)=>car.color===’red’);console.log(redCars);//output://[//{//color:’red’,//type:’stationwagon’,//registration:’SatMar03201801:00:00GMT 0100(GMT 01:00)’,//capacity:5//},//{//color:’red’,//type:’cabrio’,//registration:’SatMar03201201:00:00GMT 0100(GMT 01:00)’,//capacity:2//}//]转换数组的对象 – Array.map

在数组的所有方法中，Array.map方法可以说是我们使用最频繁的了。将对象数组转换为不同对象的数组，这就是 Array.map 的工作。假设我们要根据汽车的大小将其分为三类：

letsizes=cars.map((car)=>{if(car.capacity<=3){return’small’;}if(car.capacity<=5){return’medium’;}return’large’;});console.log(sizes);//output://[‘large’,’medium’,’medium’,…,’small’]

如果我们需要更多的值，也可以创建一个新的对象：

letcarsProperties=cars.map((car)=>{letproperties={capacity:car.capacity,size:’large’,};if(car.capacity<=5){properties[‘size’]=’medium’;}if(car.capacity<=3){properties[‘size’]=’small’;}returnproperties;});console.log(carsProperties);//output://[//{capacity:7,size:’large’},//{capacity:5,size:’medium’},//{capacity:5,size:’medium’},//{capacity:2,size:’small’},//…//]向数组的每个对象添加属性 – Array.forEach

Array.map会生成新的数组。那如果我们只想对原来的汽车对象做修改怎么办？这对Array.forEach函数来说是一个很好的使用场景：

cars.forEach((car)=>{car[‘size’]=’large’;if(car.capacity<=5){car[‘size’]=’medium’;}if(car.capacity<=3){car[‘size’]=’small’;}});按属性对数组排序 – Array.sort

完成对象转换后，通常需要以某种方式对它们进行排序。

通常，排序是基于每个对象都具有的属性的值。我们可以使用Array.sort函数，但是我们需要提供一个定义排序机制的函数（compareFunction）。

译者注：

如果指明了 compareFunction，那么数组会按照调用该函数的返回值排序，即 a 和 b 是两个将要被比较的元素：

如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前。如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注：ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）。如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

假设我们要根据汽车的载人量对汽车进行降序排序。

letsortedCars=cars.sort((c1,c2)=>c1.capacity<c2.capacity?1:c1.capacity>c2.capacity?-1:0);console.log(sortedCars);//output://[//{//color:’purple’,//type:’minivan’,//registration:’WedFeb01201700:00:00GMT 0100(GMT 01:00)’,//capacity:7//},//{//color:’red’,//type:’stationwagon’,//registration:’SatMar03201801:00:00GMT 0100(GMT 01:00)’,//capacity:5//},//…//]

如果排序函数的结果为正，则Array.sort比较两个对象，并将第一个对象放在第二位。因此，你可以将排序函数视为一个问题：是否将第一个对象放置在第二个位置。