- map
- filter
下記URLと全く同じ状況で詰まってたのでその記録。
参考:https://teratail.com/questions/373
つまるところ
【数列】+ 【数列】 + 【数列】= 【数列】;
なんだけど、
【文字列】+ 【数列】 + 【数列】= 【文字列】;
だとこうなるよって話。
別件でDOM操作してて、valueの値を全く弄れなくて悩んでたら
文字列と数列の違いが原因だった。
この二つは見た目一緒でも、扱われ方は全然違うらしい。
よく見るとコンソールでも色が違かった。
ついでに型変換方法まとめ
動的な型変換
数列>文字列
const num = 123;
const result1 = num.toString();
const result2 = String( num );
console.log( result1 ); //"123"
console.log( typeof result1 ); //string
console.log( result2 ); //"123"
console.log( typeof result2 ); //string
文字列>数字
const num = 123;
const result1 = Number( str );
const result2 = parseInt( str );
console.log( result1 ); //"123"
console.log( typeof result1 ); //number
console.log( result2 ); //"123"
console.log( typeof result2 ); //number
暗黙的な型変換
暗黙的な型変換 = 動的な型変換がに対して、明示的に書かなくても行われる型変換。
console.log(1 + "2"); // => "12"
console.log(1 - "2"); // => -1
const x = 1, y = "2", z = 3;
console.log(x + y + z); // => "123"
console.log(y + x + z); // => "213"
console.log(x + z + y); // => "42"
つまり・・・
- 「ー」の時は文字列が数列になる。
- ”先に演算”されてると、文字列も数列として扱われる。
として理解。
データ型-javascript備忘録
プリミティブやら何やらワードは知ってるけど、理解してなかったデータ型。
JSONを理解する上でも必要な知識になりそうなものをちょっとだけ整理。
前提としてプログラミング言語によってデータ型は異なる。
また異なった解釈をされている場合もある。
Javascriptには2種類のデータ型があって、
プリミティブ型とオブジェクト型に分けられるそれが以下。
プリミティブ型
- 数値型(Number)
┗一般的な整数、少数。 - 長整数型(BigInt)
┗Numberより大きな数値。100nみたいに書く - 文字列型(String)
┗文字、または文字列。 - 論理型(Boolean)
┗trueとfalseの真偽値。 - シンボル型(Symbol)
┗シンボル値という固有の識別子を表現する不変のデータ型。ES6で実装された。
現状ほとんど使われてないが、オブジェクトのキーとして今後使われていく? - undefined
┗値が存在しない。値が代入される前の値。 - Null
┗値が未定義。意図的に値がないことを示す値。
オブジェクト型
プリミティブ型でないものは全てオブジェクト型。
下3つはよくわからん。というか他にもあるらしい。
- オブジェクト(Object)
┗キーとプロパティからなる例のやつ - 関数(Function)
┗厳密にはデータ構造ではない。functionが返される。 - 配列(Array)
┗複数のデータの取りまとめ const ary = [‘red’,’orange’,’blue’] - 日時(Data)
┗日付の型、Dataオブジェクト - 正規表現(Reg Exp)
- マップ(Map)
- セット(Set)
ポートフォリオサイト作成
した!
https://portfolio.moyorimura.com/
前からあったけど、刷新してついでにSSL化もした。
本当はもっとお洒落にしたかったんだけど、時間的技術的な問題で断念。
WORKSの項目は結構うまくできたと思う。
色々ブラッシュアップしてかないとなー
そのうちWP化もしよう。
要素の選択
DOM操作の基本、要素をひっぱる方法まとめ
<div class="row col-10 mb-3 mx-auto justify-content-center">
<button id="btn1" class="btn btn-danger col-2 m-1">ボタン赤</button>
<button class="btn btn-success col-2 m-1">ボタン緑</button>
<button class="btn btn-primary col-2 m-1">ボタン青</button>
<button class="btn btn-warning col-2 m-1">ボタン黄</button>
</div>
.getElementById();
ピンポイントで習得できるが、IDの設定がいる。
const btn = document.getElementById('btn1');
console.log(btn.textContent); //結果 ボタン赤
.getElementsByClassName()[];
同名のクラスが複数習得されてオブジェクトされる。
getElementsなのに注意。
const btn = document.getElementsByClassName('btn')[1];
console.log(btn.textContent); //結果 ボタン緑
.getElementsByTagName()
const btn = document.getElementsByTagName('btn')[2];
console.log(btn.textContent); //結果 ボタン青
タグ名でもオブジェクトで指定できる。
変数の違い
let・・・基本これ使う。constと違って内容を変更できる。
const・・・定数(厳密には違う)。一度代入した内容を変更できない。
var・・・基本使わない旧変数。再宣言のみ可
const | let | var | |
---|---|---|---|
再宣言 | × | × | ○ |
再代入 | × | ○ | ○ |
スコープ | ブロック | ブロック | 関数 |
ホイスティング | エラー | エラー | undefined |
スコープ・・・変数や関数の影響範囲
┗ブロックスコープ・・・{ と } で括られた、 プログラム処理上のひとまとまり
┗関数スコープ・・・宣言された関数の{ と } で括られた範囲内。
後半いまいち釈然としないが一旦これで覚えておく。
会社倒産したことだし、今後のために備忘録的にブログ書いていく。
前に書いてたゲームの日記は恥ずかしいから一旦非表示。