JavaScript에 벡터 클래스 추가

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript에 벡터 클래스 추가
Habdul Hazeez 2023년10월12일
JavaScript JavaScript Vector
  1. JavaScript에서 for 루프를 사용하여 벡터 클래스 추가
  2. JavaScript에서 Array.proyotype.map()을 사용하여 벡터 클래스 추가
  3. JavaScript에서 ES6 클래스를 사용하여 벡터 클래스 추가
  4. JavaScript에서 배열 클래스를 확장하여 벡터 클래스 추가
JavaScript에 벡터 클래스 추가

이 튜토리얼은 JavaScript에서 다른 방법을 사용하여 두 개의 벡터를 추가하는 방법을 알려줍니다.

JavaScript에서 for 루프를 사용하여 벡터 클래스 추가

for 루프를 사용하여 JavaScript에서 두 개의 벡터를 추가할 수 있습니다. 한편 벡터는 JavaScript 배열이어야 합니다.

추가를 수행하고 결과를 반환하여 시작할 생성자 함수를 정의합니다. 더하기 함수는 생성자 함수와 별도로 작성하여 코드를 깔끔하고 다른 프로젝트에서 재사용할 수 있도록 만드는 것이 가장 좋습니다.

더하기 함수는 첫 번째 벡터가 두 번째 벡터에서 호출할 수 있도록 작동해야 합니다.

따라서 첫 번째 벡터는 호출자이고 두 번째 벡터는 호출자입니다. 결과적으로 더하기 함수는 다음과 같이 작동해야 합니다.

  1. 인수가 동일한 길이의 배열인지 확인하십시오. 인수는 첫 번째 벡터(호출자)와 두 번째 배열(호출자)입니다.
  2. 벡터 추가의 최종 결과를 저장할 빈 배열을 구성합니다.
  3. 호출자 배열을 반복합니다.
  4. 루프 인덱스를 사용하여 호출자 배열과 호출된 배열 요소를 추가합니다.
  5. 결과를 1단계에서 만든 빈 배열로 푸시합니다. 따라서 추가 결과가 있으므로 더 이상 비어 있지 않습니다.
  6. 새 배열을 사용하여 생성자 함수의 새 인스턴스를 반환합니다.
  7. 도중에 문제가 발생하면 오류를 반환합니다.

아래 코드는 이러한 단계를 구현한 것입니다. 사용자가 올바른 벡터 값을 전달하는지 확인하는 추가 검사를 구현했습니다.

벡터 추가를 테스트하기 위해 두 개의 벡터를 추가하고 결과를 웹 브라우저의 콘솔에 기록했습니다.

암호:

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()을 사용하여 벡터 클래스 추가

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 클래스의 새 인스턴스를 반환합니다. 벡터를 추가하기 전에 배열에 저장했는지 확인하십시오.

그런 다음 첫 번째 배열은 두 번째 배열에서 add() 함수를 호출해야 합니다.

다음 코드에는 add() 함수를 사용하여 두 개의 배열을 추가하는 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에서 배열 클래스를 확장하여 벡터 클래스 추가

JavaScript 네이티브 Array 클래스를 확장하는 벡터 클래스를 만들 수 있습니다. 따라서 벡터 클래스는 벡터를 추가하는 함수를 구현해야 합니다.

첫 번째 벡터는 두 번째 벡터의 함수를 호출할 수 있습니다. 결과적으로 추가 결과를 얻게 됩니다.

다음 코드에서는 기본 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