이 글은 JavaScript 개발자가 알아야 할 (고급) 약어 기술을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
한 변수의 값을 다른 변수에 할당할 때 먼저 원래 값이 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
예상 매개변수가 null이거나 정의되지 않은 경우 6줄을 작성할 필요가 없습니다. 기본값을 할당하는 코드입니다. 짧은 논리 연산자만 사용하면 단 한 줄의 코드로 동일한 작업을 수행할 수 있습니다.
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}약어는
const dbHost = process.env.DB_HOST || 'localhost';
ES6은 객체에 속성을 할당하는 매우 간단한 방법을 제공합니다. 속성 이름이 키 이름과 동일한 경우 약어를 사용할 수 있습니다.
const obj = { x:x, y:y };약어는 다음과 같습니다.
const obj = { x, y };클래식 함수는 읽고 쓰기 쉽지만 다른 함수에 중첩되어 있는 경우 기능 호출을 할 때 전체 기능이 약간 길어지고 혼란스러워집니다. 이때 화살표 기능을 사용하여 축약할 수 있습니다:
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));The return 값은 함수의 최종 결과를 반환하기 위해 일반적으로 키워드를 사용하는 것입니다. 명령문이 하나만 있는 화살표 함수는 암시적으로 결과를 반환할 수 있습니다(함수는 return 키워드를 생략하려면 괄호({ })를 생략해야 합니다).
여러 줄 문(예: 개체 텍스트)을 반환하려면 { } 대신 ()를 사용하여 함수 본문을 래핑해야 합니다. 이렇게 하면 코드가 단일 문으로 평가됩니다.
function calcCircumference(diameter) {
return Math.PI * diameter
}약어는
calcCircumference = diameter => ( Math.PI * diameter; )
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
과거에는 "+"를 사용하여 여러 변수를 변환했습니다. 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}`;구조 분해 할당은 배열이나 객체에서 빠르게 추출하는 데 사용되는 표현식입니다. 정의된 변수에 값이 할당됩니다.
코드 약어 측면에서는 구조 분해 할당을 사용하면 좋은 결과를 얻을 수 있습니다.
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;일부 배열 함수는 스프레드 연산자를 사용하여 대체할 수 있습니다.
// 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 필수 매개변수
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
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 === 'Dog' && 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]
다음의 간단한 검증 기능 예를 고려해 보세요.
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. 이중 비트 연산자
하지만 이중 비트 연산자에는 매우 실용적인 경우가 있습니다. Math.floor() 대신 이중 비트 연산자를 사용할 수 있습니다. 이중 부정 위치 지정 연산자의 장점은 동일한 작업을 더 빠르게 수행한다는 것입니다.
Math.floor(4.9) === 4 //true
약어는 다음과 같습니다.
~~4.9 === 4 //true
위 내용은 #에 대해 더 알고 싶은 경우 JavaScript 개발자가 알아야 할(고급) 약어 기술에 대한 완전한 소개입니다. 🎜🎜 #JavaScriptVideoTutorial
, PHP 중국어 웹사이트를 주목해주세요.위 내용은 JavaScript 개발자가 알아야 할 단축 팁(고급)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
