Arrayの主要なプロパティとメソッド 【JavaScriptのサンプルコード】

Print Friendly, PDF & Email

ここでは、当社の新人研修受講者に向けて、JavaScriptのサンプルコードを紹介しています。

Arrayの主要なプロパティとメソッドのサンプルコード

JavaScriptで配列と呼ばれているArrayは、データ構造でいうと「リスト」のことです。純粋な配列ではありません。したがって要素の追加・削除が高速です。ここでは、そんなArray特有にメソッドを紹介します。

<!DOCTYPE html>
<html>
    <head>
        <title>arrayTest</title>
        <meta charset="UTF-8">
        <script>
            var data = [3, 6, 7, 9, 2, 3];

            window.onload = function () {
                document.getElementById('info').textContent = data;
            };

            function calc1() {
                var r1 = data.length;
                document.getElementById('info').textContent = r1;
            }
            function calc2() {
                var r2 = data.indexOf(2);
                document.getElementById('info').textContent = r2;
            }
            function calc3() {
                var r3 = data.lastIndexOf(3);
                document.getElementById('info').textContent = r3;
            }
            function calc4() {
                var r4 = data.splice(2, 3);
                document.getElementById('info').textContent = r4;
            }
            function calc5() {
                var r5 = data.sort();
                document.getElementById('info').textContent = r5;
            }
            function calc6() {
                data.push(9);
                document.getElementById('info').textContent = data;
            }
            function calc7() {
                data.pop();
                document.getElementById('info').textContent = data;
            }
            function calc8() {
                data.shift();
                document.getElementById('info').textContent = data;
            }
            function calc9() {
                data.unshift(11);
                document.getElementById('info').textContent = data;
            }
            function calc10() {
                data.forEach(function (value) {
                    var container = document.getElementById("info");
                    var item = document.createElement("li");
                    item.textContent = value;
                    container.appendChild(item);
                });
            }
            function calc11() {
                var r11 = data.every(function (value) {
                    return value < 10;
                });
                document.getElementById("info").textContent = r11;
            }
            function calc12() {
                var r12 = data.some(function (value) {
                    return value === 3;
                });
                document.getElementById("info").textContent = r12;
            }
            function calc13() {
                var r13 = data.filter(function (value) {
                    return value % 2 === 1;
                });
                document.getElementById("info").textContent = r13;
            }
        </script>
    </head>
    <button onclick = "calc1()">length</button>
    <button onclick = "calc2()">indexOf(2)</button>
    <button onclick = "calc3()">lastIndexOf(3)</button>
    <button onclick = "calc4()">splice(2, 3)</button>
    <button onclick = "calc5()">sort()</button>
    <button onclick = "calc6()">push(9)</button>
    <button onclick = "calc7()">pop()</button>
    <button onclick = "calc8()">shift()</button>
    <button onclick = "calc9()">unShift(11)</button>
    <button onclick = "calc10()">forEach()</button>
    <button onclick = "calc11()">every(< 10)</button>
    <button onclick = "calc12()">some(=== 3)</button>
    <button onclick = "calc13()">filter(% 2 === 1)</button>
    <p id = "info"></p>
</body>
</html>

 

 

セイ・コンサルティング・グループのお問い合わせ