関数基礎
function hello(name){
console.log('こんにちは、' + name + 'さん。');
}
hello('桜井'); // こんにちは、桜井さん無名関数
関数名が無い＞結局helloが関数名に見えるから、無名関数という名前がややこしい。
以下の関数は、helloに何か戻り値が返るように見えるが、そうではなく関数定義。呼び出さなければ何も起こらない。
var hello => function (name) {
console.log('こんにちは、' + name + 'さん。');
};
hello ('桜井'); // こんにちは、 桜井さんアロー関数
前提：無名関数の変形
var hello = (name){
console.log('こんにちは、' + name + 'さん。');
};処理部が1処理のみの場合
var hello => (name) => console.log('こんにちは、' + name + 'さん。');※引数が1つであれば、 (name) のカッコを外してnameでもOK
引数が無い場合
var hello () => console.log('こんにちは、桜井さん。');これも、呼び出さなければ動かない。helloに何か値が入っているわけではなく、関数定義。
hello(); // こんにちは、 桜井さん即時関数
関数がカッコでくくられている。宣言と同時に実行される
(function (name) {
console.log(こんにちは、 + name + 'さん。');
}) ('桜井');Promise
Promiseは以下3つのステータスを持つ
- fulfilled:正常終了
- rejected:異常終了
- pending:未解決
～Promise 同期処理～
基礎：MDN_Promise
then, catch
Promiseオブジェクトに対し使用でき、 解決されたら次の処理を実行する。
■compName.service.ts
Promise<string> を返す関数を定義
async sampleFunc(): Promise<string> {
return await "sample"; // awaitするとPromiseが返る
}■compName.component.ts
呼び出し元
sample(): void {
const a = this.service.sampleFunc() //Promise
.then(result => { // 解決されたら以下を実行、ネストもOK
console.log(result);
})
.catch(err => { // then (ネスト含む) の実行中にエラーが発生した場合の処理
console.log(err);
});
}async, await
thenで起きていたネスト地獄を解消するために実装された
■compName.component.ts
async rootFunc(): void { // await処理を記述するメソッドにはasyncが必要（非同期であることを示すのみで意味はない）
const param = await this.service.getParam(); // awaitの処理はPromise型でないと『'await' は、この式に対しては効果がありません。』となる。
}■compName.service.ts
getParam(): Promise<void> { // Promiseの作り方
return new Promise((resolve, reject) => {
// Promiseの処理を記述
})
}Appendix
クエスチョンマーク（オプショナルチェーン、オプションパラメーター）
modelに記載するパラメータ名の末尾にクエスチョンマークをつけると、 null になる可能性がある値ということを示すことができる。
これは、 undefinedでパイプするのと同義。
■compName.model.ts
export class SampleEntity {
sampleParam?: string;
sampleParam: string | undefined; // 同義
}文字列比較
str1.equals(str2) // 左辺にnullにならない値を置く
!(str1.equals(str2)) // 否定否定にする場合は全体をカッコでくくること。!str1.equals(str2)とすると、!str1の箇所が、str1がfalseでない、という意味に変わってしまう。
インシデント
Promiseの値を取り出せない
■compName.component.ts
rootFunc(): void {
const param = this.service.getParam(); // getParam()がPromise<string>を返す場合
console.log(param);
//paramを取得したいだけなのに、 戻り値がPromiseなのでstringとして扱えない
}以下のように修正する
■compName.component.ts
async rootFunc(): Promise<void> { // asyncを付け、Promiseを返却する
const param = await this.service.getParam(); //param: Promise<string> // awaitを付けると、戻り値がstringになる
console.log(param);
}e.preventDefaultの代用
<a href="javascript:void(0)" (click)="on Relatives Clicked()"></a>他にreturn falseという書き方ができ、これは以下の2つをまとめた動作と同義。
- e.preventDefault
- e.stopPropagation
コメント