ここでは、当社の新人研修受講者に向けて、JavaScriptのサンプルコードを紹介しています。
Arrayの主要なプロパティとメソッドのサンプルコード
JavaScriptで配列と呼ばれているArrayは、データ構造でいうと「リスト」のことです。純粋な配列ではありません。したがって要素の追加・削除が高速です。ここでは、そんなArray特有にメソッドを紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!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> |
