JavaScript:配列要素の削除

JavaScriptの配列の削除についてです。

 

JavaScriptで配列の要素の削除には2通りのやり方があります。

そのため用途に応じて使い分けなければなりません。

 

さっそく解説していきたいと思います。

 

1:deleteを使うやり方

まず1つ目はdeleteを使うやり方です。こちらは削除された要素はundefinedに置き換えられるだけであるため、

要素数に変更はありません。

 

使い方は、例としてhairetu=[“a”,”b”,”c”,”d”]があるとき、

delete hairetu[2]でhairetuの3つ目の要素がundefinedに代わり、

hairetu=[“a”,”b”,undifined,”d”]となります。

 

2:spliceを使うやり方

こちらは上記とは違い要素が削除されたと同時に配列を詰めてくれます。

そのため削除された分配列の要素数が減ります。

 

こちらも例として、上の配列の要素を削除するとき

hairetu.splice(2,1)とするとhairetuの中身は

hairetu=[“a”,”b”,”d”]となります。

 

(2,1)の意味としては0から数え始めるので2は3番目の要素、

そこから要素を1つ削除するという意味になります。

 

追加の知識としてundifinedをあとから消したい場合は、

任意の配列.compact()を使えばundifined,nullを全て消すことができます。

 

ただしこちらはprototype.jsというライブラリが必要であり、

そのままでは使用できないので注意が必要です。

 

prototype.jsはこちらからダウンロードが可能です。

 

以上で説明を終わります。この2つはよく使うので使い方の違いを覚えておいたほうがいいですね。

以でJavaScriptの配列の削除についてでした。

 

 

PHPからJavaScriptに配列を渡す

PHPからJavaScriptに連想配列を渡す方法です。

 

こちらのやり方にはいろいろと方法があるのですが、

今回は自分が一番簡単でありよく使う方法を解説していきたいと思います。

 

早速解説していきたいと思います。

 

まずPHP側で配列を用意します。例として、

 

$test=new array();

$test[]=test1;

$test[]=test2;

 

と2つの要素からなる配列testを用意します。

ちなみに配列に代入する際上のようにすると簡単に配列に要素を格納できるので、

かなりおすすめの方法になります。

 

ほかの方法としてarray_pushを使う方法もありますので、

興味ある方は調べてみてください。

 

次に用意した配列をJavaScriptに渡すために一度jsonに変換します。

 

こちらは

$jsonTest=json_encode($test);

のようにし、変換します。ここで変換するのは受け渡しを簡単にするためです。

 

で次にJavaScript上で配列を受け取ります。この方法は

var test=JSON.parse(‘<?php echo  $jsonTest; ?>’);

のようにJSON.parseを使い受け取ります。

このときphpの文全体を’   ‘で囲っていることに注意してください。

 

以上の処理をすれば配列を渡してあげることができます。

PHP,JavaScript間で配列のやり取りをすることは多々あるので覚えておくと便利です。

 

以上、PHPからJavaScriptに配列を渡す方法でした。

JavaScript:要素を動的に追加する。

JavaScriptを用いてinput要素を動的に追加する方法です。

 

この方法は例えばデータベースから持ってきた情報をinputのvalueとして

設定してあげたい場合、かつデータベースから引っ張ってきた情報をJavaScriptなどで

フィルターをかけてあげる場合などに使えます。

 

またそのほかにもいろいろと使える場面があるので知っておくと便利です。

 

早速解説していきます。

 

1) 要素を追加したいオブジェクト(親オブジェクト)への参照を取得。

 

こちらではまずinput要素を追加する親を取得します。取得方法には2つあり
 1:ID名で取得
  親オブジェクト = document.getElementByID(“ID名”);

のように親要素にIdを設定し、取得する方法と


 2:タグ名(TABLEとかTDとか)で取得。idNumは0から始まる順番です。
  document.getElementsByTagName(“タグ名”).item(idNum);

の2つの方法があります。

 

お勧めは1番目です、なんといっても簡単なので。



2) 追加したい要素を生成。
 オブジェクト名 = document.createElement(“タグ名”);

こちらで任意のタグを生成します。


3)生成した要素の属性をセット
 オブジェクト名.setAtrribute(“属性”,”値”);

こちらでタグの情報を設定します。

 

たとえばValueにNum1という情報を設定したい時は、

オブジェクト名.setAtrribute(“Value”,”Num1″);

のようにします。また他の方法として、

 

オブジェクト名.value=Num1;

でも設定できます。

 


4)生成した要素を親へ追加
 親オブジェクト.appendChild(オブジェクト名);

最後にに1で取得した親に含めてあげます。

オブジェクト名には当たり前ですが2で作成したものを指定します。

 

以上の操作でJavaScriptで動的に要素を追加してあげることができます。

この方法を使えば複数個また何かしらの規則性があるものを複数追加

する場合にとても重宝するので、ぜひ活用していきたいですね。

 

以上、JavaScriptを用いてinput要素を動的に追加する方法でした。