JavaScript中級者への道③配列マスターに俺はなる!その1

JavaScript

今日は配列マスターに俺はなる!というテーマでJavaScriptの配列を勉強したメモを残していきます。

基本的なやつ

        //要素の逆順
        let result = [0,1,2,3,4,5];
        result.reverse();
        console.log(result);
        //(6) [5, 4, 3, 2, 1, 0]

        //要素のソート数値
        let result2 = [9,1,6];
        result2.sort();
        console.log(result2);
        //(3) [1, 6, 9]

        //要素のソート文字列
        let result3 = ["zoo","alice","mike","taro","kenshi"];
        result3.sort();
        console.log(result3);
        //(5) ["alice", "kenshi", "mike", "taro", "zoo"]

        //配列の合体
        let result4 = result2.concat(result3);
        console.log(result4);
        //(8) [1, 6, 9, "alice", "kenshi", "mike", "taro", "zoo"]

        //最後に要素を追加
        result4.push("モンキーDルフィ");
        console.log(result4);
        //(9) [1, 6, 9, "alice", "kenshi", "mike", "taro", "zoo", "モンキーDルフィ"]

        //最後の要素を削除
        result4.pop();
        console.log(result4);
        //(8) [1, 6, 9, "alice", "kenshi", "mike", "taro", "zoo"]

        //最初の要素を削除
        result4.shift();
        console.log(result4);
        //(7) [6, 9, "alice", "kenshi", "mike", "taro", "zoo"]

        //最初に要素を追加
        result4.unshift("ロロノアゾロ");
        console.log(result4);
        //(8) ["ロロノアゾロ", 6, 9, "alice", "kenshi", "mike", "taro", "zoo"]

mapメソッド

    <ul id="list">
        <li>iphone:100000</li>
        <li>android:98000</li>
        <li>windows:10000</li>
        <li>mac:98000</li>
        <li>Linux:10000</li>
    </ul>       
        const objects = document.getElementById('list');
        // 取得したulの子要素(li)を配列に変換する
        let lists = Array.from(objects.children);
        // mapで新しい配列を取得
        const newlists = lists.map( x => x.innerText);

        console.log(newlists);
        // 元の配列は何も変化がない
        console.log(lists);
(5) ["iphone:100000", "android:98000", "windows:10000", "mac:98000", "Linux:10000"]
(5) [li, li, li, li, li]

mapは全ての要素に対して変換処理をして結果を返却する。
今回の例ではx.innerTextに変換して新しい配列として返却している。

fileterメソッド

        const objects = document.getElementById('list');
        // 取得したulの子要素(li)を配列に変換する
        let lists = Array.from(objects.children);
        // mapで新しい配列を取得
        const newlists = lists.map( x => x.innerText);

        // 条件に合う要素のみを配列にして返却
        const fileter = newlists.filter(x => x.length > 12);
        console.log(fileter);
(3) ["iphone:100000", "android:98000", "windows:10000"]
0: "iphone:100000"
1: "android:98000"
2: "windows:10000"
length: 3
__proto__: Array(0)

フィルターを使うと条件に一致した要素だけをチョイスした新しい配列を返却してくれます。

forEachで全て走査する

        const objects = document.getElementById('list');
        // 取得したulの子要素(li)を配列に変換する
        let lists = Array.from(objects.children);
        // mapで新しい配列を取得
        const newlists = lists.map( x => x.innerText);

        // 配列の要素を全て走査していくforEach
        newlists.forEach(x => console.log(x));
iphone:100000
index.html:34 android:98000
index.html:34 windows:10000
index.html:34 mac:98000
index.html:34 Linux:10000

配列の要素を一つずつ取り出して処理できる。

最強のreduce

こいつを使いこなせると配列初心者は脱出できるらしい。。。

    <ul id="list">
        <li>りんご:150</li>
        <li>パイナップル:300</li>
        <li>納豆:50</li>
        <li>牛乳:150</li>
        <li>デカビタマルチビタミン:100</li>
    </ul>
        const objects = document.getElementById('list');
        // 取得したulの子要素(li)を配列に変換する
        let lists = Array.from(objects.children);
        // mapで新しい配列を取得
        const newlists = lists.map( x => x.innerText);

        //値段だけの配列を作る下準備・
        let pricelist = new Array();

        newlists.forEach(x => {
            //:以降を切り出して新しい配列にプッシュする
            //substring(指定位置,終了位置)で切り出し
            //indexOf(文字)でその文字のインデックス番号を取得
            let price = Number(x.substring(x.indexOf(':') + 1,x.length));
            pricelist.push(price);
        });


        //合計の値段を取得する
        // x=アキュムレータ y=要素
        // 0=アキュムレータの初期値
        const sum = pricelist.reduce((x,y) => x + y , 0);
        console.log(sum);
        //750

この初期値の0は省略できます。
省略した場合は最初の要素が初期値になりますた。
つまり、同じ750が出力されてます

最大値を取得する

        const max = pricelist.reduce( (x,y) => {
            if(x > y){
                return x;
            }else{
                return y;
            }

        });

        console.log(max);
        //300

配列の要素を比較させれば、このような処理も簡単です。

コメント

タイトルとURLをコピーしました