私が書くまとめのJavaScriptテクニック.

7585 ワード

JavaScript テキストリンク

考えを整理する.
三年間SI会社を辞めました.
あとは「楽屋かフロントか」に悩んだ
「さすがバックエンド?!JavaやSpringを勉強している間に、
新しい会社に入社する機会がある.
そして担当はフロント(こちらもMosby…)

以前は目やにしか使われていなかったJavaScriptをよりよく知るために、
あちこちで見かけたチラシを整理しなければなりません.

さんこうえんざんし

IF文の処理には

を用いる.

'?' ':'

[before]

const passOrFail = (score) => {
        if(score > 90){
            return "pass";
        }else{
            return "fail";
        }
    }

[After]

return score>90 ? "pass" : "fail";

空の連結演算子

チェック

nullと未定義の

左側のコードが空または未定義の場合、右側のコードが実行されます.

の値と関数

を入力できます.

'??'

[before]

    const printMessage = (text) => {
        let message = text;
        if(text===null || text === undefined){
            message = 'nothing to display'
        }
        console.log(message);
    }

[After]

    const printMessage = (text) => {
        const message = text ?? 'Nothing to display';
        console.log(message);
    }

論理演算子

falsey検査

左側のコードがfalseの場合、右側のコードが実行されます.

falsey:未定義/null/false/0/0/NA/'/"

'||'

[before]

    const printMessage = (text) => {
        let message = text;
        if(text===null || text === undefined){
            message = 'nothing to display'
        }
        console.log(message);
    }

[After]

    const printMessage = (text) => {
        const message = text || 'Nothing to display';
        console.log(message);
    }

構造分解の割り当て

オブジェクトの属性を分解し、その値を各変数に含める

オブジェクト.value式の繰返しを避ける

[before]

    const person = {
        name :'gyuho',
        age : 32,
        phone : '01011112222'
    }

    const instroducePerson = (person) => {
        displayName(person.name);
        displayAge(person.age);
        displayPhone(person.phone);
    }

[After]

    const person = {
        name :'gyuho',
        age : 32,
        phone : '01011112222'
    }

    const instroducePerson = (person) => {
        const {name, age, phone} = person;
        displayName(name);
        displayAge(age);
        displayPhone(phone);
    }

展開構文(spread-syntax)

列または文字列などの繰り返し可能な文字
->0以上の引数(関数呼び出し)または要素(フラットテキスト呼び出し)を

に拡張します.

'...'

[before]

    const item = {
        type : 'shirt',
        size : 'M'
    }
    
    const detail = {
        price : 1000,
        made : 'korea',
        gender : 'M'

    }

    item['price'] = detail.price;

    const newObject = new Object();
    newObject['type'] = item.type;
    newObject['size'] = item.size;
    newObject['price'] = detail.price;
    newObject['made'] = detail.made;
    newObject['gender'] = detail.gender;

[After]

    const item = {
        type : 'shirt',
        size : 'M'
    }
    
    const detail = {
        price : 1000,
        made : 'korea',
        gender : 'M'

    }

//오브잭트 속성 합하기
    const newShirt2 = {...item, ...detail};
    
//price 값만 덮어쓰기
    const newShirt2 = {...item, ...detail, price : '2000'};
    
    
//push
    const newShirt3 = {...item, brand:'nike'};
    
//unshift
    const newShirt4 = {brand:'nike', ...item};

?.演算子(Optional-Chaining)

オブジェクト属性

にアクセスする際の簡潔性と信頼性

'?.'

オブジェクトが定義されていないかnullの場合、未定義が取得されます.

[before]

    const showJobTitle = (person) => {
        if(person.job && person.job.title) {
            console.log(person.job.title)
        }
    }

[After]

// ?. 적용
    const showJobTitle = (person) => {
        if(person.job?.title) {
            console.log(person.job.title)
        }
    }

// Nullish coalescing operator 응용
    const showJobTitle2 = (person) => {
        const title = person.job?.title ?? 'No Job Yet'
        console.log(title)
    }

テンプレート文字

文字列を出力場合、${}を使用して文字列に変数

を出力する.

'${}', '``'

[before]

    const person = {
        name : 'bob',
        score : '4'
    }
    
    console.log(
        'hello' + person.name +', your score is :' + person.score
    );

[After]

    const person = {
        name : 'bob',
        score : '4'
    }
    
//${} 사용
    console.log(
        `hello ${person.name} , your score is :  ${person.score}`
    );

// JPX에서 사용
        <div>
            hello {person.name} your score is {person.score}
        </div>

アレイ(Loops)

アレイ処理用

[before]

for문 이용

[After]

    const items = [1,2,3,4,5,6];
    
    
    
//filter, map, reduce 적용
	
    const getAllEvnes = (items) => {
        return items.filter((num) => num % 2 === 0)
    }

    const multiplyByFor = (items) => {
        return items.map((num) => num *4 )
    }

    const sumArray = (items) => {
        return items.reduce((a,b)=> a+b,0)
    }

// 변수 형으로 표현

    const evens = items.filter((num) => num % 2 === 0);
    const multiples = evens.map((num) => num *4 );
    const sum = multiples.reduce((a,b)=> a+b,0);

// 한번에 표현

    const result = items.filter((num) => num % 2 === 0)
                        .map((num) => num *4 )
                        .reduce((a,b)=> a+b,0)

重複除外

セットのデータ構造は繰り返し不可能であるため、

をコピーするために使用することができる.
[before]

    const array = [1,3,6,2,3,1,2,5,2];
    console.log(array)

[After]

    const array = [1,3,6,2,3,1,2,5,2];
    console.log([...new Set(array)])

非同期の適用(async,await)

承諾をasync、await形式で実現
[before]

    displayUser(){
        fetchUser()
            .then((user)=> {
                fetchProfile(user)
                    .then((profile)=>{
                        updateUI(user,profile);
                })
            }
        )
    }

[After]

    async displayUser () {
        const user = await fetchUser();
        const profile = await fetchProfile(user);
        updateUi(user,profile);
    }

資料の出所

DREAMコードBy Ellinie YouTube教室ビデオ
https://www.youtube.com/c/%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC/videos

Reference

この問題について(私が書くまとめのJavaScriptテクニック.), 我々は、より多くの情報をここで見つけました https://velog.io/@hadoyaji/내가-쓰려고-정리하는-자바스크립트-팁들

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Fluter-Providerステータス管理

どのように2022年にGoogleのrecaptcha v 3を正しく統合するには?