LoginSignup
1
0

More than 1 year has passed since last update.

配列の中身をいじって遊んでみた!【備忘録】

Posted at

こんにちは!
本日2本目の投稿です!
今朝、こちらの投稿にて、配列の要素の追加と削除を行いましたが、今回は、配列の中身をいじってみました!
すでに作ってある配列の要素を全て、連結したり、逆の順番にしてみたりと、思ったより、色々なことができました!

要素を連結してみよう!

まず、配列の要素を全て連結し、文字列に変えてみましょう!join()メソッドを使います。
カンマ、または指定した文字列で、区切ることができます。引数に何も指定しないと、カンマで区切られることになります。
join()メソッドの使い方は以下です。

配列.join();
let array1 = ["", "", "", "", ""];
let array1_2 = array1.join(); // 引数に何も指定していないので、カンマで区切られる。
let array1_3 = array1.join("-");
console.log(array1);
// ["あ", "い", "う", "え", "お"]
console.log(array1_2);
// あ,い,う,え,お
console.log(array1_3);
// あ-い-う-え-お

要素を指定した要素で、置き換える(埋める)!

指定した範囲のインデックスの要素を指定した要素で置き換えてみます!fill()メソッドを使います。
引数にインデックス番号を指定しなければ、最初から最後まで全ての要素を置き換える。
置き換えられて、変更された配列そのものが返されます。
fill()メソッドの使い方は以下です。

配列.fill(置き換えたい要素, 開始インデックス, 終了インデックス);
let array2 = ["A", "B", "C", "D", "E", "F", "G"];
let array2_2 = array2.fill("X"); // 引数にインデックス番号が指定されていないので、全てが置き換わる。
let array2_3 = array2.fill("O", 2, 6);
// インデックス番号2〜5の要素を、"O"で置き換える。
console.log(array2_2);
// ["X", "X", "X", "X", "X", "X", "X"]
console.log(array2_3);
// ["X", "X", "O", "O", "O", "O", "X"]

要素の順番を逆にしてみる!

最後に、配列の要素を逆の順番にしてみましょう!
いちいち取り出す必要はないですよ、reverse()メソッドを使うんです!
reverse()メソッドの使い方は以下です。

配列.reverse();
let array3 = ["", "", "", "", "", "", ""];
let array3_2 = array3.reverse();
console.log(array3_2);
// ["と", "へ", "ほ", "に", "は", "ろ", "い"]

おわりに

配列自体を操作するメソッドについて、学ぶことができました!
お読みいただきありがとうございました!

私自身、まだまだ初心者なので、もし、間違いや補足などございましたら、コメントや編集リクエストなど、お願い致します!

参考資料

柳井政和著 『JavaScript[完全]入門』(2021)

MDN join()

MDN fill()

MDN reverse()

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0