フロントエンドを学習している友人はLodashについてよりよく理解する必要があると思います。 Lodash は、 JavaScriptプログラミングを簡素化するために一般的に使用されるツール関数を多数提供する実用的なJavaScriptツールライブラリです。Lodash は、配列、数値、文字列、オブジェクトを操作する多くのユーティリティ関数を提供するため、JavaScript開発がより効率的、簡単、読みやすく、保守しやすくなります。

ロダッシュの利点:

プログラミング時間を節約する: パッケージ化され最適化されたツールメソッドを提供することで、さまざまな一般的なコードの作成にかかる時間が削減されます。
より安全: Lodashが提供する抽象度の高い APIにより、組み込みのJavaScript API の使用によって引き起こされる人的エラーの可能性が軽減されます。
より高速なパフォーマンス: Lodash は、さまざまな環境に合わせて厳密にテストおよび最適化されており、そのパフォーマンスは独自の実装のパフォーマンスよりも優れています。

2. Lodash 組み込み関数の手書きのメリット

初心者にとって、 Javascriptやes6の構文を学んだ後、練習する場所がないという事実に悩まされることがよくありますが、しっかりと基礎を築いた後、多くの問題が発生します。面接ではコードを手書きで書く必要がありますが、 Lodashの組み込み関数を手書きで書くと基礎力が固まり、その後の学習も一気に啓発されます。

2. 今日の練習

1. 手書きのDifferenceWith関数：differenceWith(配列, 値, コンパレータ)

1.1: 関数関数

このメソッドは、の要素を比較する ために呼び出される comparator (注: コンパレータ) を受け入れる点を除いてarray、values相違点と似ています。結果の値は最初の配列から選択されます。2 つのコンパレータ呼び出しパラメータがあります: (arrVal, othVal)。

1.2: パラメータの説明

array (配列) : チェックする配列。

[values] (...配列) : 除外された値。

[comparator] (機能) : 各要素に対して呼び出すコンパレータ。

1.3: 戻り値

(配列) : フィルターされた値を含む新しい配列を返します。

1.4: 実装コード

function differenceWith(arr1, arr2, comparator) {
  return arr1.filter((item1) => {
    // 检查第二个数组中是否存在与 item1 匹配的项
    // 如果不存在，则返回 true 保留 item1
    // 否则，返回 false，item1 将被忽略
    return !arr2.some((item2) => comparator(item1, item2))
  })
}

1.5: 実装原則

具体的な実装では、要素をarr1 操作し filter 、要素ごとにトラバーサル item1を使用して要素が存在するかどうかを検索し、要素を返すことができます。そのような要素が存在する場合、それはにも存在し、フィルターで除外する必要があることを意味します。そうでない場合は、には存在しないため、保持する必要があります。arr2.somearr2item2comparator(item1, item2)trueitem2item1arr2item1arr2

1.6: テストケース

2. 手書きドロップ関数：drop(array,n=1)

1.1: 関数関数

array最初の要素を削除して、スライスされた配列を作成しますn。(nデフォルトは1です。)

2.2: パラメータの説明

array (配列) : クエリする配列。

[n=1] (数値) : 削除する要素の数。

2.3: 戻り値

(配列) :array残りのスライスを返します。

2.4: 実装コード

function drop(array, n = 1) {
  if (!Array.isArray(array)) {
    return []
  }
  return array.slice(n)
}

2.5: 実装原則

ネイティブのスライススライス関数を使用することです

2.6: テストケース

3. 手書きのdropRight関数：dropRight(array,n=1)

3.1: 関数関数

スライスされた配列を作成し、array末尾のn要素を削除します。(nデフォルトは1です。)

3.2: パラメータの説明

array (配列) : クエリする配列。

[n=1] (数値) : 削除する要素の数。

3.3: 戻り値

(配列) :array残りのスライスを返します。

3.4: 実装コード

function dropRight(array, n = 1) {
  if (!Array.isArray(array)) {
    return []
  }
  const length = array.length
  if (n >= length) {
    return []
  }
  return array.slice(0, length - n)
}

3.5: 実装原則

スライススライス関数の使用についても同様です。

3.6: テストケース

4. 手書きのdropRightwhile関数:dropRightwhile(array,[predicate=._identity])

4.1: 関数関数

arrayfalse の戻り値から predicate 最後までの部分を削除して、スライスの配列を作成します。述語は 3 つのパラメーター (値、インデックス、配列)を渡します。これは、述語パラメータが制限であり、この制限に従ってスライス処理が実行されることを意味します。関数、オブジェクト、配列、文字列が可能です。

4.2: パラメータの説明

array (配列) : クエリする配列。

[predicate=_.identity] (関数) : この関数は反復ごとに呼び出されます。

4.3: 戻り値

(配列) :array残りのスライスを返します。

4.4: 実装コード

function dropRightWhile(array, predicate) {
  const result = array.slice()
  let i = result.length - 1

  // 根据不同的参数类型构造相应的判定函数
  if (typeof predicate === 'function') {
    while (i >= 0 && predicate(result[i], i, result)) {
      result.pop()
      i--
    }
  } else if (Array.isArray(predicate)) {
    while (i >= 0 && result[i][predicate[0]] === predicate[1]) {
      result.pop()
      i--
    }
  } else if (typeof predicate === 'object') {
    const keys = Object.keys(predicate)
    while (i >= 0 && keys.every((key) => result[i][key] === predicate[key])) {
      result.pop()
      i--
    }
  } else if (typeof predicate === 'string') {
    while (i >= 0 && result[i][predicate]) {
      result.pop()
      i--
    }
  }

  return result
}

4.5: 実装原則

関数では、 array元の配列が変更されないように、最初に受信配列をコピーします。

i配列を右から左に走査する array インデックスを表す変数を定義し、配列の最後の要素のインデックスに初期化します。

アサーション関数のタイプに応じて predicate 、対応する条件判断を構築して、さまざまなタイプのアサーション関数を処理します。

配列走査に従って、条件を使用してコレクションを判定し、要素が条件を満たすかどうかを端から判断し、条件を満たさない最初の要素が見つかるまで、条件を満たす要素を削除します。

対象となる要素を削除した後、新しい配列を返します result。

4.6: テストケース

公式テストケース:

Dropwhile 関数と DropRightwhile 関数の機能と実装は似ていますが、違いは、一方は先頭からカットし、もう一方は末尾からカットすることです。

5. 手書きのfill関数：fill(array, value, start=0, end=array.length)

5.1: 関数関数

位置で始まり、位置で終わる値をvalue 入力 (置換) しますが、位置は含まれません。arraystartendend

注: このメソッドは変更されます array(注: 新しい配列を作成する代わりに)。

5.2: パラメータの説明

array (配列) : 変更を入れる配列。

value (*) : array 指定された値を入力します。

[start=0] (数値) : 開始位置 (デフォルトは 0)。

[end=array.length] (数値) : 終了位置 (デフォルトの array.length)。

5.3: 戻り値

(配列) : を返します array。

5.4: 実装コード

function fill(array, value, start = 0, end = array.length) {
  for (let i = start; i < end; i++) {
    array[i] = value
  }
  return array
}

5.5: 実装原則

つまり、配列をループして置き換えることができます。

Javascript の演習、Lodash 組み込み関数の手書き (2)

I.はじめに

1.ロダッシュとは何ですか

2. Lodash 組み込み関数の手書きのメリット

2. 今日の練習

1. 手書きのDifferenceWith関数：differenceWith(配列, 値, コンパレータ)

1.1: 関数関数

1.2: パラメータの説明

1.3: 戻り値

1.4: 実装コード

1.5: 実装原則

1.6: テストケース

2. 手書きドロップ関数：drop(array,n=1)

1.1: 関数関数

2.2: パラメータの説明

2.3: 戻り値

2.4: 実装コード

2.5: 実装原則

2.6: テストケース

3. 手書きのdropRight関数：dropRight(array,n=1)

3.1: 関数関数

3.2: パラメータの説明

3.3: 戻り値

3.4: 実装コード

3.5: 実装原則

3.6: テストケース

4. 手書きのdropRightwhile関数:dropRightwhile(array,[predicate=._identity])

4.1: 関数関数

4.2: パラメータの説明

4.3: 戻り値

4.4: 実装コード

4.5: 実装原則

4.6: テストケース

5. 手書きのfill関数：fill(array, value, start=0, end=array.length)

5.1: 関数関数

5.2: パラメータの説明

5.3: 戻り値

5.4: 実装コード

5.5: 実装原則

5.6: テストケース

おすすめ