일반적인 문제에 대한 JavaScript 코드 조각

2021년 7월 27일 최종 업데이트

각 프로그래밍 언어에는 결함과 단점이 있습니다. JavaScript 언어와 사용된 JavaScript 코드 조각도 예외는 아닙니다. 스크립트 언어는 최근 몇 년 동안 이상하게 작동했지만 오늘날 가장 널리 사용되는 언어 중 하나입니다. 대부분이 인터넷 브라우저의 기본 대화형 언어이기 때문입니다.

프로그래머와 코더로서 우리는 단순한 코드 조각이 필요한 반복적이고 단순한 작업 문제가 있습니다. 이 블로그에서는 일부 JavaScript 코드 조각의 일부로 ES6 스크립팅을 사용하여 쉽게 해결할 수 있는 몇 가지 일반적인 문제를 제시할 것입니다.

JavaScript 코드 조각 팁: 'var' 대신 'let' 사용

let 은 var 와 비슷하지만 범위 가 있습니다. let 은 선언되고 값이 할당된 블록 범위 수준에서만 액세스할 수 있습니다. var 는 정의된 블록 범위와 관련하여 모든 수준에서 액세스할 수 있습니다. 다음 예에서 변수 'num1'은 If 문 내부에 정의되어 있으므로 함수 외부에서 액세스할 수 없습니다.

 사실이면) {
  num1 = 40으로 둡니다.
}

num2 = 20;

console.log(숫자2, 숫자1);
console.log(숫자1);

산출:
20
한정되지 않은

 하자 a = 25;
b = 50이라고 하자.

사실이면) {
  하자 a = 100;
  변수 c = 5;
  console.log(a/c);
  console.log(b/c);
}

console.log(c);
console.log(a);

산출:
20
10
5
25

변수 값이 변경되지 않는 경우 'const' 사용

const 는 변경할 수 없는 변수에 상수 값을 할당합니다. const 변수가 정의될 ​​때마다 JavaScript는 값의 주소를 변수에 참조합니다.

JavaScript 코드 스니펫의 화살표 함수, 새로운 함수 구문

JavaScript 코드 스니펫의 ES6 기능이 더 간단한 표현식인 '() => {}'로 변경되었습니다.

 // 이전 구문
함수 myHello() {
  console.log("안녕하세요..!");
}

// 새 구문
var myHello = () => {
  console.log("안녕하세요..!");
}

새 구문은 처음에는 약간 혼란스러울 수 있습니다. 구문에는 두 부분이 있습니다.

 var myHello = ()

JavaScript 코드 조각의 첫 번째 부분은 변수를 선언하고 여기에 함수()를 할당합니다. 단지 변수가 함수라고 말합니다.

 => { //무언가 } 

두 번째 부분은 함수의 본문 부분을 선언합니다. 중괄호가 있는 화살표 부분은 본문 부분을 정의합니다.

매개변수가 있는 다른 예입니다.

 하자 withParameters = (a, b) => {
  console.log(a+b);
}

withParameters(10, 20);

산출:
30

 let sumOfNum = (a, b = 10) => {
  + b를 반환합니다.
}

console.log(sumOfNum(20);
console.log(sumOfNum(20,30);

산출:
30
50

새로운' for…of…' 루프

for…of 는 for…in 과 매우 유사하지만 약간의 수정이 필요합니다. for…of 는 배열과 같은 요소 목록을 반복하고 요소(인덱스가 아님)를 하나씩 반환합니다. 변수 'num'은 인덱스가 아닌 배열의 각 요소를 출력합니다.

 하자 숫자 = [5,6,7,8];

for (숫자의 개수) {
  console.log(값);
}

산출:
5
6
7
8

 하자 str = '아르투로';

for (str의 char) {
  console.log(문자);
}

산출:
ㅏ
아르 자형
티
유
아르 자형
영형

변수 할당 파괴하기

배열에서 변수를 하나씩 할당하는 것은 시간이 많이 걸리고 어리석은 일입니다. 이 작업을 더 빠르고 쉽게 수행하려면 소멸자 할당을 사용하세요.

 let profile = ['John', 32, '엔지니어'];

let [이름, 나이, 직업] = 프로필;

console.log(이름);

산출:
남자

객체 배열에서 특정 객체 찾기

JavaScript에서 수행해야 하는 가장 일반적인 작업 중 하나는 특정 객체를 찾기 위해 객체 배열을 반복하는 것입니다. find 메소드는 여기에서 간단한 솔루션입니다. 익명 함수를 인수로 사용하여 선택 기준을 연결하기만 하면 다음과 같이 설정됩니다.

 직원 = [
  { 아이디: 0, 이름: '니나' },
  { 아이디: 1, 이름: '케빈' },
  { 아이디: 2, 이름: '존' }
]

let 직원 = staff.find(emp => emp.name === 'John');

console.log(클라이언트);

산출:
{ 아이디: 2, 이름: '존' }

객체 키 및 값에 대한 루프

데이터 구조는 다양한 키/값 쌍을 포함하는 복잡한 개체일 수 있습니다. 각 쌍을 반복하는 것은 약간 이상할 수 있지만 일단 Object의 기능을 사용하게 되면 간단합니다.

객체의 키를 잡은 후 키와 값을 동시에 반복할 수 있습니다. 다음 솔루션에서는 루프 중에 키 및 값 변수를 사용하여 각 쌍에 액세스합니다.

 let myObject = { Peter: 15, John: 20, Anne: 35 };

Object.keys(myObject).forEach((키, 값) => {
  //...뭔가를 하다
  console.log(키, 값);
});

산출:
베드로 15장
요한복음 20장
앤 35

조건에 따라 객체 배열 필터링

때로는 특정 조건에 따라 항목을 필터링하려는 대규모 데이터 배열이 있습니다. 이를 수행하기 위해 필터 기능을 사용할 수 있습니다. 다음 솔루션에는 파일 경로 배열이 있습니다. 일부 파일은 'data1' 디렉토리에 있고 다른 파일은 'data2' 디렉토리에 있습니다. 특정 디렉토리만 필터링한다고 가정해 보겠습니다.

 위치 = [
  "파일/데이터1/파일",
  "파일/데이터1/파일2",
  "파일/데이터2/파일",
  "파일/데이터2/파일2"
];

let filter = location.filter(경로 => path.includes('data2'));

console.log(필터);

산출:
[ '파일/디렉토리2/파일', '파일/디렉토리2/파일2' ]

경로 문자열에 'data2' 문자열이 포함되어야 함을 지정하여 'data2'가 포함되지 않은 경로를 필터링합니다. 필터에 전달하는 함수가 무엇이든 결과에 항목이 포함되려면 true를 반환해야 합니다.

이름이 같은 개체에 키 할당

키가 할당하려는 값을 보유하는 변수와 동일한 이름인 경우 개체에 키를 할당할 때 값 할당을 모두 생략할 수 있습니다. 이렇게 하면 우리 모두가 싫어하는 일을 반복하지 않아도 됩니다. 다음 예를 살펴보십시오.

 하자 이름 = '존';
나이 = 32;
let job = '엔지니어';

// 이 대신
let profile1 = { 이름: 이름, 나이: 나이, 직업: 직업 };

// 이 작업을 수행
let profile2 = { 이름, 나이, 직업 };

console.log(프로필2);

산출:
{ 이름: '존', 나이: 32, 직업: '엔지니어' }

ES6 스프레드 연산자 사용하기 '…'

스프레드 연산자를 사용하면 말 그대로 배열을 "확산"할 수 있습니다. 이것은 배열을 인수 목록으로 변환하거나 두 개의 배열을 결합하는 데 사용할 수 있습니다. 또한 함수에 대한 인수 목록을 구성하는 데 사용할 수도 있습니다.

첫 번째 예에서는 스프레드 연산자가 배열에서 작동하고 각 항목을 개별 요소로 바꾸는 방법을 보여줍니다.

 let number1 = [1,2,3,4,5];

console.log(...숫자1);

산출:
1 2 3 4 5

두 번째 예에서는 두 가지 내용을 모두 포함하는 새 임시 배열을 만들어 두 배열의 내용을 결합합니다.

 let number2 = [6,7,8,9,10];

let 결합 = [...숫자1, ...숫자2];

console.log(...결합);

산출:
1 2 3 4 5 6 7 8 9 10

마지막 예는 스프레드 연산자가 배열을 함수에 대한 인수 목록으로 바꾸는 방법을 보여줍니다. Math.max는 전달된 인수 목록에서 가장 높은 수를 반환합니다. 그 주장 중 하나는 10으로 가장 높았습니다.

 let number1 = [1,2,3,4,5];

let number2 = [6,7,8,9,10];

let 결합 = [...숫자1, ...숫자2];

console.log(Math.max(...결합));

산출:
10

새로운 Getter 및 Setter 함수

Getter와 Setter는 ES6에 도입된 유용한 기능 중 하나입니다. JavaScript에서 클래스를 사용하는 경우 유용합니다.

 클래스 사람 이름 {
  생성자(이름) {
    this.name = 이름;
  }
  이름 가져오기() {
    this.name을 반환합니다.
  }
  이름(이름) 설정 {
    this.name = 이름;
  }
}

let person = new PersonName("존 스노우");
console.log(사람 이름); // (아)

person.Name = "대니"; // (나)
console.log(사람 이름);

산출:
존 스노우
대니

PersonName 클래스 안에 'get' 및 'set' 속성이 있는 두 개의 함수가 있음을 알 수 있습니다. 'get' 속성은 변수의 값을 가져오는 데 사용되며 'set' 속성은 값을 변수에 설정하는 데 사용됩니다. 또한 get Name 함수(A)는 괄호 없이 호출되고 set Name 함수(B)는 괄호 없이 호출되며 이는 변수에 값을 할당하는 것과 같습니다.