リスを倒す 『初めてのPHP,MySQL,JavaScript&CSS』

『初めてのPHP,MySQL,JavaScript&CSS』勉強奮闘記

15-4.Javascriptの関数、オブジェクト、配列④Javascriptの配列のメソッドの使用

病院言ったらまずは内科に行こうと言われた。
ただ背中が痛いから整形外科ではないらしい…
空腹時も伴って胃があれて、背中に痛みを生じることもあるらしい。。。
ただ姿勢が悪くて長時間同じ格好で動かなかったから、固まった感もあり。勉強になった。。。

リス休憩しようとおもたけど、15章おわらしたいゆえやろうと思います。
javascriptには配列とそのデータを操作するためのメソッドが数多くあります。
使用頻度の高いものに絞ってみていきます。


1-1. concat


「concatメソッド」は、配列と配列、または一連の値と配列を連結します。
次のコードは

fruit = ["banana", "Grape"]
veg = ["Carrot","Cabbage"]
ducument.write(fruit.concat(veg))

以下を結果を出力します。
"Banana、Grape,Carrot,Cabbage"

fruitとvegを結合して新しい入れるを作成し、fruitとvegは変更されません。

1-2. forEach


Javascript配列のforEachメソッドはPHPのforeachキーワードに似た機能を実現する方法ですが、サポートされるのはIE以外のブラウザです。このメソッドを使用するには、配列内の各エレメントに対して呼び出す関数の名前を渡します。


<script>
pets = ["Cat", "Dog", "Rabbit", "Hamster"]
pets.forEach(output)

function output(element, index, array)
{
document.write("Element at index " + index + " has the value " +
element + "
")
}
</script>

結果はこちら。
f:id:taro-blog2323:20161209200547p:plain

1-3. join


配列のjoinメソッドを使用すると、配列のすべての値をストリングに変換して、オプションとしてそのストリング間にセパレータ(区切り文字)を置き、1つの大きなストリングに連結することができます。

以下がjoinメソッドの使用例です。例を3つ示しています。


<script>
pets = ["Cat", "Dog", "Rabbit", "Hamster"]
document.write(pets.join() + "
")
document.write(pets.join(' ') + "
")
document.write(pets.join(' : ') + "
")
</script>

結果はこちら。
f:id:taro-blog2323:20161209201632p:plain

1つめは、セパレータを指定しないとデフォルトでコンマが使用されます。2つめは、セパレータにスペースを指定しています。
最後は、セパレータにスペース+コロン+スペースを指定しています。


1-4. pop


pushメソッドを使って配列に値を追加しましたが、popはその逆を実行するメソッドで、最も直近に追加されたエレメントを配列から消去しそのエレメントを返します。


<script>
sports = ["Football", "Tennis", "Baseball"]
document.write("Start = " + sports + "
")
sports.push("Hockey");
document.write("After Push = " + sports + "
")
removed = sports.pop()
document.write("After Pop = " + sports + "
")
document.write("Removed = " + removed + "
")
</script>

結果はこちら。
f:id:taro-blog2323:20161209202223p:plain

1-5. reserveの使用


配列のreserveメソッドは配列のすべてのエレメントの順番を逆にします。


<script>
sports = ["Football", "Tennis", "Baseball", "Hockey"]
sports.reverse()
document.write(sports)
</script>

結果はこちら
f:id:taro-blog2323:20161209203328p:plain


いじょーーーーー