JavaScript #2

エン夫人をコードしたJavaScript中級チュートリアル140分を収集します.
長すぎるので#2#3に分けて書きます
グロも頭の中もちゃんと整理しておきます.

1.変数

var
1)宣言変数を再度宣言できます.

var name = ‘Mike’;
var name = ‘jane’;

2)varは宣言前に使用できます.(がんばって)
ただし、宣言はエスケープされますが、割り当てはエスケープされません.

var name;
console.log(name);     // undifined
name = ‘Mike’;  	   // 할당

let
1)宣言された変数を再宣言できない
2)letもエスケープされるが,TDZのためvarのように動作しない.(仮Dead Zone、エスケープはスキャン単位で発生します.)

** TDZ (Temporal Dead Zone)
直訳すると一時的な死角地帯です.
let,constはvarとは異なり,それぞれ宣言と初期化を行う.このとき、宣言フェーズと初期化フェーズの間をTDZと呼ぶ.初期化ステップと割当てステップは後で行われるため、TDZで変数を検索するとエラーが発生します.
**スキャン
-var:関数スキャン(function-scoped)
-let,const:ブロックスキャン//関数,if文,for文,while文,try/catch文など.

変数の生成正

var
1)宣言と初期化ステップ:初期化、未定義の割り当てステップ
2)分配ステップ

let
1)宣言フェーズ(->保護済み)
2)初期化フェーズ(->実際のコードに到達した場合)
3)分配ステップ

const
1)宣言+初期化+割当

2.コンストラクション関数(中間クラス)

複数の類似オブジェクトを作成する必要がある場合に使用します.

オブジェクト文字

let user = {
	name : ‘Mike’
    age. : 30
 }

ジェネレータ関数
最初の文字は主に大文字を使用し、new演算子を使用して呼び出します.new呼び出しを使用しない場合は、関数自体が呼び出されます.

function User(name, age) {
		this.name = name;
        this.age = age;
}

	let user1 = new User(‘Mike’, 30);
	let user2 = new User(‘Janne’, 22);
    let user3 = new User(’Tom’, 17);

動作過程

function User(name, age) {
	// b. 객체를 만들고 this에 할당한다. — 실제코드에 없는 부분
	// this = {}

	// c. 함수 본문을 실행하면서 this에 프로퍼티들을 추가한다.
    this.name = name;
    this.age = age;
    
	// d. this를 반환한다. — 실제코드에 없는 부분
	// return this;
}
	new 함수명() ; 	// a. 실행

3.オブジェクトが使用可能な方法

Object.assign()assign()assign()assign()assign()assign()assign()assign()assign()assign()assign()assign()assign()assign
-const newUser = Object.assign({}, user); //{}は初期値です
-初期値に追加すると、既存のpropertyに追加する初期値がpropertyとして追加されます.

Object.assign({ color : ‘blue’ }, user):

-初期値に既存のプロパティを入れると上書きされます.
-マージできます.

const user = {
	name : ‘Mike
}

const info1 = {
	age = 30
}

const info2 = {
	color : ‘blue’
}

object.assign(user, info1, info2);

Object.keys():鍵配列

を返す

const  user = {
	name : ‘Mike’
    age. : 30
}

object.keys(user);  // 	[“name”, “age”]

Object.values():戻り値配列

const  user = {
	name : ‘Mike’
    age. : 30
}

Object.values(user);  // 	[“Mike”, “30”]

Object.entries():キー値はすべて配列

を返します.

const  user = {
	name : ‘Mike’
    age. : 30
}

Object.entries(user);  // [“name”, “Mike”] , [“age”, “30”]


Object.fromEntry():キー値配列をオブジェクト

に戻す

const arr =
[
	[“name”, “Mike”],
    [“age”,  30]
];
    Object.fromEntries(arr);
    
    // ** 결과 **
  
	// {
    //       name : ‘Mike’,
    //       age :  30
	// }


4.計算されたProperty（computed property）

let a = ‘age’;
const user = {
	name : ‘Mike’,
	[a] : 30     // 변수 a에 할당된 값이 들어옴
    
const test = {
	[1 +4] : 5,
    [“안녕”+”하세요”] : “Hello”
}

// 식 자체를 넣는것도 가능하다.

5.構成部品（Symbol）

property key:オブジェクト構成は文字列でもSymbolでも構いません.
Symbolは一意の識別子です.newは使用しません.

要素は、一意の識別子を作成するために使用される.唯一性が保障される.

const a = Symbol();
const b = Symbol();

console.log(a)
Symbol()
console.log(b)
Symbol()

a === b; (false)
a == b; (false)

オブジェクトの鍵として使用できます.

	const id = Symbol(‘id’);
    const user = {
    	name : ‘Mike’,
        age : 30,
        [id] : ‘myid’
}

user 		//  { name : “Mike”, age : 30, Symbol(id) : “maid”}
user[id]  	// “mid”

構成部品をスキップ
-Object.keys, Object.values, Object.メソッド(entriesなど)
-for .. inも記号をスキップします.
-特定のオブジェクトの元のデータに触れずに属性を追加できます.

Object.keys(user);    // [“name, “age”]
Object.values(user);  //[“Mike”, 30] 

Symbol.for():グローバル構成部品
-ない場合は作成し、ある場合はインポートするため、1つの構成部品しか保証できません.
-構成部品関数は毎回異なる構成部品値を作成しますが、Symbolです.forメソッドは1つを生成し,キーによって同じ素子を共有する.コードはどこでも使用できます.

	const id1 = Symbol.for(‘id’);
	const id2 = Symbol.for(‘id’);

	id1 === id2;   // true 

-名前を取得するときにkeyForを使用します.

Symbol.keyFor(id1) 	// 생성할 때 적었던 id1의 이름을 알려준다 “id” 

-グローバル構成部品でない場合はdescriptionで理解できます.

const id = Symbol(‘id 입니다’);
id.description; 	// “id 입니다.”

-Object.getOwnPropertySymbols(); : 構成部品のみが表示されます.

Object.getOwnPropertySymbols(user); 		//  [Symbol(id)]

-Reflect.ownKeys(); : 構成部品を含むすべてのキーを表示します.

Reflect.ownKeys(user);		// [“name”, “age”, Symbol(id)]

6.Number，Mathメソッド

からString()へ:テキストに変換かっこに2,16と書き、対応する進数

に変換します.

Math.Ceil():アップロード

Math.floor():

減少

Math.round():丸め

toFixed():1つの数字を引数として受け入れ、小数点以下の数字を返し、小数点より大きい数字を入力する場合は0で埋めます.文字列を返すことに注意してください.

isNaN():NaNは自己(=,====)を比較してfalseに戻ります.isnanを使ってこそ判断できる.

ParseInt():文字列を数値に変換します.
a.数字と文字が混ざっても仕事ができる.読める部分まで読んで、文字に出会ったら数字を返します.したがって、数値で始まるとNANが返されます.
b.2番目の引数に16、2を渡して進数変換することができる.

ParseFloat():浮動小数点を返します.

Math.random():0から1の間に乱数

を作成します.

Math.max()/Math.min():最大値/最小値

Math.abs():絶対値

Math.pow(n,m):二乗

Math.pow(2, 10);        // 1024

Math.sqrt():平方根

Math.sqrt(16);            // 4

7. String

String

backticの有用な機能

let desc = `맑고
화창한 날씨 입니다.`;
// 백틱은 개행을 별도로 표기하지 않아도됨.
let desc = ‘맑고\n화창한 날씨 입니다.’;
// 홑따옴표는 한 행에 몰아써야함. 개행 또한 불가능

length:文字列長

特定の場所

へのアクセス

let desc = ‘안녕하세요.’;
desc[2]      // ‘하’

からUpperCase()/t o LowerCase():大文字変換、小文字変換

str.indexOf(テキスト):いくつかの文字列を返します.なければ-1複数の文字列が表示されても、最初の文字列の位置のみが返されます.

str.slice(n,m):特定の範囲の文字列を切り取ります.nからmを返します.
a)mを書かないと、最後まで.
b)mを含まない.
c)陰から数える.

let desc = “abcdefg”

desc.slice(2);		// “cdefg”
desc.slice(0,5);    // “abcde”
desc.slice(2,-2).  //. “cde”


str.substr(n,m):nからm個を取得します.


let desc = “abcdefg”

desc.substr(2,4);     // “cdef”
desc.substr(-4,2).   // “de”

str.trim():前後の空白をなくす

str.repeat(n):文字列n回

繰り返し

文字列比較:Askyコードの使用
a) codePointAt(); : 文字でAskyコード値を取得できます
b)fromCodePoint:Askyコード値

最後に...

整理したものの、忘れても書かなくても、やっていないに等しい.役に立つ方法はタイムリーに使うことを覚えています...!
学習資料:JavaScript中級チュートリアル:140分完了/24579152