あいさつ
みなさん、おはようございます!こんにちは!こんばんは!みーちゃんです!
先週はどんな感じでしたか??私は見事に風邪をひいてしまいました🤧
寒かったり寒くなかったりで服で温度調節するのがとても難しいです😨
今回はJavaScriptで配列について習ったので復習してきたいと思います📖
それではレッツーGO!!!
復習
〈配列について〉
配列とはいくつものデータを記録することのできる仕組みのことを言います。変数と同じように配列全体には名前をつけることができます。配列には先頭のデータから0、1、2というように番号がついています。この番号のことを添字、またはインデックスと言います
〈配列の宣言について〉
(基本形)
const 配列=[データ1,データ2,データ3...];
(例)
const fruits=['orange','appke','banana'];
console.log(fruits);
(空の配列の宣言)
const empty=[];
console.log(empty);
「他の書き方」
(基本形)
const 配列=newArray('データ1','データ2','データ3...');
(例)
const fruits=newArray('orange','apple','banana');
console.log(fruits);
(配列の長さの指定)
const fruits=newArray(3);
console.log(fruits);
//二つの書き方は同じものであり、[]はnewArrayの省略形〈配列の基本操作について〉
「値の取得と変更」
(例)
const fruits=['orange','apple','banana'];
console.log(fruits);//0番目の値を取得する
fruits[1]='peach';//1番目の値を変える
console.log(fruits);
//配列自体はconstで宣言しているが配列の値は後から変更できるので注意する
「配列の長さ(値の数)を取得」
const fruits=['orange,'apple','banana'];
console.log(fruits.length);//lengthの値はコンソールに表示されている
console.log(fruits);
「配列の値の最後を取得」
const fruits=['orange','apple','banana'];
console.log(frtuits[fruits.length-1]);〈配列とランダムについて〉
配列は添字で値を取得し添字は連番0、1、2…となっているためランダムと相性がいいです。
(例)
const fruits-[7orange','apple','banana'];
let random=Math.floor(Math.random()*3);
console.log(fruits[random]);
//ランダムに取得する数字は配列の値の数と等しい場合が多いため次の書き方がおすすめ
let random=Math.floor(Math.random()*fruits.length);〈配列とfor文について〉
ランダムでも述べた通り添字は連番となっているためfor文と相性がいいです。
(例)const fruits=['orange','apple','banana'];
for(let i=0;i<fruits.length;i++){
console.logh(`${i}番目の値は${friits[i]}です`);
}〈複数要素の取得について〉
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li class="obj">ccc</li>
<li class="obj">ddd</li>
</ul>
<script>
</script>
</body>
「要素名で指定する」
const list=document.getElementsByTagName('li');//Elements複数形であることに注意する
console.log(list);
//取得した値は配列のように扱うことができる
const list=document.getElementsByTagName('li');
//for文で一文字ずつ取り出す
for(let i=0;i<list.length;i++){
consoloe.log(list[i]);
}〈クラス名で指定するやり方について〉
const list=document.getElementsByClassName('obj');
console.log(list);
for(let i=0;i<list.length;i++){
console.log(list[i].innerHTML);
}〈セレクタAPIで指定するやり方について〉
CSSセレクタと同様の記述で要素を指定することができる
const elem=document.querySelector('.obj');//セレクタに一致した最初の要素だけ取得する
console.log(elem);
const all=document.querySelectorAll('.obj');//セレクタに一致したすべての要素を取得する
console.log(all);
for(let i=0;i<all.length;i++){
console.log(all[i]);
}〈指定方法について〉
document.getElementsByTagName('要素名');
document.getElementById('id名');
document.getElementsByClassName('class名');
document.querySelector('セレクタ');
document.querySelectorAll('セレクタ');さいごに
今週も今日で終わり!楽しい土日を過ごしてまた月曜日から頑張りましょう!
ちなみに私はこの一週間は咳によって声が大変なことになりました😂
皆さんも風邪には十分気をつけてくでさい!
