効果的な JS のヒント-jsチュートリアル-php.cn

効果的な JS のヒント

零到壹度

リリース： 2018-03-20 13:37:42

オリジナル

1786 人が閲覧しました

この記事では主に効果的な JS のヒントについて説明します。必要な方はぜひ参考にしてください。

1. 三項演算子

プロジェクトで if...else ステートメントを書きたい場合、複数の判定がない場合は、簡略化のために代わりに三項演算を検討できます

let a = 1, answer = null
if( a > 5 ) {
    answer = &#39;大帅比&#39;
}else{ 
    answer = &#39;前端强无敌&#39;
}
简写：answer = a > 5 ?  &#39;大帅比&#39; : &#39;前端强无敌&#39;

ログイン後にコピー

2. ES6提供)

for(let i = 0; i < arr.length; i++){}
简写：for (let [index, item] of arr.entries()) {
        index为下标，item为每一项内容
}

ログイン後にコピー

3. アロー関数(es6)

function test （）{ console.info（name） }
setTimeout（function() { console.info(&#39;&#39;okay) }， 1500）
arr.forEach(function (item) {    
    console.info(item)
})
简写： let test = （args） => {  console.info(name) }
setTimeout(() => { console.info(&#39;okay&#39;) }, 1500)
arr.forEach(item => console.info(item))

ログイン後にコピー

これはアロー関数を使っても変わりませんね～！

4. スプレッド演算子

配列のマージ:

const a = [1, 3, 5]
const nums = [2, 4, 6].concat(a);

ログイン後にコピー

配列の複製: //配列は参照型であるため、多くの場合、操作のために別の配列を複製する必要があります

const arr = [1, 2, 3, 4]
cons arr2 = arr.slice()
简写： const nums = [2, 4, 6,  ...a]  // [2, 4, ...a, 6]

ログイン後にコピー

a は任意の位置に挿入できます最後に追加するだけでなく、位置を指定する方が concat よりも便利です。

オブジェクトで使用:

const obj =  { a:1 , b:2, c:3,  ...obj2 } =  { a:1 , b:2, c:3,  d:5, e: 6}
obje = {d:5, e: 6}

ログイン後にコピー

5. オブジェクト属性の省略形

キー値が同じ場合

const obj = {x:x，y:y}
简写：cont obj = {x，y}

ログイン後にコピー

6. 行文字列の省略形

const learn = &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
简写：const learn = `study vue react rn nih
                                  study vue react rn nih
                                 study vue react rn nih
                                 study vue react rn nih
                                study vue react rn nih`

ログイン後にコピー

$ {} は変数に直接入れることができます。使い方はとても簡単です。バッククォートを忘れずに使用してください。！！

8. Array.find

配列内の必要なデータを見つけたい場合、ES6 では Find の操作を簡素化することができます

const url = &#39;http://ab.cc.com/&#39; + data + &#39;/beta/info&#39;
简写：const url = `http://ab.cc.com/${data}/beta/info`

ログイン後にコピー

9.疑似配列にはインターエーターインターフェイスがありません)

cont data = [
{&#39;type&#39;: &#39;dog&#39;,  &#39;color&#39;: &#39;red&#39;},
{&#39;type&#39;: &#39;cat&#39;, &#39;color: &#39;white&#39;},
{&#39;type&#39;: &#39;bird&#39;, &#39;color&#39;: &#39;blue&#39;}
]
function findeClor(color) {
        for(let i = 0; i < data.length; i ++ ) {
                if(data[i].type== &#39;cat&#39; && data[i].color== color) {
                        return data[i]
                } 
        }
}
简写：let cat = data.find(item => item.type == &#39;cat&#39; && item.color== &#39;red&#39;)

ログイン後にコピー

p は疑似配列であり、forEach などのメソッドを使用して走査することはできません。より面倒な for ループのみを使用できます

let p = document.getElementById(&#39;p&#39;)

ログイン後にコピー

現時点では、p は真に走査可能な配列です

10. 配列の重複排除、Set

let a = [2, 3, 1, 2]

new Set() は疑似配列を返します。スプレッド演算子を使用してそれを実際の配列に変換する必要があります。 Array .from() も良い選択です

let b = [... new Set(a)] // [2, 3, 1]

11. デフォルトパラメータ

function test(a, b) , c = 'Dashuaibi', d = false){

}

test('front-end', 'Beima')

パラメータ c と d は渡されません。この時点で、c はデフォルトで 'Dashuaibi' になります。 ' 、d のデフォルトは false

12. 必須パラメータ

JS では、関数がパラメータを渡さない場合、パラメータはデフォルトで未定義になります。これによりプログラム例外が発生する可能性があるため、例外をスローする必要があります

let p = Array.from(p)  或者 let p = [...p]

ログイン後にコピー

以上が効果的な JS のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。