JavaScript 개발자가 알아야 할 단축 팁(고급)-JS 튜토리얼-php.cn

이 글은 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. 이중 비트 연산자