VB.NET-TIPS などプログラミングについて

関数はJavaScriptで繰り返し行う処理などをまとめたものを言います。 他の言語を使っている方には特に説明は必要無いかとは思いますが、 JavaScript特有の記述もあります。 関数の宣言方法の違いによって以下の２種類がありますので、それぞれについて見ていきます。

• 一般的な関数の宣言(functionを使った宣言)
• 関数式（関数リテラル）による宣言

■一般的な関数の宣言(functionを使った宣言)

function キーワードを使った関数宣言の構文は以下の様になっています。 function キーワードの後に「関数名」を書いて関数の引数が在れば「引数リスト」（複数あれば「,」カンマで区切ります）を記述します。 関数内部には行いたい処理を記述し、最後に関数として戻したい値があれば return 文で戻してやります。

function 関数名( [ 引数リスト ] ) {
    // 関数内の処理
    ...
    [return [戻り値];]
}

基本的な使い方は以下のソースを見て下さい。
func1 という名前で関数を宣言しています。１から引数に与えられた数値までの合計を計算する簡単な関数です。 本来ならば、引数の値チェック（数値以外の文字列等が渡されたらどうするか）や、合計値の桁あふれなどにもチェックが必要かもしれません。
取敢えずこの関数を実行するために、関数の戻り値を変数に代入しています。 尚、戻り値を直接別の関数に渡すことも可能です。（以下では console.log への引数の値として渡されます）

//関数の宣言(引数までの合計を計算)
function func1( intPara ) {
    var sum = 0;
    for (var i = 1; i <= intPara; i++) {
        sum = sum + i;
    }
    return sum;
}

//変数の宣言
var val;
//関数の実行
val = func1(10);    // 変数への代入
console.log(val);          // 55 と表示される
console.log(func1(100));   // 5050 と表示される

「引数」が文字列の場合を想定した関数の例を以下に示します。

//関数の宣言(引数に文字列指定)
function func2( strPara1, strPara2 ) {
    var strRet = "" + strPara1 + "..." + strPara2;
    return strRet;
}
//関数の実行
console.log(func2("10", "aaaa"));   // 10...aaaa と表示される

関数の戻り値としてオブジェクトを指定

関数の戻り値としてオブジェクトを指定できます。以下にその例を示します。
関数としては2個の引数を持ち、それぞれをオブジェクトのプロパティの値として設定しています。 関数の実行後、戻り値をそのままコンソールに表示すれば結果はオブジェクトが戻されることが分かります。
ここで注意が必要なのですが、関数の引数としては数値でも文字列でも指定できますので オブジェクトのプロパティ値もそれぞれ設定したままが戻されます。

//関数の宣言(戻り値がオブジェクトの場合)
function func3( strPara1, strPara2 ) {
    //オブジェクトの宣言
    var obj = {
        Para1: strPara1,
        Para2: strPara2,
    }
    //オブジェクトを戻す
    return obj;
}
//関数の実行(変数の宣言も同時に行う)
var val = func3(100, "aaaa");
console.log(val);         // Object { Para1: 100, Para2: "aaaa" } と表示される
console.log(val.Para1);   // 100 と数値として表示される
console.log(val.Para2);   // aaaa と文字列として表示される

val = func3("100", "aaaa");
console.log(val);         // Object { Para1: "100", Para2: "aaaa" } と表示される
console.log(val.Para1);   // 100 と文字列として表示される
console.log(val.Para2);   // aaaa と文字列として表示される

上の例でもありますが、引数の型等をどの様に定義するかは関数を作る前によく考えておく必要があります。

関数の引数としてオブジェクトを指定

引数にArrayやユーザ定義のオブジェクトを指定できますが、 関数内でそのオブジェクトのプロパティを変更すると、関数の呼出元にも反映されるため注意が必要です。 以下にその例を示します。

//関数の宣言(引数がオブジェクトの場合)
function func4( objPara ) {
    //プロパティを変更
    objPara.prop1 = "000";
}
//オブジェクトの宣言
var obj = { prop1: "1234" , prop2: "abc" };
console.log(obj);   // Object { prop1: "1234", prop2: "abc" } と表示される
//関数の呼出
func4( obj );
console.log(obj);   // Object { prop1: "000", prop2: "abc" } と表示される

//-----
//関数の宣言(引数がArrayの場合)
function func5( arr ) {
    //配列の内容を変更
    arr[1] = "111";
}
//Arrayの宣言
var arr = new Array("aaa", "bbbb", "123");
console.log(arr);   // Array(3) [ "aaa", "bbbb", "123" ] と表示される
//関数の呼出
func5( arr );
console.log(arr);   // Array(3) [ "aaa", "111", "123" ] と表示される

引数にオブジェクト、及びArrayの場合を例にしましたが、関数内でのプロパティの変更が 関数外にも影響していることが分かります。

■関数式（関数リテラル）による宣言

今までは function キーワードを使った構文としての関数宣言でしたが、 関数式として宣言することができます。

//関数式による関数の宣言
var test = function (strPara) {
    //引数の前後に括弧（[]）を付加して戻す
    return "[" + strPara +  "]";
};  //ここで文の最後であるセミコロン「;」を記述（無くてもOKですが）

//関数の実行
var str = test("12345");
console.log(str);   // [12345] と表示される

//ちなみに「test」を表示する
console.log(test);  // function test()... と表示される

上の例からもわかりますが var test と変数 test を宣言しているようですが、 test の実体は関数として存在しますので、これを関数の様に呼出すことができます。

ただし関数式は名前をつけることもでき、関数内で自身を参照することができます。 以下の例では、１から引数値までの総和を求める処理を行っています。 sum と言う名前を関数に付けて自分自身の中で再帰的に呼び出しを行い、 引数値から順次１小さい値を加算することを再帰的に行っています。

//[1～N]までの総和を求める関数を関数式で宣言
var summation = function sum(intPara) {
    if (intPara <= 1) {
        //１になったらそこで再帰呼出し終了
        return 1;
    } else {
        //再帰呼出しで順次１小さい値を加算してゆく
        return intPara + sum(intPara - 1);
    }
};

//関数の実行
console.log(summation(1));  // 1 と表示される
console.log(summation(2));  // 3 と表示される
console.log(summation(3));  // 6 と表示される
console.log(summation(10)); // 55 と表示される
console.log(summation(100));// 5050 と表示される

関数式で宣言した関数オブジェクトを引数にした関数を宣言し、 それぞれの関数式での関数を呼び分ける方法を以下に記します。

//関数オブジェクトを引数にした関数宣言
function math(fn, val) {
    //関数オブジェクトを実行
    return fn(val);
}

//関数式による引数を２乗する関数宣言
var sqr = function(val) { 
    return val * val;
};
//関数式による引数を +1 する関数宣言
var inc = function(val) { 
    return val + 1;
};
//関数式による引数を -1 する関数宣言
var dec = function(val) { 
    return val - 1;
};
//関数式による引数を２倍する関数宣言
var mul2 = function(val) { 
    return val * 2;
};

//関数オブジェクトを変えて関数をコールする
console.log(math(sqr, 10));     // 100 と表示される
console.log(math(inc, 10));     // 11 と表示される
console.log(math(dec, 10));     // 9 と表示される
console.log(math(mul2, 10));    // 20 と表示される

配列の繰り返し処理では通常 for 文を使います。
for 文には一般的に指標を使って繰り返し、指標で配列を参照する方法や、 配列の指標と値を順次取得できる方法があります。
尚、for 文には以下の使い方がある様ですので、それぞれについて見ていきます。

• for(指標を使った一般的な方法)
• for...in(オブジェクトのプロパティ名での繰返し)
• for...of(オブジェクトのプロパティの値の繰返し)
• Array.forEach(配列の各要素についての繰返し)

■for(指標を使った一般的な方法)

いまさらですが for 文の構文は以下の様になっています。 「初期値設定」「条件式」「指標処理」の3個の部分を「;」セミコロンで区切ります。 それぞれを [] で囲っているのは、必要が無ければ記述を省略できます。 （通常はあまり使いませんが）

for ( [ 初期値設定 ]; [ 条件式 ]; [ 指標処理 ] ) {
    // 繰り返しの処理
    ...
}

基本的な使い方は以下のソースを見て下さい。
最初に3個の要素を持つ配列を宣言し、次に for で配列の長さ分の処理を行います。
配列の長さを取得するために length プロパティを参照しますが、 このプロパティは、配列の宣言を行った時に javascript が内部で設定されます。
繰返し処理の中身は配列の値をコンソールに表示することを行います。 （10 20 30 と順次表示されます。）

//配列の宣言
var arr = [10, 20, 30];
//配列の内容を順次表示
for(var i = 0; i < arr.length; i++) {
    //繰返しの処理...
    console.log(arr[i]);
}

「初期値設定」「条件式」「指標処理」の3個の部分はそれぞれ必要が無ければ記述しなくても問題ありません。 究極、3個とも無くしてしまってもOKです。 但し、ループを抜ける処理は記述しないと無限ループになってしまいます。
このループを抜ける処理が break 文でループを抜けたい条件の中で記述します。 （条件が無くてもOKですが...）
上の処理と同じことを行う例を示します。

//配列の宣言
var arr = [10, 20, 30];
//指標の宣言
var i = 0;
//for 文の中身は記述しない
for( ; ; ) {
    if (i >= arr.length) {  //length の値は「3」
        //指標が長さ以上になった場合ループを抜ける
        break;
    }
    //ループ内処理
    console.log(arr[i]);
    //指標を増やす
    i++;
}
//break 後はここに来る

break 文が出たところで continue 文を出さないと片手落ちなので以下の例を示します。 指標が「1」になった時に、指標を＋１してループの先頭に戻しています。 結果としてコンソールには 10 30 が表示されます。

//配列の宣言
var arr = [10, 20, 30];
//配列の内容を順次表示
var i = 0;
//for 文の中身は記述しない
for( ; ; ) {
    if (i >= arr.length) {
        //指標が長さ以上になった場合ループを抜ける
        break;
    }
    if (i == 1) {
        //指標を増やす
        i++;
        //指標が[1]ならば先頭に戻る：「if (i >= arr.length) {」の処理に戻る
        continue;
    }
    //ループ内処理
    console.log(arr[i]);
    //指標を増やす
    i++;
}
//break 後はここに来る

■for...in(オブジェクトのプロパティ名での繰返し)

for 文なので配列に使えるのかなと思って、以下の例を実行したのですが、 コンソールに表示されるのは「0 1 2」と指標らしきものが表示されます。 なぜ指標なのかを正式なドキュメントに当たると以下の様に記されています。

「for..in 文は、指定したオブジェクトの列挙可能プロパティに対して、順不同で反復処理をします。」

つまり返されるのはプロパティ名を返す様です。 （単純な配列の場合は指標がプロパティ扱いの様です。

//配列の宣言
var arr = [10, 20, 30];
//配列の内容を順次表示
for(var v in arr) {
    console.log(v);
}

そこで以下の様にオブジェクトに対して for 文を行うと、コンソールには「prop1 prop2 prop3」が順次表示されます。 これはオブジェクトのプロパティ名そのものです。

//オブジェクトの宣言
var obj = { prop1: 10, prop2: 20, prop3: 30 };
//オブジェクトのプロパティ名を順次表示
for(var v in obj) {
    console.log(v);
}

さらに以下の様にプロパティ名を扱うと、プロパティに対応する値にアクセスできます。

//オブジェクトの宣言
var obj = { prop1: 10, prop2: 20, prop3: 30 };
//オブジェクトの内容を順次処理
var sum = 0;
var str = "";
for(var v in obj) {
    sum += obj[v];  // 数値として加算
    str += obj[v];  // 文字列として追加
}
console.log(sum);   // 60 と表示される
console.log(str);   // 102030 と表示される

先ほどの配列の場合は以下の様にすれば、指標に対応する値にはアクセスできますが、 指標の順番通り取得できるとは限らないので、指標によるアクセスの方が良いようです。 （以下の例の様に配列の個数が少ない場合は順番にアクセスされる様ですが..）

//配列の宣言
var arr = [10, 20, 30];
var sum = 0;
//配列の内容を順次表示
for(var v in arr) {
    sum += arr[v];  // 数値として加算
}
console.log(sum);   // 60 と表示される

■for...of(オブジェクトのプロパティの値の繰返し)

for...in ではオブジェクトのプロパティ名での繰り返し処理でしたが、 for...of はオブジェクトのプロパティの値を順次アクセスできるものです。
但し対象となるものは iterable(繰り返し可能)なオブジェクト らしいです。 配列(Arrayで宣言されたもの)や、String、Map などです。

//----------
//配列の宣言
var arr = [ 10, 20, 30 ];
//配列の値を順次表示
for(var v of arr) {
    console.log(v);
}
//コンソールに以下の3行で表示される
// 10
// 20
// 30

//----------
//Stringの宣言
var str = "ABC";
//Stringの文字を順次表示
for(var v of str) {
    console.log(v);
}
//コンソールに以下の3行で表示される
// A
// B
// C

//----------
//Mapの宣言
var M = new Map([["a", 1], ["b", 2], ["c", 3]]);
//Mapの要素を順次表示
for (var ent of M) {
  console.log(ent);
}
//コンソールに以下の3行で表示される
// Array [ "a", 1 ]
// Array [ "b", 2 ]
// Array [ "c", 3 ]

//Mapのキーと値を順次表示
for (var [key, value] of M) {
  console.log(key + "=" + value);
}
//コンソールに以下の3行で表示される
// a=1
// b=2
// c=3

■Array.forEach(配列の各要素についての繰返し)

Arrayオブジェクトのメソッドである forEach を使っても繰り返し処理が行えます。 構文は以下の通りです。

arr.forEach(function callback( value [, index [, array ] ] ) {
    //your iterator
}[, thisArg]);

パラメーター:
  callback: 各要素に対して実行するコールバック関数で、３つの引数をとります。
  value:    現在処理されている配列の要素。
  index:    現在処理されている配列の要素のインデックス。
  array:    forEachが適用されている配列。
  thisArg:  callback 内で this として使用する値 (i.e the reference Object)。

forEach の例を以下に示します。

//配列の宣言
var arr = ['a', 'b', 'c'];
//配列を順次処理
arr.forEach(function(val, idx) {
    console.log("arr[" + idx + "] = " + val);
});
//コンソールに以下の3行で表示される
// arr[0] = a
// arr[1] = b
// arr[2] = c

「連想配列の操作について（this キーワード）」の記事の中で 連想配列の様に使えるオブジェクトの説明で、そのオブジェクトの中にメソッドを作成し、 オブジェクト内の変数をアクセスする為に this キーワードを使いました。

⇒JavaScript 連想配列の操作について（this キーワード）

今回はこの this キーワードですが、使う場所によって異なるオブジェクトを指し示すため注意が必要です。
以下の使い方がある様ですので、それぞれについて見ていきます。

• グローバル実行コンテクスト
• 関数コンテクスト
• オブジェクトのメソッドとして
• コンストラクタの呼び出しとして
• 別オブジェクトのバインド呼び出し(call または apply 呼び出し)

■グローバル実行コンテクスト

以下のソースを見て下さい。 最初に this キーワードそのものをコンソールにログアウトしています。 結果として this はウインドウオブジェクトであることが分かります。 さらに次のグローバル変数宣言で、ウインドウオブジェクトに value オブジェクトを値「1」で追加します。 これで、ウインドウオブジェクトのプロパティ的に value を参照することが出来ます。
value を「2」として上書きできることも分かります。

ここで注意が必要なのは、存在しない変数をいきなり設定してやると、変数が生成されます。 以下のソースでも value2 が生成されることが分かります。

■関数コンテクスト

グローバル関数の宣言を行って、その中で this キーワードで value を参照しています。 表示される結果は、グローバル変数の内容となります。

■オブジェクトのメソッドとして

オブジェクトを宣言し、その中でメソッドも宣言します。 メソッドの中で this を使ってオブジェクト内のプロパティにアクセスしています。 （このメソッドの定義はインラインでの定義と言うそうです。）

//オブジェクト宣言
var objTest = { 
    value: 100,
    //オブジェクト内のメソッド宣言
    logout: function() {
        console.log("object value = " + this.value);
    }
};
//メソッド実行
objTest.logout();   // object value = 100 と表示される

このインラインのメソッドを、オブジェクトの外で関数として宣言し、 オブジェクトのプロパティに後から追加することもできます。

//オブジェクト宣言
var objTest = { 
    value: 200
};
//外側で関数宣言
function _logout() {
    console.log("object value = " + this.value);
}
//プロパティに関数を割り当てる
objTest.logout = _logout;
//メソッド実行
objTest.logout();   // object value = 200 と表示される

この例では、オブジェクトのプロパティを logout と宣言するのと、 そのプロパティを _logout 関数に置き換える処理を一緒に行っています。
一緒に行うのがいやであれば、以下の様にしても同じです。

//オブジェクト宣言
var objTest = { 
    value: 200,
    logout: null    //取敢えず先にプロパティ宣言
//    logout: 0
};
//外側で関数宣言
function _logout() {
    console.log("object value = " + this.value);
}
//プロパティに関数を割り当てる
objTest.logout = _logout;
//メソッド実行
objTest.logout();   // object value = 200 と表示される

■コンストラクタの呼び出しとして

関数がコンストラクタとして（new キーワードとともに）使用されるとき、 その this は生成された新しいオブジェクトにバインドされます。

以下の例では最初の関数宣言では this を使って内部的にオブジェクトを生成し、そのオブジェクトのプロパティとして value を作り引数の値を設定しています。

この関数をコンストラクタ呼出しを行うと、戻り値としてオブジェクトを返すので、 それを別の変数に代入することで変数を介してそのオブジェクトへアクセスできます。 変数 obj をコンソールに表示させると、オブジェクトが生成されていることが分かります。

//関数宣言
function objCreate(pVal) { 
    this.value = pVal;  // value プロパティを pVal で設定
}

//コンストラクタ呼出しでオブジェクト生成
var obj = new objCreate(100);
console.log(obj); // Object { value: 100 } と表示される

もし new キーワードで使用せずに単に関数呼び出しとした場合はどうなるでしょうか。 以下の例を見て下さい。 単なる関数呼び出しでの this はグローバルオブジェクトを示すため、 この場合ですと Window オブジェクトに value プロパティを生成します。

//関数宣言
function objCreate(pVal) { 
    this.value = pVal;
}

//単なる関数呼び出し
objCreate(100);
console.log(this);  // Window { objCreate: function objCreate() , value: 100 ... と表示される

■別オブジェクトのバインド呼び出し(call または apply 呼び出し)

関数本体に this キーワードを使用する場合、call メソッドか apply メソッドを使用した呼び出しで、 その値に特定のオブジェクトをバインドできます。
以下の例はオブジェクト「obj」を宣言し、関数の this の指定が「obj」となっていることを示します。

//プロパティ「value」を持つオブジェクト宣言
var obj = { value: "object" };

//グローバルオブジェクトにプロパティ「value」宣言
var value = 'global';

//関数宣言
function objTest() {
  return this.value;  //関数の呼出により[this]の指すものが変わる
}

var strRet;
//通常の関数呼び出し
strRet = objTest();
console.log(strRet);        // global と表示される

//[call]関数呼び出し
strRet = objTest.call(obj); // this の指定を「obj」として呼び出し
console.log(strRet);        // object と表示される

//[apply]関数呼び出し
strRet = objTest.apply(obj);// this の指定を「obj」として呼び出し
console.log(strRet);        // object と表示される

call 及び apply の明確な違いは以下の例を見て下さい。 call 呼出しの場合は、 this に対応するオブジェクトの後に引数をそのままの値で設定し、 apply 呼出しの場合は、 this に対応するオブジェクトの後に引数を配列の形で設定します。

//関数宣言(引数が3個)
function sum(p3, p4, p5) {
    //[this]によるプロパティ値と引数の値の合計計算
    return this.p1 + this.p2 + p3 + p4 + p5;
}

//プロパティ[p1][p2]を持つオブジェクト宣言
var obj = { p1: 1, p2: 2 };

var ret;
//[call]による関数呼び出し
ret = sum.call(obj, 3, 4, 5);
console.log(ret);           // 15 と表示される
//[apply]による関数呼び出し
ret = sum.apply(obj, [100, 200, 300]);
console.log(ret);           // 603 と表示される

連想配列とは各種のKEYに対応する値を持つ配列の様なものであると「連想配列の作成と初期化について」で説明しましたが、 JavaScriptには実際には連想配列は存在せず、オブジェクトのプロパティとして扱うことで連想配列的に扱えます。 以下の様な例があります。

連想配列的宣言

    //連想配列の宣言(実際はオブジェクト)
    var arrVar = { 
        item:  "test1",
        value: 100,
        func: function() {  // 関数の宣言
            console.log("TEST");
        }
    };
    //配列内の値表示
    console.log(arrVar["item"]);    // test1 と表示される
    console.log(arrVar["value"]);   // 100 と表示される
    //関数の実行
    arrVar.func();                  // TEST と表示される

上の例では arrVar に関数 func を宣言していますが、このままだと何も意味のある処理ではないので arrVar が持つプロパティを表示する様にしてみます。

そこで必要になるのが this キーワードです。 this 「これ」って何といった感じですが、 this が存在するオブジェクトの親オブジェクトを指すと理解すれば良いと思います。

論より実際の処理を見ると分かりやすいです。上の例に少し修正を加えます。

this を使った連想配列の項目アクセス

    //連想配列の宣言(実際はオブジェクト)
    var arrVar = { 
        item:  "test1",
        value: 100,
        func: function() {  // 関数の宣言
            var str = "";
            str += "item = " + this.item;
            str += ",value = " + this.value;
            console.log(str);
        }
    };
    //関数の実行
    arrVar.func();  // item=test1,value=100 と表示される

関数 func が呼ばれた時には this が指し示すオブジェクトは、 関数オブジェクト func が属する親オブジェクトになりますので arrVar を指しそれのプロパティへのアクセスが可能になります。

いわゆるオブジェクト参照の変数ですので this を別の変数に代入しても利用できます。

this を使った連想配列の項目アクセスその２

    //連想配列の宣言(実際はオブジェクト)
    var arrVar = { 
        item:  "test1",
        value: 100,
        add:  function(pVal) {  // value に加算する関数宣言
            this.value += pVal;
        },
        func: function() {  // 関数の宣言
            var obj = this; // this を別の変数に代入
            var str = "";
            str += "item = " + obj.item;
            str += ",value = " + obj.value;
            console.log(str);
        }
    };
    //関数の実行
    arrVar.add(100);
    //関数の実行
    arrVar.func();  // item=test1,value=200 と表示される

関数 func では this を別の変数に代入して処理を行っています。 add という関数を追加してありますが、これは引数の値をプロパティ value に加算処理を行います。

今回使用した this は奥が深いキーワードでいろんな場所で使えるのですが、 詳しい説明は又の機会にしたいと思います。

以前の記事では配列の初期化について記しましたが、今回は配列の要素に関しての増減などを行う処理についてです。

⇒JavaScript 配列の作成と初期化について

配列を操作するメソッドには以下の様なものがあります。

配列の要素への最後尾への追加と削除、及び先頭への追加と削除の例を示します。 要素の追加は1個のみではなく連続して引数として渡せるため、そのままの順番で配列に追加されます。

配列への要素の追加と削除

    //配列の宣言
    var arrStr = ["aaaa", "bb", "ccccc"];
    console.log(arrStr);    // Array(3) [ "aaaa", "bb", "ccccc" ] と表示される
    //要素の最後尾追加 : push
    arrStr.push("dddd");
    console.log(arrStr);    // Array(4) [ "aaaa", "bb", "ccccc", "dddd" ] と表示される
    //要素の最後尾削除 : pop
    arrStr.pop();           // "dddd" 削除
    arrStr.pop();           // "ccccc"削除
    console.log(arrStr);    // Array(2) [ "aaaa", "bb" ] と表示される

    //複数要素の先頭追加 : unshift
    arrStr.unshift("dddd", "ee");
    console.log(arrStr);    // Array(4) [ "dddd", "ee", "aaaa", "bb" ] と表示される
    //要素の先頭削除 : shift
    arrStr.shift();         // "dddd"削除
    console.log(arrStr);    // Array(3) [ "ee", "aaaa", "bb" ] と表示される

上の例では個別の要素を追加する例でしたが、追加処理の引数として配列そのものを指定できます。 以下にその例を示しますが、追加された配列は最初の配列の中の入れ子での配列になってしまいますので注意が必要です。

配列への配列の追加

    //配列の宣言
    var arrStr = ["aaaa", "bb", "ccccc"];
    console.log(arrStr);    // Array(3) [ "aaaa", "bb", "ccccc" ] と表示される
    //配列データの最後尾追加 : push (Array())
    var arrStr2 = ["111", "222"];
    arrStr.push(arrStr2);
    console.log(arrStr);    // Array(4) [ "aaaa", "bb", "ccccc", ["111", "222"] ] と表示される

この現象を解消する為に concat を使って配列を連結し結果を新しい配列を返す様にします。 concat の戻り値は配列なので新しい配列変数に代入しても、既に在る配列変数に代入することもできます。

配列の連結

    //配列の宣言
    var arrStr = ["aaaa", "bb", "ccccc"];
    console.log(arrStr);    // Array(3) [ "aaaa", "bb", "ccccc" ] と表示される
    //第2の配列の宣言
    var arrStr2 = ["111", "222"];
    //配列を連結し、新しい配列にコピー
    var arrStr3 = arrStr.concat(arrStr2);
    console.log(arrStr3);   // Array(5) [ "aaaa", "bb", "ccccc", "111", "222" ] と表示される
    //配列を連結し、元の配列を置き換え
    var arrStr = arrStr.concat(arrStr2);
    console.log(arrStr);    // Array(5) [ "aaaa", "bb", "ccccc", "111", "222" ] と表示される

配列の切出しを slice を使って行う例を以下に示します。

配列の切出し

    //配列の宣言
    var arrStr = ["aaaa", "bb", "ccccc", "d", "eee" ];
    console.log(arrStr);    // Array(5) [ "aaaa", "bb", "ccccc", "d", "eee" ] と表示される
    //開始のみ指定
    var arrStr2 = arrStr.slice(1);
    console.log(arrStr2);   // Array(4) [ "bb", "ccccc", "d", "eee" ] と表示される
    //開始、終了指定
    var arrStr3 = arrStr.slice(1, 4);
    console.log(arrStr3);   // Array(3) [ "bb", "ccccc", "d" ] と表示される
    //開始、終了指定:終了が範囲を超えた指定
    var arrStr4 = arrStr.slice(1, 10);
    console.log(arrStr4);   // Array(4) [ "bb", "ccccc", "d", "eee" ] と表示される

配列の要素の入替を splice を使って行う例を以下に示します。

配列の要素の入替

    //配列の宣言
    var arrStr = ["aaaa", "bb", "ccccc", "d", "eee" ];
    console.log(arrStr);    // Array(5) [ "aaaa", "bb", "ccccc", "d", "eee" ] と表示される
    //Index、削除個数、追加要素の指定
    var arrStr2 = arrStr.splice(1, 2, "111", "22");
    //元の配列の表示
    console.log(arrStr);    // Array(5) [ "aaaa", "bb", "111", "22", "d", "eee" ] と表示される
    //削除された配列の表示
    console.log(arrStr2);   // Array(2) [ "bb", "ccccc" ] と表示される