JavaScript 개발자가 알아야 할 단축 팁(고급)

이 글은 JavaScript 개발자가 알아야 할 (고급) 약어 기술을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 변수 할당

한 변수의 값을 다른 변수에 할당할 때 먼저 원래 값이 null이 아닌지, 정의되지 않았는지 확인해야 합니다. 빈 값.

은 여러 조건이 포함된 판단문을 작성하여 달성할 수 있습니다:

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

또는 다음 형식으로 축약됩니다.

const variable2 = variable1  || 'new';

다음을 변경할 수 있습니다. 코드를 es6console에 붙여넣고 직접 테스트해 보세요.

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); // prints foo

2. 기본값 할당

예상 매개변수가 null이거나 정의되지 않은 경우 6줄을 작성할 필요가 없습니다. 기본값을 할당하는 코드입니다. 짧은 논리 연산자만 사용하면 단 한 줄의 코드로 동일한 작업을 수행할 수 있습니다.

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

약어는

const dbHost = process.env.DB_HOST || 'localhost';

3입니다. 객체 속성

ES6은 객체에 속성을 할당하는 매우 간단한 방법을 제공합니다. 속성 이름이 키 이름과 동일한 경우 약어를 사용할 수 있습니다.

const obj = { x:x, y:y };

약어는 다음과 같습니다.

const obj = { x, y };

4. 화살표 함수

클래식 함수는 읽고 쓰기 쉽지만 다른 함수에 중첩되어 있는 경우 기능 호출을 할 때 전체 기능이 약간 길어지고 혼란스러워집니다. 이때 화살표 기능을 사용하여 축약할 수 있습니다:

function sayHello(name) {
  console.log('Hello', name);
}
 
setTimeout(function() {
  console.log('Loaded')
}, 2000);
 
list.forEach(function(item) {
  console.log(item);
});

약어는

sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

5입니다. 암시적 반환 값

The return 값은 함수의 최종 결과를 반환하기 위해 일반적으로 키워드를 사용하는 것입니다. 명령문이 하나만 있는 화살표 함수는 암시적으로 결과를 반환할 수 있습니다(함수는 return 키워드를 생략하려면 괄호({ })를 생략해야 합니다).

여러 줄 문(예: 개체 텍스트)을 반환하려면 { } 대신 ()를 사용하여 함수 본문을 래핑해야 합니다. 이렇게 하면 코드가 단일 문으로 평가됩니다.

function calcCircumference(diameter) {
  return Math.PI * diameter
}

약어는

calcCircumference = diameter => (
  Math.PI * diameter;
)

6입니다. 기본 매개변수 값

if 문을 사용하여 함수 매개변수의 기본값을 정의할 수 있습니다. . ES6에서는 함수 선언에서 기본값을 정의할 수 있습니다.

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

약어는 다음과 같습니다.

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

7. 템플릿 문자열

과거에는 "+"를 사용하여 여러 변수를 변환했습니다. strings 로 변환하지만 더 쉬운 방법이 있나요?

ES6은 해당 메소드를 제공하므로 백틱과 $ { }를 사용하여 변수를 문자열로 결합할 수 있습니다.

const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;

약어:

const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;

8. 구조 분해 할당

구조 분해 할당은 배열이나 객체에서 빠르게 추출하는 데 사용되는 표현식입니다. 정의된 변수에 값이 할당됩니다.

코드 약어 측면에서는 구조 분해 할당을 사용하면 좋은 결과를 얻을 수 있습니다.

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

약어는 다음과 같습니다:

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;

자신만의 변수 이름을 지정할 수도 있습니다:

const { store, form, loading, errors, entity:contact } = this.props;

9. 🎜 # 스프레드 연산자는 ES6에서 도입되었습니다. 스프레드 연산자를 사용하면 JavaScript 코드를 더욱 효율적이고 흥미롭게 만들 수 있습니다.

일부 배열 함수는 스프레드 연산자를 사용하여 대체할 수 있습니다.

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
 
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice( )

약어는 다음과 같습니다.

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
 
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

concat() 함수와의 차이점은 사용자가 스프레드 연산자를 사용하여 임의의 배열에 다른 배열을 삽입할 수 있다는 것입니다.

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

ES6 구조 분해 기호와 함께 스프레드 연산자를 사용할 수도 있습니다:

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

10 필수 매개변수

기본적으로 그렇지 않은 경우 함수 매개변수가 값으로 전달되면 JavaScript는 함수 매개변수를 정의되지 않음으로 설정합니다. 다른 언어에서는 경고나 오류가 발생합니다. 매개변수 할당을 수행하려면 if 문을 사용하여 정의되지 않은 오류를 발생시키거나 "강제 매개변수"를 활용할 수 있습니다.

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

약어는 다음과 같습니다.

mandatory = ( ) => {
  throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
  return bar;
}

11, Array.find

일반 JavaScript로 찾기 기능을 작성한 적이 있다면 아마도 A for 루프를 사용하십시오. ES6에서는 for 루프 구현을 단축하는 find()라는 새로운 배열 함수가 도입되었습니다.

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === &#39;Dog&#39; && pets[i].name === name) {
      return pets[i];
    }
  }
}

약어는 다음과 같습니다.

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

12. Object [key]

foo.bar를 foo ['bar']로 작성하는 것은 일반적인 관행이지만 재사용 가능한 코드 작성의 기초를 형성하는 관행입니다.

다음의 간단한 검증 기능 예를 고려해 보세요.

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true

위 함수는 검증 작업을 완벽하게 완료합니다. 하지만 양식이 많으면 유효성 검사를 적용해야 하며 필드와 규칙도 달라집니다. 런타임에 구성할 수 있는 일반 유효성 검사 기능을 구축할 수 있다면 좋은 선택이 될 것입니다.

// object validation rules
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}
 
// universal validation function
const validate = (schema, values) => {
  for(field in schema) {
    if(schema[field].required) {
      if(!values[field]) {
        return false;
      }
    }
  }
  return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

이제 이 유효성 검사 기능을 사용하면 각 양식에 대해 사용자 정의 유효성 검사 함수를 작성하지 않고도 모든 양식에서 재사용할 수 있습니다.

13. 이중 비트 연산자

비트 연산자는 JavaScript 초보자 튜토리얼의 기본 지식이지만 비트 연산자를 자주 사용하지 않습니다. 누구도 바이너리를 다루지 않고 1과 0으로 작업하고 싶어하지 않기 때문입니다.

하지만 이중 비트 연산자에는 매우 실용적인 경우가 있습니다. Math.floor() 대신 이중 비트 연산자를 사용할 수 있습니다. 이중 부정 위치 지정 연산자의 장점은 동일한 작업을 더 빠르게 수행한다는 것입니다.

Math.floor(4.9) === 4  //true

약어는 다음과 같습니다.

~~4.9 === 4  //true

위 내용은 #에 대해 더 알고 싶은 경우 JavaScript 개발자가 알아야 할(고급) 약어 기술에 대한 완전한 소개입니다. 🎜🎜 #JavaScriptVideoTutorial

, PHP 중국어 웹사이트를 주목해주세요.

위 내용은 JavaScript 개발자가 알아야 할 단축 팁(고급)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!