
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
JavaScript
2017.10.13
1つの変数に複数のデータが格納できる配列変数はとても便利です。
配列変数は、変数定義後にデータを追加したり、削除したりすることができます。
今回は、配列変数に要素を追加する方法と削除する方法について紹介します。
作成された配列変数に対して、後から要素(データ)を追加することができます。
使っていないインデックスを指定して値を代入すると、既存の配列変数に要素が追加されます。
var 変数名 = [値1, 値2, 値3];
変数名[3] = 値4;
これは、要素数3の配列変数に、インデックス番号が3の要素を追加した例です。
インデックスは 0 から始まるため、インデックス番号と要素数は違うことに注意が必要です。
先ほどの例は、インデックス番号が連続するように要素を追加しましたが、任意のインデックス番号を指定して要素を追加することもできます。
var 変数名 = [値1, 値2, 値3];
変数名[6] = 値4;
この例は、要素数3の配列変数に、インデックス番号が6の要素として値を追加した例です。
これは、次のように配列変数を定義した場合と同じです。
var 変数名 = [値1, 値2, 値3, , , ,値4];
インデックス番号3から5の要素は値が代入されていないので、未定義値(undefined)が格納されているものとして扱われます。
下のサンプルは、上記と同じ中身の配列変数の値を出力するプログラムです。
表示ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function dispAry() { var ary = ["値1", "値2", "値3"]; ary[6] = "値4"; for (var i = 0; i < ary.length; i++) { document.getElementById("dat").value += ary[i] + " "; } } //--> </script> <div style="background-color : #CCC; padding : 20px;"> <form> <input type="button" value="表示" onClick="dispAry()"> <input type="text" id="dat"> </form> </div>
for文の中の「ary.length」は、配列の要素数を返す lengthプロパティを使用した記述です(詳しくはArrayオブジェクトとはをご参照下さい)。
上のサンプルでは、要素数が7なので、「i < ary.length」は「i < 7」の意味です。
ここでも、要素数とインデックス番号が1ずれる点に注意しましょう。
for文の仕組みについては、for文の使い方をご参照下さい。
配列の要素を削除する場合は、Arrayオブジェクトで用意されているメソッドを使用します。
Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。
配列の要素は、先頭や末尾、指定位置など、様々な条件を付けて削除します。
次のサンプルは、値1から値7まで7つの要素を持つ配列変数のうち、一部の要素を削除して残りの要素を出力するプログラムです。
各ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- var ary = []; function setArray() { ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"]; } function dispArray() { for (var i = 0; i < ary.length; i++) { document.getElementById("dat2").value += ary[i] + " "; } } function dispAry1() { document.getElementById("dat2").value = ""; setArray(); ary.shift(); dispArray(); } function dispAry2() { document.getElementById("dat2").value = ""; setArray(); ary.pop(); dispArray(); } function dispAry3() { document.getElementById("dat2").value = ""; setArray(); ary.splice(2, 1); dispArray(); } function dispAry4() { document.getElementById("dat2").value = ""; setArray(); ary = ary.slice(1, 6); dispArray(); } //--> </script> <div style="background-color : #CCC; padding : 20px;"> 配列変数の要素 : {値1、値2、値3、値4、値5、値6、値7} <form> <div style="display:inline-flex"> <input type="button" value="先頭を削除" onClick="dispAry1()"> <input type="button" value="末尾を削除" onClick="dispAry2()"> <input type="button" value="途中を削除" onClick="dispAry3()"> <input type="button" value="両端を削除" onClick="dispAry4()"> </div> <input type="text" id="dat2"> </form> </div>
要素の削除以外のソースコードの内容については、for文の使い方等をご参照下さい。
var ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"]; ary.shift();
先頭の要素を削除する場合は、shift()というメソッドを利用します。
shiftメソッドを使用すると、元の配列の中身が変更されます。
var ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"]; ary.pop();
末尾の要素を削除する場合は、pop()というメソッドを利用します。
popメソッドを使用すると、元の配列の中身が変更されます。
var ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"]; ary.splice(2, 1);
指定した位置から任意の数だけ要素を削除する場合は、splice()というメソッドを利用します。
第1引数には先頭に残す要素数を、第2引数には削除する要素数を、それぞれ指定します。
上の例では、「先頭に2つの要素を残して、要素を1つ削除する」という指定をしているので、インデックス番号2の要素が削除されます。
仮に、「ary.splice(2, 3);」と指定すると、インデックス番号2、3、4の3つの要素が削除されます。
spliceメソッドを使用すると、元の配列の中身が変更されます。
var ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"]; ary = ary.slice(1, 6);
途中の要素を残して先頭と末尾の要素を削除する場合は、slice()というメソッドを利用します。
第1引数には先頭から削除する要素数、第2引数には残す要素の、1から数えた最後の番号(インデックス番号ではなく、1からスタート)を指定します。
上の例では、「先頭から1つの要素を削除して、6番目の要素までは残して7番目以降の要素を削除する」という指定をしているので、インデックス番号0と6の要素が削除されます。
仮に、「ary.slice(2, 5);」と指定すると、インデックス番号0、1、5、6の4つの要素が削除されます。
sliceメソッドを使用しても、元の配列は変更されず、指定した要素を削除した後のデータは返り値として取得できます。
ですので、元の配列を変更させるためには「ary = ary.slice(1, 6);」のように、返り値を変数に代入する必要があります。
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.