JavaScript で Vector クラスを追加する

Habdul Hazeez 2023年10月12日
  1. JavaScript で for ループを使用して Vector クラスを追加する
  2. JavaScript で Array.proyotype.map() を使用して Vector クラスを追加する
  3. JavaScript で ES6 クラスを使用してベクトル クラスを追加する
  4. JavaScript で配列クラスを拡張して Vector クラスを追加する
JavaScript で Vector クラスを追加する

このチュートリアルでは、異なる方法を使用して JavaScript で 2つのベクトルを追加する方法を説明します。

JavaScript で for ループを使用して Vector クラスを追加する

for ループを使用して、JavaScript で 2つのベクトルを追加できます。 一方、ベクトルは JavaScript 配列である必要があります。

開始するには、加算を実行して結果を返すコンストラクター関数を定義します。 コードをきれいにして他のプロジェクトで再利用できるようにするために、追加関数をコンストラクター関数とは別に記述することをお勧めします。

加算関数は、最初のベクトルが 2 番目のベクトルで呼び出すことができるように機能する必要があります。

したがって、最初のベクトルは呼び出し元であり、2 番目のベクトルは呼び出し先です。 その結果、加算関数は次のように機能するはずです。

  1. 引数が同じ長さの配列であることを確認します。 引数は、最初のベクトル (呼び出し側) と 2 番目の配列 (呼び出し側) です。
  2. 空の配列を作成して、ベクトル加算の最終結果を格納します。
  3. 呼び出し元配列をループします。
  4. ループ インデックスを使用して、呼び出し元配列と呼び出された配列要素を追加します。
  5. 手順 1 で作成した空の配列に結果をプッシュします。加算の結果があるため、空ではなくなります。
  6. 新しい配列を持つコンストラクター関数の新しいインスタンスを返します。
  7. 途中で問題が発生した場合は、エラーを返します。

以下のコードは、これらの手順の実装です。 ユーザーが正しいベクター値を渡すことを保証する追加のチェックを実装しました。

ベクトルの追加をテストするために 2つのベクトルを追加し、結果を Web ブラウザーのコンソールに記録しました。

コード:

function Vector(arg) {
  this.array = arg;
  this.add = add;
}

function add(called_array) {
  if (Array.isArray(this.array) && Array.isArray(called_array.array)) {
    if (this.array.length === called_array.array.length) {
      let result = [];
      for (let i = 0; i < this.array.length; i++) {
        if (typeof (this.array[i]) == 'number' &&
            typeof (called_array.array[i]) == 'number') {
          result.push(this.array[i] + called_array.array[i]);
        } else {
          result.push('Invalid vector value');
        }
      }
      return new Vector(result);
    } else {
      return new Vector('The vectors are not the same length.');
    }
  } else {
    return new Vector('One of your arguments or both of them is not an array.');
  }
}

let caller_array = new Vector([3, 5, 7]);
let called_array = new Vector([5, 2, 9]);

console.log(caller_array.add(called_array).array);

出力:

Array(3) [ 8, 7, 16 ]

JavaScript で Array.proyotype.map() を使用して Vector クラスを追加する

Array.prototype.map() を使用してベクトルを追加するには、ベクトル自体が JavaScript 配列である必要があります。 前のセクションと同様に、最初の配列は呼び出し元である必要があります。

これは、追加を支援するコンストラクター関数を定義することを意味します。 ただし、コンストラクター関数とは別に add() 関数を定義することはしません。

今回は、add() 関数をコンストラクタ関数プロトタイプの一部にします。

add() 関数は、コンストラクター関数の新しいインスタンスを返します。 ただし、この新しいインスタンスの引数は、カスタム関数で Array.prototype.map() を使用して呼び出された配列に対する呼び出し元の配列の結果です。

カスタム関数は、配列の追加を実行します。

以下のコードでは、Array.prototype.map() を使用してベクトルを追加しています。 プロセス中に引数が同じ長さの配列であるかどうかを確認しました。

それ以外の場合、コードは TypeError をスローします。

コード:

var Vector = function(arg) {
  this.array = arg;
};

Vector.prototype.add =
    function(called_array) {
  called_array = called_array.array;
  let caller_array = this.array;

  if (Array.isArray(caller_array) && Array.isArray(called_array)) {
    if (caller_array.length !== called_array.length) {
      throw new TypeError('Vectors have different length');
    }
  } else {
    return new Vector('One of your arguments or both of them is not an array.');
  }

  return new Vector(
      caller_array.map(function(caller_array_element, called_array_element) {
        if (typeof (caller_array_element) == 'number' &&
            typeof (called_array_element) == 'number') {
          return caller_array_element + called_array[called_array_element];
        } else {
          return 'Invalid Vector value';
        }
      }));
}

let caller_array = new Vector([9, 8, 5]);
let called_array = new Vector([2, 5, 8]);

console.log(caller_array.add(called_array).array);

出力:

Array(3) [ 11, 13, 13 ]

JavaScript で ES6 クラスを使用してベクトル クラスを追加する

ES6 クラスを使用してベクトルを追加する基本的なロジックは、カスタム add() 関数です。この関数は、for ループを使用してベクトルを追加し、ES6 クラスの新しいインスタンスを返します。 ベクトルを追加する前に、それらを配列に格納していることを確認してください。

その後、最初の配列は 2 番目の配列で add() 関数を呼び出す必要があります。

次のコードには、add() 関数を使用して 2つの配列を追加する ES6 クラスがあります。 追加後、追加の結果を ES6 クラスの新しいインスタンスに渡します。

コード:

class Vector {
  constructor(arr) {
    this.arr = arr;
  }

  add(called_array) {
    let caller_array = called_array.arr;

    if (Array.isArray(this.arr) && Array.isArray(caller_array)) {
      if (this.arr.length === caller_array.length) {
        let result = [];
        for (let key in this.arr) {
          if (typeof (this.arr[key]) == 'number' &&
              typeof (caller_array[key]) == 'number') {
            result[key] = this.arr[key] + caller_array[key];
          } else {
            result[key] = 'Invalid Vector Value.';
          }
        }
        return new Vector(result);
      } else {
        return new Vector('The vectors are not the same length.');
      }
    } else {
      return new Vector(
          'One of your arguments or both of them is not an array.');
    }
  }
}

let caller_array = new Vector([3, 6, 0]);
let called_array = new Vector([1, 5, 0]);

console.log(caller_array.add(called_array).arr);

出力:

Array(3) [ 4, 11, 0 ]

JavaScript で配列クラスを拡張して Vector クラスを追加する

JavaScript のネイティブ Array クラスを拡張したベクター クラスを作成できます。 そのため、ベクター クラスは、ベクターを追加する関数を実装する必要があります。

最初のベクトルは、2 番目のベクトルの関数を呼び出すことができます。 その結果、加算の結果が得られます。

次のコードでは、ネイティブ Array クラスを拡張し、map() 関数を使用して、呼び出された配列をステップ実行しています。 次に、その要素を呼び出し元の配列に追加して、結果を生成できます。

コード:

class Vector extends Array {
  add(called_array) {
    if (this.length == called_array.length) {
      return this.map((caller_array_element, called_array_element) => {
        if (typeof (caller_array_element) == 'number' &&
            typeof (called_array_element) == 'number') {
          return caller_array_element + called_array[called_array_element];
        } else {
          return 'Invalid Vector value';
        };
      })
    } else {
      return 'The vectors are not the same length.';
    }
  }
}

let caller_array = new Vector(1, 2, 4);
let called_array = new Vector(3, 9, 20);

console.log(caller_array.add(called_array));

出力:

Array(3) [ 4, 11, 24 ]
著者: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn