ES6で追加されたメソッドメモ

forEach

今どきfor(let i=0;i<images.length;i++) とか使わないでforEachで処理する

var images = [
            { height: 10, width: 30 },
            { height: 20, width: 90 },
            { height: 54, width: 32 }
        ];
var area = [];
images.forEach(function (image) {
    area.push(image.height * image.width);
});

出力結果

area:[300,1800,1728]

map

TwitterとかのTLでほしいidだったりcontentとかを取り出したい時によく使う

var trips = [
    { distance: 34, time: 10 },
    { distance: 90, time: 50 },
    { distance: 59, time: 25 }
];
var speeds;

speeds = trips.map(function(trip){
    return trip.distance / trip.time;
});

出力結果

speeds :[3.4,1.8,2.36]

filter

無名関数内で条件に一致したものだけを取り出す filter内では分岐させると見にくくなるので簡潔に記載する

var images = [
    { height: 10, width: 30 },
    { height: 20, width: 90 },
    { height: 54, width: 32 }
];
var area = images.filter(function (image) {
                return image.height > 10 && image.width > 50;
            });

出力結果

area:[{"height":20,"width":90}]

応用
rejectは一致するものを配列から弾く関数

var users = [
    { id: 1, admin: true },
    { id: 2, admin: false },
    { id: 3, admin: false },
    { id: 4, admin: false },
    { id: 5, admin: true },
];
reject(users, function (user) { return user.admin });

function reject(array, iteratorFunction) {
    return array.filter(
        function(target){
            return !iteratorFunction(target);
        }
    );
}

出力結果

0: {id: 2, admin: false}
1: {id: 3, admin: false}
2: {id: 4, admin: false}

find

条件に最初に一致したものだけを返す 複数返したい場合はfilterを使う

   var accounts = [
        { balance: -10 },
        { balance: 12 },
        { balance: 0 }
    ];

    var account;
    account = accounts.find(target=>target.balance === 12);

出力結果

account:{"balance":12}

応用
findWhereは、第二引数にオブジェクトを入れると条件に一致した プロパティを持っているものを返す

Object.keys(criteria)[0]でプロパティ名を取得できる（重要）

   var images = [
        { height: 10, width: 30 },
        { height: 20, width: 90 },
        { height: 54, width: 32 }
    ];
    var image;

    image = findWhere(images, {height:10});

    function findWhere(array, criteria) {
        let propaty = Object.keys(criteria)[0];
        return array.find(target=>target[propaty]===criteria[propaty]);
    }

出力結果

image :{height: 10, width: 30}

every

条件に一つでも一致しないとfalseを返す （AND条件）

   var users = [
        { id: 21, hasSubmitted: true },
        { id: 62, hasSubmitted: false },
        { id: 4, hasSubmitted: true }
    ];

    var hasSubmitted;

    hasSubmitted = users.every(
        function(user){
            return user.hasSubmitted
        }
    );

出力結果

hasSubmitted:False

some

条件に一つでも一致するとtrueを返す （OR条件）

   var requests = [
        { url: '/photos', status: 'complete' },
        { url: '/albums', status: 'pending' },
        { url: '/users', status: 'failed' }
    ];

    var inProgress;

    inProgress = requests.some(
        function(request){
            return request.status === 'pending';
        }
    );

出力結果

inProgress:True

reduce

書き方が特殊
object.reduce(関数,初期値);
第二引数に初期値を指定する
配列も指定可能

返り値は初期値に代入されていく
object.reduce(function( 返り値格納用, object[i]),[])

var primaryColors=[
    {color: 'red'},
    {color: 'yellow'},
    {color: 'blue'}
];

let ary = primaryColors.reduce(function(previous, primaryColor){
    previous.push(primaryColor.color);
    return previous;//返り値
},[]);

出力結果

ary:["red","yellow","blue"]

応用
uniqueは重複した値を排除する関数

   var numbers = [1, 1, 2, 3, 4, 4];
    var dupNum = unique(numbers);
    function unique(array) {
        let dup = array.reduce(function (DuplicateNum, number) {
            if (!DuplicateNum.find(dupNum => dupNum === number)) {
                DuplicateNum.push(number);
            }
            return DuplicateNum;
        }, []);
        return dup;
    }

console.log(dupNum);

出力結果

dupNum:[1, 2, 3, 4]

for…ofループ

配列の要素の数だけループさせる （正確には配列内の[Symbol.iterator]を検索している）

const books  = [
    { title: "ダレン・シャン" },
    { title: "火ノ丸相撲" },
    { title: "100万回生きた猫" }
]

for(let book of books){
    console.log(book.title);
}

出力結果
ダレン・シャン
火ノ丸相撲
100万回生きた猫

Generatorを使う時に使うと良い