一般的な問題のJavaScriptコードスニペット

最終更新日：2021年7月27日

各プログラミング言語には欠点と癖があります。 JavaScript言語、さらには使用されるJavaScriptコードスニペットも例外ではありません。 スクリプト言語は、近年奇妙な動作をしていますが、今日最も広く使用されている言語の1つです。 ほとんどの場合、それはインターネットブラウザの主要なインタラクティブ言語であるためです。

プログラマーやコーダーとして、単純なコードスニペットが必要な反復的な単純なタスクの問題が発生する場合があります。 このブログでは、JavaScriptコードスニペットの一部としてES6スクリプトを使用して簡単に解決できるいくつかの一般的な問題を紹介します。

JavaScriptコードスニペットのヒント：「var」の代わりに「let」を使用してください

letはvarに似ていますが、スコープがあります。 letは、宣言されて値が割り当てられたブロックスコープレベルでのみアクセスできます。 varは、定義されているブロックスコープに関して任意のレベルでアクセスできます。 次の例では、変数'num1'がIfステートメント内で定義されているため、関数の外部からはアクセスできません。

 真であれば） {
  num1=40とします。
}

num2=20とします。

console.log（num2、num1）;
console.log（num1）;

出力：
20
未定義

a=25とします。
b=50とします。

真であれば） {
  a=100とします。
  var c = 5;
  console.log（a / c）;
  console.log（b / c）;
}

console.log（c）;
console.log（a）;

出力：
20
10
5
25

変数値が変更されない場合は「const」を使用します

constは、変更できない変数に定数値を割り当てます。 const変数が定義されている場合は常に、JavaScriptは値のアドレスを変数に参照します。

JavaScriptコードスニペットの矢印関数、関数の新しい構文

JavaScriptコードスニペットの「ES6の関数」は、より単純な式「（）=>{}」に変更されました。

 //古い構文
関数myHello（）{
  console.log（ "Hello World ..！"）;
}

//新しい構文
var myHello =（）=> {
  console.log（ "Hello World ..！"）;
}

新しい構文は、最初は少し混乱するかもしれません。 構文には2つの部分があります。

 var myHello =（）

JavaScriptコードスニペットの最初の部分は変数を宣言し、それに関数（）を割り当てます。 変数が関数であると言っているだけです。

 =>{//何かをする} 

2番目の部分は、関数の本体部分を宣言します。 中括弧の付いた矢印部分は、体の部分を定義します。

他の例ですが、パラメーターがあります。

 withParameters =（a、b）=>{
  console.log（a + b）;
}

withParameters（10、20）;

出力：
30

 sumOfNum =（a、b = 10）=>{
  a+bを返します。
}

console.log（sumOfNum（20）;
console.log（sumOfNum（20,30）;

出力：
30
50

新しい'for…of…'ループ

for…ofはfor…inと非常に似ていますが、少し変更が加えられています。 for…ofは、配列などの要素のリストを繰り返し処理し、要素（インデックスではない）を1つずつ返します。 変数「num」は、インデックスではなく、配列内の各要素を出力することに注意してください。

 数字=[5,6,7,8];

for（数値の数を許可）{
  console.log（value）;
}

出力：
5
6
7
8

 str ='Arturo';

for（let char of str）{
  console.log（char）;
}

出力：
A
r
t
u
r
o

変数割り当ての破棄

配列から変数を1つずつ割り当てるのは、時間がかかり、ばかげています。 デストラクタの割り当てを使用するだけで、これをより迅速かつ簡単に実行できます。

 let profile = ['John'、32、'engineer'];

let [名前、年齢、仕事]=プロファイル;

console.log（name）;

出力：
ジョン

オブジェクトの配列から特定のオブジェクトを見つける

JavaScriptで実行する必要がある最も一般的なタスクの1つは、オブジェクトの配列を反復処理して特定のオブジェクトを見つけることです。 ここでは、findメソッドは簡単な解決策です。 引数として無名関数を使用して選択基準をプラグインするだけで、次のように設定されます。

 スタッフ=[
  {id：0、name：'Nina'}、
  {id：1、name：'Kevin'}、
  {id：2、name：'John'}
]

従業員=staff.find（emp => emp.name ==='John'）;

console.log（client）;

出力：
{id：2、name：'John'}

オブジェクトのキーと値をループする

データ構造は、さまざまなキーと値のペアを含む複雑なオブジェクトである可能性があります。 各ペアを繰り返すのは少し奇妙かもしれませんが、Objectの関数を使用できるようになると簡単です。

オブジェクトのキーを取得した後、キーと値を同時にループできます。 次のソリューションでは、ループ中にキー変数と値変数を使用して各ペアにアクセスします。

 myObject = {ピーター：15、ジョン：20、アン：35};

Object.keys（myObject）.forEach（（key、value）=> {
  //...何かをする
  console.log（key、value）;
}）;

出力：
ピーター15
ヨハネ20章
アン35

条件に基づいてオブジェクトの配列をフィルタリングする

特定の条件に基づいてアイテムを除外したいデータの配列が大量にある場合があります。 これを実現するために関数をフィルター処理できます。 次のソリューションには、ファイルパスの配列があります。 一部のファイルはディレクトリ「data1」にあり、他のファイルはディレクトリ「data2」にあります。 特定のディレクトリのみをフィルタリングしたいとします。

 場所=[
  "files / data1 / file"、
  "files / data1 / file2"、
  "files / data2 / file"、
  "files / data2 / file2"
];

filter = location.filter（path => path.includes（'data2'））;とします。

console.log（filter）;

出力：
['files / dir2 / file'、'files / dir2 / file2']

パス文字列に文字列「data2」を含める必要があることを指定することにより、「data2」を含まないパスを除外します。 アイテムを結果に含めるには、フィルターに渡す関数がtrueを返す必要があることに注意してください。

同じ名前のオブジェクトにキーを割り当てる

キーをオブジェクトに割り当てるときに、キーが割り当てたい値を保持する変数と同じ名前である場合は、値の割り当てを完全に省略できます。 これにより、私たち全員が嫌いなことを繰り返す必要がなくなります。 この例を見てください：

 名前='ジョン';
年齢=32とします。
let job='エンジニア';

// これの代わりに
let profile1 = {名前：名前、年齢：年齢、仕事：仕事};

// これを行う
profile2 = {名前、年齢、仕事};

console.log（profile2）;

出力：
{名前：'ジョン'、年齢：32、仕事：'エンジニア'}

ES6スプレッド演算子の使用'…'

スプレッド演算子を使用すると、文字通り配列を「スプレッド」することができます。 これを使用して、配列を引数のリストに変換したり、2つの配列を組み合わせたりすることもできます。 また、これを使用して、関数への引数のリストを作成することもできます。

最初の例では、spread演算子が配列に対してどのように機能し、各アイテムを個別の要素に変換するかを示します。

 数字1=[1,2,3,4,5];

console.log（... numbers1）;

出力：
1 2 3 4 5

2番目の例では、2つの配列の内容を組み合わせて、両方の内容を含む新しい一時配列を作成します。

 数字2=[6,7,8,9,10];

組み合わせてみましょう=[...numbers1、... numbers2];

console.log（... Combined）;

出力：
1 2 3 4 5 6 7 8 9 10

最後の例は、spread演算子が配列を関数の引数のリストに変換する方法を示しています。 Math.maxは、渡された引数のリストの中で最大の数値を返します。 それらの議論の1つは10であり、これは最高です。

 数字1=[1,2,3,4,5];

数字2=[6,7,8,9,10];

組み合わせてみましょう=[...numbers1、... numbers2];

console.log（Math.max（... Combined））;

出力：
10

新しいゲッターとセッター関数

ゲッターとセッターは、ES6で導入された便利な機能の1つです。 JavaScriptでクラスを使用している場合に便利です。

 クラスPersonName{
  コンストラクター（名前）{
    this.name = name;
  }
  Name（）を取得する{
    this.nameを返します。
  }
  名前（名前）を設定する{
    this.name = name;
  }
}

let person = new PersonName（ "Jon Snow"）;
console.log（person.Name）; // （A）

person.Name = "Dany"; // （B）
console.log（person.Name）;

出力：
ジョン・スノウ
ダニー

クラスPersonName内には、「get」プロパティと「set」プロパティを持つ2つの関数があることがわかります。 'get'プロパティは変数の値を取得するために使用され、'set'プロパティは値を変数に設定するために使用されます。 また、 get Name関数（A）が括弧なしで呼び出され、 set Name関数（B）が括弧なしで呼び出されていることがわかります。これは、変数に値を割り当てるのと同じです。