0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JSのお勉強 その1

Last updated at Posted at 2020-06-02

自分用に、、結構調べ直したりが多いので 汗

##JSの記法

記法名 主な用途 使用例
キャメルケース 変数/関数名 lastName
Pascal記法 クラス・コンストラクター名 LastName
アンダースコア 定数名 LAST_NAME , last_name

##マジックナンバー
意味を持たない数字(ぱっと見なんの値かわからないやつ)
消費税計算の 1.1 とかがいきなりコード内に記述されてても、
読み解かないとなんの値かわからない、こういう数字。

##テンプレート文字

`こんにちは、${name}さん。`

これで変数を + を使わずに文字列に入れられる。

##オブジェクトリテラル記法

let obj = { x:1 , y:2 , z:3 };
obj.x     //結果は1
obj['x']; //結果は1

obj.x、の x は識別子の命名規則(頭に数字使えない)に沿ってるので数字の指定はNG

##演算子

演算子 意味 使用例
+ 数値の加算 1 + 1 //2
- 数値の減算 1 - 2 //1
* 数値の乗算 2 * 2 //4
/ 数値の除算 10 / 5 //2
% 除算したあまり 10 % 4 //2
++ *前置加算 a = 3; b = ++a //bは4になる
++ *後置加算 a = 3; b = a++ //bは3になる
-- *前置減算 a = 3; b = --a //bは2になる
-- *後置減算 a = 3; b = a-- //bは3になる
*前置加算では a1 を加算してからbに代入、後置加算では ab に代入してから a+1 してるので結果が異なる。
 後置加算の ab の結果は a4b3 になる。

##代入演算子

演算子 意味 使用例
= 変数へ値を代入 x = 1
+= 加算したものを代入 x = 1; x += 2 //3
-= 減算したものを代入 x = 3; x -= 1 //2
*= 乗算したものを代入 x = 2; x *= 2 //4
/= 除算したものを代入 x = 6; x /= 3 //2
%= 除算したあまりを代入 x = 7; x %= 3 //1
**= べき算を代入 x = 7; x **= 3 //xは7の3乗なので、 343 になる
&= ※論理積演算した結果を代入 a = 3; b = a++ //bは 3 になる
|= ※論理和演算した結果を代入 a = 3; b = --a //bは 2 になる
^= ※排他的論理和演算した結果を代入 a = 3; b = a-- //bは 3 になる
<<= ※左の値を右の値だけ左シフトした結果を代入 a = 3; b = a-- //bは 3 になる
>>= ※左の値を右の値だけ右シフトした結果を代入 a = 3; b = a-- //bは 3 になる
>>>= ※左の値を右の値だけ右シフトした結果を代入 a = 3; b = a-- //bは 3 になる
※この辺りはちょっとまだ理解できてない、、難しい。。

##定数の再代入

//NG例1
const hoge = 100;
hoge = 200;

//NG例2
const hoge = [100,200,300];
hoge = [500,600,700];

//OK例
const hoge = [100,200,300];
hoge[0] = 500;

イメージとして、const hoge = この右側はhogeがみてる参照先

NG例1はhogeの参照先がかわるのでダメ、
NG例2もhogeの参照先がかわってるのでダメ、OK例では参照先が変わらず、
参照先の値だけを変更してるので、OK。
まー基本的には定数は変更しない。

##分割代入
配列/オブジェクトを分解して配下の要素/プロパティ値を個々の変数に分解するための構文。
むつかしい・・・とりあえず下記で。。
###配列
####今までの配列の値の取り方

var hoge = [10 , 20 , 30 , 40 , 50 , 60 , 70];
var x0 = hoge[0];
var x1 = hoge[1];
var x2 = hoge[2];

####分割代入での値の取り方

let hoge = [10 , 20 , 30 , 40 , 50 , 60 , 70];
let [x0 , x1 , x2 , x3 , x4 , x5 , x6] = hoge

console.log(x0) //この結果は 10 になる

####分割代入での値の取り方(応用)

let hoge = [10 , 20 , 30 , 40 , 50 , 60 , 70];
let [x0 , x1 , x2 , x3 , ...other] = hoge

console.log(x0) //この結果は 10 になる
console.log(x1) //この結果は 20 になる
console.log(x2) //この結果は 30 になる
console.log(x3) //この結果は [40 , 50 , 60 , 70] になる

###オブジェクト
####分割代入での値の取り方

let hoge = {name: '名前' , age: '年齢' , address: '住所'};
let {age , name} = hoge

console.log(age) //この結果は 年齢 になる

配列と違って、プロパティ名で紐づけるので、順番が変わっても大丈夫。
また、分割代入で、 [name: '名前' , age: '年齢' , address: '住所'] に対して、
let [age , name] = hoge とすると、address は無視される。
####分割代入での値の取り方(入れ子)

let hoge = {name: '名前' , age: '年齢' , address: '住所' ,other: {children: '2人' , dependents: 'いる'}};
let {age , name , other:{children}} = hoge

console.log(other) //この結果は {children: '2人' , dependents: 'いる'} になる
console.log(children) //この結果は 2人 になる

####分割代入での値の取り方(変数名を別名に)

let hoge = {name: '名前' , age: '年齢' , address: '住所'};
let {age: nenrei , name: namae} = hoge

console.log(nenrei) //この結果は 年齢 になる
console.log(namae) //この結果は 名前 になる

####デフォルト値を設定

let hoge = {name: '名前' , age: '年齢' , address: '住所'};
let {age , name , tel = 000} = hoge

console.log(tel) //この結果は 000 になる
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?