2017-02-27 65 views
-2

我有一個數組,我需要能夠從它得到2個數組。我需要這兩個數組作爲圖表。圖表組件需要一個標籤數組和一個總數組(每個標籤)。從一個數組創建2個數組ecmascript 2015

我還在學習新的數組方法,的forEach,地圖等於是用我裸,這是數組我有:

const income = [ 
    { 
     "date": 1482233886000, 
     "name": "Company A", 
     "type": "Salary", 
     "description": "Salary jan. 2017", 
     "amount": 50.6 
    }, 
    { 
     "date": 1482406686000, 
     "name": "Company B", 
     "type": "Salary", 
     "description": "Salary jan. 2017", 
     "amount": 40.23 
    }, 
    { 
     "date": 1485171486000, 
     "name": "Company A", 
     "type": "Salary", 
     "description": "Salary feb. 2017", 
     "amount": 200.2 
    }, 
    { 
     "date": 1485344286000, 
     "name": "Company B", 
     "type": "Salary", 
     "description": "Salary feb. 2017", 
     "amount": 100.4 
    }, 
    { 
     "date": 1490655892000, 
     "name": "Company A", 
     "type": "Salary", 
     "description": "Salary mar. 2017", 
     "amount": 20 
    }, 
    { 
     "date": 1493335850000, 
     "name": "Company A", 
     "type": "Salary", 
     "description": "Salary apr. 2017", 
     "amount": 15 
    }, 
    { 
     "date": 1493335850000, 
     "name": "Company B", 
     "type": "Salary", 
     "description": "Salary apr. 2017", 
     "amount": 10 
    } 
    ]; 

爲了讓我這樣做是爲了得到獨一無二的標籤標籤(說明):

[...new Set(income.map(value => value.description))] 
=> ["Salary jan. 2017", "Salary feb. 2017", "Salary mar. 2017", "Salary apr. 2017"] 

這工作,但現在我想每一個描述如總量:

//[90.83, 300.6, 20, 25] 

如果可能的話,是否有人可以幫助我使用最後一個陣列和ES6風格。我想減少,但我無法得到任何的。所以我希望一個主人可以教我; D。

+0

'const的量= income.map(值=> value.amount)' –

+0

運算 '按組' 求和不量的列表需要一個。 – rasmeister

+1

'forEach'和'map'不是「新」。他們老了」。它們也不是ECMAScript 2015,也就是ES6。他們是ES5。 – 2017-02-28 03:29:24

回答

3

您可以縮小到一個Map中,得到的keys()和values()將是您的數組,並按描述進行分組和彙總。

const income = [{"date": 1482233886000,"name": "Company A","type": "Salary","description": "Salary jan. 2017","amount": 50.6},{"date": 1482406686000,"name": "Company B","type": "Salary","description": "Salary jan. 2017","amount": 40.23},{"date": 1485171486000,"name": "Company A","type": "Salary","description": "Salary feb. 2017","amount": 200.2},{"date": 1485344286000,"name": "Company B","type": "Salary","description": "Salary feb. 2017","amount": 100.4},{"date": 1490655892000,"name": "Company A","type": "Salary","description": "Salary mar. 2017","amount": 20},{"date": 1493335850000,"name": "Company A","type": "Salary","description": "Salary apr. 2017","amount": 15},{"date": 1493335850000,"name": "Company B","type": "Salary","description": "Salary apr. 2017","amount": 10}]; 
 

 
let res = income.reduce((a, b) => { 
 
    a.set(b.description, (a.get(b.description) || 0) + b.amount); 
 
    return a; 
 
}, new Map()); 
 

 
console.log([...res.values()]); // the summed amount 
 
console.log([...res.keys()]); // the description property

編輯的評論

要添加到您使用set()映射中的項 - 在上面的例子中,我使用的說明財產作爲密鑰,並且添加金額。在這部分代碼:

(a.get(b.description) || 0) 

基本上只是檢查,如果創建的地圖擁有像迭代描述的關鍵,如果是的話,它需要在現有量補充。 ||短路,所以如果沒有現有量(a.get(b.description)未定義),則取而代之。英語不是我的第一語言 - 這裏是什麼,我的意思是一個簡單的例子:

let m = new Map(); 
 
m.set("foo", 1); 
 
let a = m.get("foo"); 
 
console.log(a); // 1 - obvious 
 
let b = m.get("bar"); 
 
console.log(b); // undefined 
 

 
console.log(b || 0); // 0, as b is undefined, 0 is taken 
 
// in the original answer, this would be the same as 
 
if (! b) b = 0; 
 
console.log(b); 0 
 

 
let c = (b || 0) + 1; // 0 + 1 because b is undefined; 
 
console.log("c: ", c); 
 

 
let d = (a || 0) + 1; // 1 + 1 because a holds 1; 
 
console.log("d:", d);

+2

我喜歡它。仍然需要了解'Map'是如何工作的:/ –

+2

Map就像一個Object,除了它可以有任何對象(不僅僅是字符串)作爲關鍵字,並且你可以使用'get'和'set'來獲得,呃得到並設置成員。 –

+3

不是唯一的區別不過,讀[這裏](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Objects_and_maps_compared)@Kinduser – baao

0

另一種方法:

  • 濾波器income可變擺脫重複說明
  • 獲取已過濾數組的每個元素並遍歷income數組以獲取具有相同的條目值然後總結它們的amount屬性
  • 將每個元素的總數推入新建的arr數組。

const income=[{date:1482233886e3,name:"Company A",type:"Salary",description:"Salary jan. 2017",amount:50.6},{date:1482406686e3,name:"Company B",type:"Salary",description:"Salary jan. 2017",amount:40.23},{date:1485171486e3,name:"Company A",type:"Salary",description:"Salary feb. 2017",amount:200.2},{date:1485344286e3,name:"Company B",type:"Salary",description:"Salary feb. 2017",amount:100.4},{date:1490655892e3,name:"Company A",type:"Salary",description:"Salary mar. 2017",amount:20},{date:149333585e4,name:"Company A",type:"Salary",description:"Salary apr. 2017",amount:15},{date:149333585e4,name:"Company B",type:"Salary",description:"Salary apr. 2017",amount:10}]; 
 

 
var arr = []; 
 
var sorted = [...new Set(income.map(value => value.description))]; 
 
sorted.forEach(function(v){ 
 
    var obj = {}; 
 
    var sum = 0; 
 
    income.forEach(function(c){ 
 
    if (c.description == v){ 
 
     sum += c.amount; 
 
    } 
 
    }); 
 
    obj[v] = sum; 
 
    arr.push(obj); 
 
}); 
 

 
console.log(arr);

+0

我不能運行自動櫃員機,但如果我理解正確,說明是關鍵,金額是價值? –

+0

@AnnaSmother正確。 –