9가지 매우 중요한 사용 팁(코드 포함)

이번에는 매우 중요한 9가지 사용 기술(코드 포함)을 가져왔습니다. JS 사용 시 주의 사항은 무엇인가요?

1. 배열의 꼬리 요소 삭제

배열의 꼬리 요소를 지우거나 삭제하는 간단한 방법은 배열의 길이 속성 값을 변경하는 것입니다.

const arr = [11, 22, 33, 44, 55, 66];
// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2. 객체 구조 분해를 사용하여 명명된 매개변수 시뮬레이션

일련의 옵션을 함수에 매개변수로 전달해야 하는 경우 객체(Object)를 사용하여 구성(Config)을 정의하는 경향이 있습니다.

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
	const foo = config.foo !== undefined ? config.foo : 'Hi';
	const bar = config.bar !== undefined ? config.bar : 'Yo!';
 	const baz = config.baz !== undefined ? config.baz : 13;
 	// ...
}

이것은 JavaScript에서 명명된 매개변수를 시뮬레이션하는 오래되었지만 매우 효과적인 방법입니다. 그러나 doSomething에서 구성을 처리하는 방법은 약간 번거롭습니다. ES2015에서는 객체 구조 분해를 직접 사용할 수 있습니다.

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
 // ...
}

이 매개변수를 선택사항으로 만들려는 경우에도 쉽습니다.

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
 // ...
}

3. 객체 분해를 사용하여 배열 처리

객체 분해 구문을 사용하여 배열 요소를 가져올 수 있습니다.

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4 스위치 문에서 범위 값을 사용할 수 있습니다. 다음 기술을 사용하여 범위 값을 충족하는 스위치 문을 작성하세요:

function getWaterState(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = &#39;Solid&#39;;
   break;
  case (tempInCelsius > 0 && tempInCelsius < 100): 
   state = &#39;Liquid&#39;;
   break;
  default: 
   state = &#39;Gas&#39;;
 }
 return state;
}

5. 여러 비동기 함수를 기다리세요

async/await를 사용할 때 Promise.all을 사용하여 여러 비동기 함수를 기다릴 수 있습니다.

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. 순수 개체 만들기

Object의 속성이나 메서드(예: 생성자, toString() 등)를 상속하지 않는 100% 순수 개체를 만들 수 있습니다.

const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

7. JSON 코드 형식 지정

JSON.stringify는 개체를 특성화할 수 있을 뿐만 아니라 JSON 개체의 형식을 지정하고 출력할 수도 있습니다.

const obj = { 
 foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
};
// The third parameter is the number of spaces used to 
// beautify the JSON output.
JSON.stringify(obj, null, 4); 
// =>"{
// =>  "foo": {
// =>    "bar": [
// =>      11,
// =>      22,
// =>      33,
// =>      44
// =>    ],
// =>    "baz": {
// =>      "bing": true,
// =>      "boom": "Hello"
// =>    }
// =>  }
// =>}"

8. 배열에서 중복 요소 제거

ES2015에는 집합 구문이 있습니다. 집합 구문과 Spread 작업을 사용하면 중복 요소를 쉽게 제거할 수 있습니다.

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

9. 다차원 배열 타일링

Spread 작업을 사용하면 중첩된 다차원 배열을 쉽게 타일링할 수 있습니다.

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

What 안타깝지만 위의 방법은 2차원 배열에만 적용됩니다. 그러나 재귀를 사용하면 임의 차원의 중첩 배열을 평면화할 수 있습니다.

unction flattenArray(arr) {
 const flattened = [].concat(...arr);
 return flattened.some(item => Array.isArray(item)) ? 
  flattenArray(flattened) : flattened;
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

바로 그거야! 이 팁이 여러분이 더욱 아름다운 JS 코드를 작성하는 데 도움이 되기를 바랍니다! 그것이 충분하지 않다면 Fundebug를 보조자로 사용하는 것이 좋습니다!

Featured Comments

Ethan B Martin: 이 스위치의 작성은 매우 영리하지만 권장하지는 않습니다. 개발자가 이런 방식으로 JS 코드를 작성하도록 권장하지 마십시오. 한때 엔지니어에게 이 내용을 작성하게 했는데 나중에 코드 검토 중에 읽기에 많은 문제가 발생했습니다. 다행히도 시간이 지나면서 더 읽기 쉬운 코드로 리팩터링되었습니다. 스위치 사용과 if 사용의 차이점을 비교해 보겠습니다.

function getWaterState1(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = 'Solid';
   break;
  case (tempInCelsius < 100): 
   state = 'Liquid';
   break;
  default: 
   state = 'Gas';
 }
 return state;
}
function getWaterState2(tempInCelsius) {
 if (tempInCelsius <= 0) {
  return 'Solid';
 }
 if (tempInCelsius < 100) {
  return 'Liquid';
 }
 return 'Gas';
}

두 번째 작성 방법에는 여러 가지 장점이 있습니다.

A) 코드의 양이 더 적고 읽기 쉽습니다. B) 지역 변수를 선언할 필요가 없으며 독자가 항상 이 변수를 변경한 방법을 추적할 필요는 없습니다. C) 스위치(true)는 정말 혼란스러울 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

로컬 환경에서 노드 서버의 도메인 간 사용 요약

DOM 문서 트리의 모든 데이터를 가져오는 방법

위 내용은 9가지 매우 중요한 사용 팁(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!