ジャバスクリプト

この記事では、JavaScript Proのヒントについて話します.ソリッドモダンなJavaScriptを書く方法を学び、昔から悪いコードを避けてください.

デバッグ
実際にはコンソールのログについてです.
どのようにコンソールログを使用しますか?コンソールログには良い方法と悪い方法があります.つの異なるオブジェクトを想像してください.それぞれは、このように独自の変数に割り当てられます.

const foo = { name: 'tom', age: 30, nervous: false } 
const bar = { name: 'dick', age: 40, nervous: false }
const baz = { name: 'harry', age:50, nervous: false }

これらを記録する明白な方法は、ちょうど後の1つです.
例えば、

console.log(foo);
console.log(bar);
console.log(baz);

しかし、主な問題は、これがログに記録されるとき、変数の名前を知らないということです.しかし、我々が我々が変数にオブジェクトに加える計算されたプロパティ名と呼ばれるここで使用できるトリックがあります.
次のようにします.

console.log({ foo, bar, baz });

これはコードフットプリントを減らすだけでなく、どの変数がこのデータを定義するかを正確に示します.コードの1行、1つのコンソールログと必要なすべての情報.
しかし、多分このデータは余分なので、いくつかのカスタムCSSスタイリングで目立つようにしたい.% signを使用してデータとCSSスタイルを置き換えることもできます.
したがって、% Cを追加し、2番目の引数を実際のCSSスタイルにします.
例えば、

console.log('%c My Friends', 'color: orange;')
console.log({ foo, bar, baz });

あなたが気づいたかもしれない1つのことは、オブジェクトがすべて共有共有プロパティであるので、多分、我々はそれらをテーブルとして表示しなければならないでしょう.

console.table([foo, bar, baz]);

これはオブジェクトの配列を持っているときにとても便利です.あなたは、ちょうど配列でコンソールテーブルをします.
パフォーマンスをベンチマーキングする場合は、実際にコンソールで時間を追跡できます.

console.time('looper');
let i = 0;
while (i < 1000000) { i ++ }
console.timeEnd('looper')

時間の追跡は素晴らしいですが、コンソールの場所を知る必要がある場合.ログの由来.
我々のデータベースから項目を削除する本当に重要な機能があると想像しましょう、そして、我々は誤ってこのメソッドを二度呼ぶことを確認したいです.
この場合、コンソールトレースを関数に追加することができ、それが呼び出された場所のスタックトレースを与えることができます.また、このコードを実行した場合、何が定義されているかについては、コンソールのログを取得します.
例えば、以下のように書くことができます.

const deleteMe = () => console.trace('bye bye database')

破壊する
ここでは、あなたのコードを簡潔かつ効率的にできるだけいくつかの異なる方法を示すつもりです.
我々は動物のデータを持つオブジェクトを持って想像してみましょう、我々は動物を養う方法を教えてくれる機能が必要です.
例えば、

function feed(animal) {
    return `Feed ${animal.name} ${animal.meal} kilos of ${animal.diet}`
}

これはあまりにも悪く見えませんが、私たちは何度も繰り返し動物の単語を繰り返していることに気づくでしょう.オブジェクトの破壊と呼ばれるテクニックがあります.
オブジェクトを取る関数がある場合は、そのプロパティの一握りだけを使用する必要があります.我々は議論そのものでそれらを放棄することができます.私たちはちょうどブラケットにそれをラップして、それから我々が使いたいオブジェクト特性の名前を通過します.

function feed({ name, meal, diet }) {
    return `Feed ${name} ${meal} kilos of ${diet}`
}

それで、我々は同じストリングをフォーマットすることができます、しかし、我々は実際に直接語動物を使わなければなりません.これは、この単純な機能に適度の利得のように見えるかもしれませんが、多くのプロパティを持つ大きなオブジェクトを持っているとき、これは巨大な違いを生むことができます.
オブジェクト引数の中でこの括弧の構文が好きでないなら、実際に私たちがこれをすることができるもう一つの方法がちょうど良いです.

function feed(animal) {
    const { name, meal, diet } = animal;
    return `Feed ${name} ${meal} kilos of ${diet}`
}

関数を通して変数のようなプロパティを使用することができます.これにより、複数のオブジェクトの2 D構造と単一の関数がある場合には、より良い方法になりがちです.

テンプレートリテラル
この部分では、コードで既に使用しているテンプレートリテラルについてお話します.しかし、実際にはここで話をするより多くのです.
例えば、

const horse = {
   name: 'Topher',
   size: 'large',
   skills: ['jousting', 'racing'],
   age: 7
}
let bio = horse.name + ' is a ' + horse.size + ' horse skilled in ' + horse.skills.join(' & ')

あなたは、変数と文字列を持っている場所の上に似ているような文字列連結の多くを見るでしょう、そして、あなたは他のものの全体の束に加えて、式の間のスペースを管理しなければなりません.
このタイプのコードは扱いにくいが、現代JavaScriptのテンプレートリテラルは完全にこの問題を解決します.
値を連結するのではなく、実際に文字列に直接補間できます.
あなたは、あなたのストリングをbackticksで定義することによってこれをすることができます、そして、次に、ドル記号ブラケットを使用してください、そして、あなたがそこで内部に望むどんな変数または表現でも使用してください.このように:

const horse = {
   name: 'Topher',
   size: 'large',
   skills: ['jousting', 'racing'],
   age: 7
}
bio = `${name} is a ${size} skilled in ${skills.join(' & ')}`

これははるかに読みやすく、多くの維持に容易になります.
しかし、実際には、さらに一歩を踏み出すことができますし、純粋に機能的な文字列を構築します.そこで、最初の引数として文字列の配列をとる馬のageという関数を書きます.
この機能を想像してください.

function horseAge(str, age) {
   const ageStr = age > 5 ? 'old' : 'young';
   return `${str[0]}${ageStr} at ${age} years`;
}

しかし、ここで興味深いことは、この関数に規則的な引数を渡すのではなく、実際には単にテンプレートリテラルにアタッチすることができ、引数を解析することです.
例えば、

const bio2 = horseAge`This horse is ${horse.age}`;

それから、それはドル記号ブラケットの中に現れる順序で他のすべての引数を扱います.言い換えれば、1つの引数を取ることができますし、戻り値の文字列で複数の値を作成するために使用します.
これは、テンプレートのための非常に強力な概念にすることができます.

拡大構文
ポケモンのための1つのオブジェクトとその様々な属性を定義する統計のためのもう一つのものを想像しましょう.

const pikachu = { name: 'Pikachu' }
const stats = { hp: 40, attack: 60, defense: 45 }

統計オブジェクトからPikkachオブジェクトにプロパティを割り当てたいとしましょう.それをする1つの方法は、元のpikachuオブジェクトの上でちょうどそれらを再定義することです.

pikachu['hp] = stats.hp
pikachu['attack'] = stats.attack
pikachu['defense'] = stats.defense

一つについては、これは本当に醜いと冗長ですが、我々は、おそらく我々のポケモンのレベルが時間をかけて上に、私たちは、各レベルを自分のオブジェクトとして表現したいと言うことができるので、我々はおそらく、新しい不変のオブジェクトを作成したい場合は、元のオブジェクトを変異している.
オブジェクトを使うことができました.Assign ()をここで指定し、元のオブジェクトを取り、統計情報とマージします.

const lv10 = Object.assign(pikachu, stats)
const lvl1 = Object.assign(pikachu, { hp: 45 })

これはあまり良くありませんが、スプレッド構文でこれを行うにはもっと簡潔な方法があります.新しいオブジェクトを作成し、それの前に3つのドットで、既存のオブジェクトを配置することによって.
例えば、

const lvl0 = { ...pikachu, ...stats }
const lvl1 = { ...pikachu, hp: 45 }

これは左から右に新しいオブジェクトを作成します.したがって、プロパティは右側に優先順位があります.再び、これはほとんど構文的な砂糖です、そして、それはちょうどあなたのコードをより読みやすくて、維持するのがより簡単にします.
また、スプレッド構文を配列に使用することも可能です.私たちがストリングの配列を持っていると想像しましょう、そして、我々は追加項目をこの配列に押す必要があります.

let pokemon = ['Arbok', 'Raichu', 'Sandshrew']

これを行う古い学校の方法は、ちょうど1つずつ配列に新しいアイテムをプッシュすることです.例えば、

pokemon.push('Bulbasaur')
pokemon.push('Metapod')
pokemon.push('Weedle')

しかし、今日の世界では、これらの3行のコードを、新しい項目を持つ配列を定義し、元の配列に展開された構文で1つにすることができます.このように:

pokemon = [...pokemon, 'Bulbasaur', 'Metapod', 'Weedle']
pokemon = ['Bulbasaur', ...pokemon, 'Metapod', 'Weedle']

ループ
ここで、他の合計を表す数の配列があることを想像しましょう.

const orders = [500, 30, 99, 15, 223]

現在、この配列に基づいていくつかの値を計算する必要があります.多分、私たちは、一人一人に税金を加えて、マネージャーによって見直される高い価値命令をろ過する必要があるかもしれません.つのオプションは、ループのための古典を使用するように、ほとんどすべてのプログラミング言語で見つけることができます.例えば、

const total = 0;
const withTax = [];
const highValue = [];
for(i = 0; i < orders.length; i ++) {
  // Reduce
  total += orders[i];
  // Map
  withTax.push(orders[i] * 1.1);
  // Filter
  if (orders[i] > 100) {
    highValue.push(orders[i])
  }
}

このコードは非常に醜いです、そして、それは変異している値が我々のコードをもう少し予測不能にするかもしれません.幸いにも、現代のJavaScript配列メソッドを使用することで、3行のコードにこれを減らすことができます.このように:

// Reduce
const total = orders.reduce((acc, cur) => acc + cur)
// Map
const withTax = orders.map(v => v * 1.1)
// Filter
const highValue = orders.filter(v => v > 100)

非同期/待機
無作為に乱数に解決する約束を返すランダムと呼ばれるメソッドを作成しましょう.

const random = () => {
  return Promise.resolve(Math.random())
}

今、我々は3つの異なる非同期番号をもう一方の後に1に取り戻したいです、そして、結局、一緒に終わりまで彼らを加えてください.それは愚かな例のように見えるかもしれませんが、実際には、データベースから1つの項目を取得しなければならないときに、実際の世界で何度も何度も動作します.
約束をすると、非同期の値を解決するのを待ちます.例えば、

const sumRandomAsyncNums = () => {
  let first;
  let second;
  let third;
return random()
       .then(v => {
           first = v;
           return random();
       })
       .then(v => {
           second = v;
           return random();
       })
       .then(v => {
           third = v;
           return first + second + third;
       })
}

約束の鎖を書き換えることができます.唯一の違いは、それが約束を返すことを強制する関数の前にasyncを追加することです.このように:

const sumRandomAsyncNums = async () => {

    const first = await random();
    const second = await random();
    const third = await random();
    return first + second + third;
}

ここでの真の利点は、私たちが約束の前で待つことができ、それらを実際の変数値に解決させることです.それで、それらの当時のコールバックを使用する代わりに、我々はちょうど言うことができますconst first = await random();2番目と3番目の数字についても同じことをします.今、このコードを読んで理解するほうがずっと簡単です.なぜなら、私たちはライン単位で行けるし、他の番号を待っている1つの番号などを待っているのを見ることができるからです.
この非同期/待望の概念は、JavaScriptに今までに最も素晴らしいものの一つです!
今日はこれです.
あなたの読書のおかげ!