개발자가 꼭 알아야 할 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. 배열에서 잘못된 값 제거

잘못된 값을 필터링하려면 필터(부울)를 사용하세요.
(거짓 값에는 false, 0, '', null, 정의되지 않음 및 NaN이 포함됩니다.)

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

const filteredArr = arr.filter(Boolean);

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

설명:

• 이 코드에서는 부울이 콜백 함수로 filter()에 전달됩니다.
• Boolean() 함수는 참 값에 대해 true를 반환하고 거짓 값에 대해 false를 반환하는 JavaScript에 내장된 함수입니다.
• 부울을 콜백 함수로 전달하면 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의 flat() 메소드를 호출하면 모든 하위 배열 요소가 단일 평면 배열로 연결됩니다.
• 결과 flattenedArray에는 단일 차원의 원래 다차원 배열의 모든 요소가 포함됩니다.

 

4. Iterables에서 배열 만들기

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() 메서드를 사용하여 서로 다른 두 엔드포인트에서 데이터를 가져오는 두 가지 Promise를 만듭니다.
• 그런 다음 배열의 모든 Promise가 해결되면 해결되는 새로운 Promise를 반환하는 Promise.all()에 Promise 배열을 전달합니다.
• 그런 다음 then() 블록의 응답 배열을 사용하여 두 요청의 응답을 처리할 수 있습니다. 두 약속 중 하나가 거부되면 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로 바꾸고, 두 번째 !는 이 부울을 뒤집습니다. 참 값의 경우 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!