10 JavaScriptを考える

こんにちはプログラマーの今日、私はあなたの毎日のプログラミングに必要な約10の事柄を議論します.それで、それについて話しましょう.
エラー処理
エラーはプログラミング人生の一部です.時々、私たちは、このエラーのために、ボードとupsertに行くつもりです.
JavaScriptのエラーを処理する方法をあなたと共有します.
エラー処理、
try/catchブロックは、JavaScriptのエラーを処理するために基本的に使用されます.スクリプトにエラーが発生しない場合は、コードを中断する必要があります.
これはif文で簡単に行うことができるように見えるかもしれませんが、try/catchはif/else文ができることを超えて多くの利点を与えます.
試してみる//...
}catch(e){
//...
}tryステートメントを使用すると、エラーのコードブロックをテストできます.
catchステートメントでは、エラーを処理できます.例えば、try{
getData() // getData is not defined
}catch(error){
alert(error)
}これは基本的にtry/catchの仕組みです.コードをtryブロックに入れ、エラーがあるかどうかを確認すると、JavaScriptはcatchステートメントコントロールを行います.この場合、エラーに警告します.
コーディングした後に、エラーを取得し、これらのことを試してください.それはあなたを助ける.コード品質
コード品質Eはプログラミング人生で重要なことです.プロジェクトにコードを書きます.将来的に他の開発者によってコードを書き換える.彼らがあなたがコーディングしているものを理解しないならば.それは彼らに非常に不快になります.
今私はあなたのコードの品質を維持する方法について話します.
ブロックスコア宣言
言語の開始以来、JavaScript開発者は変数を宣言するためにvarを使用しました.キーワードVarはそのquirksを持ちます.そして、それを使用することによって、つくられる変数の範囲であるそれらの最も問題があります.var x = 10
if (true) {
var x = 15 // inner declaration overrides declaration in parent scope
console.log(x) // prints 15
}
console.log(x) // prints 15varで定義された変数はブロックスコープではないので、狭いスコープで再定義すると外側スコープの値に影響を与えます.
矢印関数
矢印関数はJavaScriptに最近導入されたもう一つの非常に重要な機能です.彼らは多くの利点を持って来る.まず第一に、彼らはJavaScriptの美しい機能的な側面を見て、簡単に書くために.let x = [1, 2, 3, 4]
x.map(val => val * 2) // [2, 4, 6, 8]
x.filter(val => val % 2 == 0) // [2, 4]
x.reduce((acc, val) => acc + val, 0) // 10上記のすべての例では、矢印の関数は、特徴的な矢印==の後に、伝統的な関数を簡潔な構文で置き換えます.
オプション連鎖
このPersonオブジェクトのような深くネストしたデータ構造を想像してください.この人の最初と最後の名前にアクセスしたいと思います.以下のようにJavaScriptで書きます:person = {
name: {
first: 'Jony',
last: 'Day',
},
age: 42
}
person.name.first // Jony
person.name.last // Dayヌルイット合体
ヌルishコアレッティング演算子を導入する前に、JavaScript開発者は、OR演算子を使用します.これは、合法的であるが、虚偽の値さえ、デフォルトに対するフォールバックをもたらす重要な警告で来ました.function print(val) {
return val ?? 'Missing'
}print(undefined) // 'Missing'print(null) // 'Missing'print(0) // 0print('') // ''print(false) // falseprint(NaN) // NaN論理代入
値が現在NULLであるならば、変数に値を代入したいとしましょう.これを書く論理的な方法は次のようになります.if (x === null || x == undefined) {
x = y
}短絡がどのように機能しているかを知っていれば、これらの3行のコードを、NULLのishコアレッティング演算子を使ってより簡潔なバージョンで置き換えることができます.x ?? (x = y) // x = y if x is nullish, else no effectコーディングスタイル
命名
オブジェクトキー(すなわち「セレクタ」)のためにcamelcaseを使用してください.
なぜ?コンポーネント内のスタイルオブジェクトのプロパティとしてこれらのキーにアクセスできます.したがって、CamelCaseを使用するのに最も便利です.// bad
{
'bangladesh-district': {
display: 'none',
},
}// good
{
bangladeshDistrict: {
display: 'none',
},
}発注
コンポーネントの後のスタイルを定義します.
我々は、コンポーネントの定義の後に自然に使用されるテーマを私たちのスタイルに、高次のコンポーネントを使用します.Styleオブジェクトを直接この関数に渡すと、間接的になります.// bad
const styles = {
container: {
display: 'inline-block',
},
};function MyComponent({ styles }) {
return (
<div {...css(styles.container)}>
Never doubt that a small group of thoughtful, committed citizens can
change the world. Indeed, it’s the only thing that ever has.
</div>
);
}export default withStyles(() => styles)(MyComponent);// good
function MyComponent({ styles }) {
return (
<div {...css(styles.container)}>
Never doubt that a small group of thoughtful, committed citizens can
change the world. Indeed, it’s the only thing that ever has.
</div>
);
}export default withStyles(() => ({
container: {
display: 'inline-block',
},
}))(MyComponent);営巣
同じインデントレベルで隣接するブロック間に空白行を残す.// bad{
bigBang: {
display: 'inline-block',
'::before': {
content: "''",
},
},
universe: {
border: 'none',
},
}//いい
{ }
ビッグバン:
表示:「インライン・ブロック」

'::before': {
  content: "''",

//
/」universe: {
border: 'none',
},
}インライン
高いcardinality(例えば支柱の値を使用する)を持っているスタイルのためにインラインスタイルを使用してください.
彼らがスタイルの別々のセットのために最高であるので、themedされたスタイルシートを生成することは高価でありえます.// bad
export default function MyComponent({ spacing }) {
return (
<div style={{ display: 'table', margin: spacing }} />
);
}// good
function MyComponent({ styles, spacing }) {
return (
<div {...css(styles.periodic, { margin: spacing })} />
);
}export default withStyles(() => ({
periodic: {
display: 'table',
},
}))(MyComponent);コメント
あなたは過去にスクリプトやプログラムを書いたことがありますか?おそらく、すべてのプログラマが何をするのを忘れる傾向があるかを忘れてしまいます.
コードを書くとき、あなたは混乱している若干の複雑なロジックを持っているかもしれません.だけでなく、これは後でそれを覚えているが、誰かがあなたのコードを表示する場合、彼らはまた、コードを理解することができるでしょう!
コメントに関するもう一つの大きな問題は、スクリプトをデバッグしているときに実行されるコードのビットを削除するコメントの能力です.このレッスンでは、JavaScriptのコメントの2つのタイプを作成する方法を教えてくれます:シングルラインコメントと複数行のコメント.
単一行コメントの作成// This is a single line JavaScript comment
//document.write("You can't see this!");複数行コメントの作成<!--
document.write("I have multi-line comments!");
/*document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");*/
//-->