>웹 프론트엔드 >프런트엔드 Q&A >자바스크립트 속성을 합산하는 방법

자바스크립트 속성을 합산하는 방법

PHPz
PHPz원래의
2023-04-24 14:46:37944검색

JavaScript는 웹 개발, 서버 측 프로그래밍 및 기타 분야에서 널리 사용되는 매우 중요한 프로그래밍 언어입니다. 일반적인 요구 사항 중 하나는 이 문서의 주제인 개체의 속성을 합산하는 것입니다.

시작하기 전에 간단한 예를 살펴보겠습니다. name과 age라는 두 가지 속성을 가진 person 객체가 있다고 가정해 보겠습니다. 이제 이 물체의 총 연대를 구하고 싶습니다. 어떻게 해야 할까요?

var person1 = {name: "Alice", age: 23}
var person2 = {name: "Bob", age: 25}
var person3 = {name: "Charlie", age: 27}

var sum = person1.age + person2.age + person3.age;
console.log(sum); // 输出结果为:75

위의 예에서는 각 사람의 연령 속성을 변수 sum에 하나씩 추가하여 합계를 얻습니다. 그러나 이 방법은 속성의 수가 많은 경우에는 적합하지 않습니다. 따라서 좀 더 효율적이고 편리한 방법을 사용해야 합니다.

다음으로 객체의 모든 숫자 속성의 합을 구하는 세 가지 방법을 보여 드리겠습니다. 이 세 가지 방법은 다음과 같습니다.

  1. 간단한 루프 합계 방법
  2. Object.keys()와 배열 Reduce() 메서드 결합
  3. for...in 루프와 hasOwnProperty() 메서드 결합

각 방법을 결합합니다. 자세히 설명되어 있습니다.

방법 1: 단순 루프 합산 방법

이 방법은 개체의 모든 속성을 순회하고 숫자 값으로 속성을 필터링한 다음 하나씩 추가하는 방법입니다. 다음은 코드 구현입니다.

function sumProperties(obj) {
  var sum = 0;
  for (var prop in obj) {
    if (typeof obj[prop] === 'number') {
      sum += obj[prop];
    }
  }
  return sum;
}
 
var person = {
  name: 'Alice',
  age: 23,
  salary: 5000.00
};
 
var total = sumProperties(person);
console.log(total); // 输出结果为:5023

위 코드는 sumProperties() 함수를 정의하며 해당 매개변수는 객체입니다. 함수에서는 for...in 루프를 사용하여 객체의 모든 속성을 반복합니다. 속성 값이 숫자인 경우 변수 sum에 추가합니다. 마지막으로 함수는 변수 sum을 호출자에게 반환 값으로 반환합니다.

이 방법은 간단하고 명확하며 소규모 물체에 적합합니다. 그러나 대규모 개체(예: 수백 개의 속성)를 처리하려는 경우 시간이 많이 소요됩니다.

방법 2: Object.keys()와 배열 Reduce() 메서드 결합

Object.keys()는 JavaScript에서 매우 실용적인 메서드입니다(상속된 속성 제외). ). 배열의 Reduce() 메소드와 결합하면 객체의 속성을 쉽게 합칠 수 있습니다. 다음은 코드 구현입니다.

function sumProperties(obj) {
  return Object.keys(obj).reduce(function(sum, key) {
    return typeof obj[key] === 'number' ? sum + obj[key] : sum;
  }, 0);
}
 
var person = {
  name: 'Alice',
  age: 23,
  salary: 5000.00
};
 
var total = sumProperties(person);
console.log(total); // 输出结果为:5023

위 코드에서 sumProperties() 함수는 이전 방법과 유사합니다. 함수에서는 Object.keys() 메서드를 사용하여 객체의 모든 속성 이름 배열을 가져옵니다. 그런 다음 배열의 Reduce() 메서드를 호출하고 배열의 각 항목을 변수 sum에 추가합니다. 속성 값이 숫자가 아닌 경우 변수 sum에 대해 아무 작업도 수행하지 않고 그대로 둡니다. 마지막으로 변수 sum을 함수의 반환 값으로 호출자에게 반환합니다.

방법 3: for...in 루프와 hasOwnProperty() 메서드 결합

이 메서드는 for...in 루프와 JavaScript의 hasOwnProperty() 메서드를 결합하여 객체에서 상속된 속성을 필터링합니다. 코드 구현은 다음과 같습니다.

function sumProperties(obj) {
  var sum = 0;
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      if (typeof obj[prop] === 'number') {
        sum += obj[prop];
      }
    }
  }
  return sum;
}
 
var person = {
  name: 'Alice',
  age: 23,
  salary: 5000.00
};
 
var total = sumProperties(person);
console.log(total); // 输出结果为:5023

위 코드에서 첫 번째 메소드의 코드를 수정했습니다. for...in 루프에서는 hasOwnProperty() 메서드를 사용하여 상속된 속성을 필터링합니다. 이 방법은 더 일반적이며 대부분의 상황에 적합합니다. 그러나 이 방법은 속성 이름에 공백과 같은 특수 문자가 포함된 경우를 처리할 수 없다는 점에 유의해야 합니다.

결론

위의 세 가지 방법은 대부분의 경우 요구 사항을 충족할 수 있습니다. 그러나 이러한 방법은 완벽하지 않으며 일부 특수한 경우에는 문제가 발생할 수 있다는 점에 유의해야 합니다. 그러나 우리가 그것들이 어떻게 작동하는지, 그리고 그것들의 강점과 약점이 무엇인지 더 잘 이해한다면, 우리는 그것들을 더 잘 사용할 수 있습니다.

위 내용은 자바스크립트 속성을 합산하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.