開発者向けに知っておくべき JavaScript のヒント

1. オブジェクトをループする

Object.entries() を使用して、キーと値のペアをループします。

const person = {
  name: 'Tony Stark',
  age: 53,
  city: 'NewYork'
};

/*
name: Tony Stark
age: 53
city: NewYork
*/
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

説明:

• Object.entries() は、オブジェクトのプロパティをキーと値のペアの配列に変換し、反復処理を容易にします。

2. 配列からの不正な値の削除

filter(Boolean) を使用して、偽の値を除外します。
(偽の値には、false、0、''、null、unknown、NaN が含まれます)

const arr = [1, 2, 0, '', undefined, null, 3, NaN, false];

const filteredArr = arr.filter(Boolean);

console.log(filteredArr); // [1, 2, 3]

説明:

• このコードでは、ブール値がコールバック関数として filter() に渡されます。
• Boolean() 関数は JavaScript の組み込み関数で、真実の値の場合は true を返し、偽の値の場合は false を返します。
• ブール値をコールバック関数として渡すことにより、filter() は配列 arr からすべての偽の値を削除し、正しい値のみを含む新しい配列 filteredArr を返します。

3. 多次元配列の平坦化

配列を平坦化するには flat() メソッドを使用します。

const multiDimensionalArray = [[1, 2], [3, 4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat(2);

// Output: [1, 2, 3, 4, 5, 6]
console.log(flattenedArray); 

説明:

• このコードでは、multiDimensionalArray は 2 つのネストされた配列を含む 2 次元配列です。
• 深さ 2 で flat() メソッドを呼び出すと、すべてのサブ配列要素が 1 つのフラット配列に連結されます。
• 結果の flattenedArray には、元の多次元配列のすべての要素が 1 次元に含まれます。

4. Iterable から配列を作成

Array.from() を使用してイテラブルから配列を作成します。

// Converting String to an array
const str = "TonyStark";
const arr = Array.from(str);

// ['T', 'o', 'n', 'y', 'S', 't', 'a', 'r', 'k']
console.log(arr);

// Converting Set to an array
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3, 4, 5]

説明:

• Array.from() は、文字列、セット、マップなどの反復可能なオブジェクトまたは配列のようなオブジェクトを配列に変換します。

5. 配列からの値の抽出

配列から値を抽出するには、構造化を使用します。

const numbers = [1, 2, 3, 4, 5];
const [first, second, , fourth] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

説明:

• 分割すると、配列要素を変数に直接割り当て、不要な値をスキップできます。

6. オブジェクトからの値の抽出

オブジェクトの構造化を使用してプロパティを抽出します。

const person = {
  name: 'Tony Stark',
  age: 53,
  email: 'tonystark@starkindustries.com'
};

const {name, age, email} = person;

console.log(name); // Tony Stark
console.log(age); // 53
console.log(email); // tonystark@starkindustries.com

説明:

• 分解では、オブジェクトのプロパティを変数と照合して抽出します。

7. 複数の Promise の並列実行

Promise.all() を使用すると、複数の Promise を並行して実行できます。

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');

Promise.all([promise1, promise2])
  .then(responses => {
    // handle responses from both requests here
    const [response1, response2] = responses;
    // do something with the responses
  })
  .catch(error => {
    // handle errors from either request here
    console.error(error);
  });

説明:

• このコードでは、fetch() メソッドを使用して 2 つの Promise を作成し、2 つの異なるエンドポイントからデータをフェッチします。
• 次に、Promise の配列を Promise.all() に渡します。これは、配列内のすべての Promise が解決されたときに解決される新しい Promise を返します。
• then() ブロック内の応答配列を使用して、両方のリクエストからの応答を処理できます。どちらかの Promise が拒否された場合、catch() ブロックがエラーを処理します。

8. 配列内の最大値と最小値を見つける

スプレッド構文で Math.max() と Math.min() を使用します。

const nums = [10, 12, 29, 60, 22];
console.log(Math.max(...nums)); // 60
console.log(Math.min(...nums)); // 10

説明:

• 展開構文 (...) は配列要素を展開し、Math.max() と Math.min() がそれらを評価できるようにします。

9. 任意の値をブール値に変換する

二重否定を使用してください!!値を変換します。

!!2; // true
!!''; // false
!!NaN; // false
!!'word'; // true
!!undefined; // false

説明:

JavaScript の
• 二重否定 (!!) は、任意の値を同等のブール値に変換するトリックです。
• 最初の ! は、真の値を false に、偽の値を true に変換し、2 番目の ! はこのブール値を反転します。真実の値の場合は true、偽の値の場合は false です。

10. 変数値の交換

配列の構造化を使用して値を交換します。

let a = 5;
let b = 10;

// Swap values using array destructuring
[a, b] = [b, a];

console.log(a); // 10
console.log(b); // 5

説明:

• この例では、a と b の値が一時変数を使用せずに交換されます。
• 右側の [b, a] は、b と a の値を含む新しい配列を作成し、その後、分割代入 [a, b] は、これらの値を a と b に割り当てて戻し、それらの値を事実上交換します。

以上が開発者向けに知っておくべき JavaScript のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。