Javascriptの配列操作: someとfindとfilterが便利

someとfindが便利なのでメモ。

 

some

dataLayerに「○○というキーを持つオブジェクトが存在しているか」なんてのを判定したい時とかに使える。

window.dataLayer = window.dataLayer || [];
dataLayer.push({'pageCategory': 'form' });
dataLayer.push({'visitorType': 'high-value'});
dataLayer.push({'event': 'customizeCar'});

const is_member = dataLayer.some(dataLayer => dataLayer.visitorType);
//true

 

find

一方findはdataLayerに「○○というキーが存在してれば一番最初の値を返す」というもの。

window.dataLayer = window.dataLayer || [];
dataLayer.push({'pageCategory': 'form' });
dataLayer.push({'visitorType': 'high-value'});
dataLayer.push({'event': 'customizeCar'});

const visitor_type = dataLayer.find(dataLayer => dataLayer.visitorType);
//{visitorType: "high-value"}

 

filter

findみたいに一番最初だけじゃなくて一致するオブジェクト全てが欲しい場合はfilterを使う
GTMがデフォルトでeventキーを複数セットするので、ページ側でセットしたeventも含めて集める場合などに使える。

window.dataLayer = window.dataLayer || [];
dataLayer.push({'pageCategory': 'form' });
dataLayer.push({'visitorType': 'high-value'});
dataLayer.push({'event': 'customizeCar'});

const active_events = dataLayer.filter(dataLayer => dataLayer.event);
/*
0: {gtm.start: 1597979413354, event: "gtm.js", gtm.uniqueEventId: 1}
1: {event: "gtm.dom", gtm.uniqueEventId: 3}
2: {event: "gtm.load", gtm.uniqueEventId: 4}
3: {event: "customizeCar", gtm.uniqueEventId: 5}
*/

 
貫禄のIE未対応