JavaScript 인코딩 팁 공유
8342 단어 JavaScript인코딩기교
만약 if를 사용한다면...else 문장, 그러면 이것은 코드를 절약하기 좋은 방식이다.
const x = 20;
let big;
if (x > 10) {
big = true;
} else {
big = false;
}
// ...
const big = x > 10 ? true : false;
Short-circuit Evaluation변수 값을 다른 변수에 할당할 때, 변수가null, undefined 또는 비어 있지 않은지 확인하려고 할 수도 있습니다.너는 if의 조건문이나 Short-circuit Evaluation을 여러 개 쓸 수 있다.
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}
//
const variable2 = variable1 || 'new';
저를 믿지 마세요. 먼저 테스트를 믿으세요. (아래 코드를 es6console에 붙여도 돼요)
let variable1;
let variable2 = variable1 || '';
console.log(variable2 === ''); // true
variable1 = 'foo';
variable2 = variable1 || '';
console.log(variable2); // foo
변수 선언함수에서 변수를 선언할 때, 아래와 같이 여러 변수를 동시에 설명하면 대량의 시간과 공간을 절약할 수 있다.
let x;
let y;
let x = 3;
// or
let x, y, z = 3;
하면, 만약, 만약...이것은 보잘것없을 수도 있지만, 언급할 만하다.만약 검사를 할 때, 값 부여 조작부호는 때때로 생략할 수 있다.
if (likeJavaScript === true)
//or
if (likeJavaScript)
주: 이 두 가지 방법은 완전히 같지 않습니다. 간단한 검사는 likeJavaScript가true라면true를 통과할 것입니다.이것은 또 다른 예가 있다.만약 a가true가 아니라면, 그리고 무엇을 할 것인가.
let a;
if (a !== true) {
// do something ...
}
//or
let a;
if (!a) {
// do something ...
}
JavaScript for 루프만약 당신이 원래의 자바스크립트만 원하고 jQuery나 Lodash 같은 외부 라이브러리에 의존하고 싶지 않다면, 이 작은 기교는 매우 유용하다.
for (let i = 0; i < allImgs.length; i++)
//or
for (let index in allImgs)
Array.forEach 약어:
function logArrayElements(element, index, array) {
console.log('a[' + index + ']=' + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9
개체 속성객체 문자 정의(Object literals)는 JavaScript를 더욱 재미있게 만듭니다.ES6는 객체의 속성을 할당하는 더 간단한 방법을 제공합니다.만약 속성 이름이 값과 같다면, 당신은 아래에 간단명료하게 쓰는 방식을 사용할 수 있습니다.
const obj = {x: x, y: y};
//or
const obj = {x, y};
화살표 함수고전 함수는 읽기와 쓰기가 쉽지만, 확실히 좀 지루해진다. 특히 플러그인 함수에서 다른 함수를 호출할 때 곤혹스러울 수도 있다.
function sayHello(name) {
console.log('Hello', name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000);
list.forEach(function(item){
console.log(item)
})
//or
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));
암시적 반환return은 함수에서 자주 사용하는 키워드로 함수의 최종 결과를 되돌려줍니다.화살표 함수는 한 문장으로 은밀한 결과를 되돌려줍니다. (함수는 {}를 생략해야 합니다.return 키워드를 생략하기 위해서)
만약 여러 줄 문장 (예를 들어 대상) 을 되돌려준다면, 함수 내에서 () 대체 {} 를 사용할 필요가 있습니다.이렇게 하면 코드가 단독 문장으로 되돌아오는지 확인할 수 있다.
function calcCircumference(diameter) {
return Math.PI * diameter
}
//or
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;
}
//or
volume = (l, w = 3, h = 4) => (l * w * h);
volume(2); // 24
Template Literals(문자열 템플릿)여러 변수를 문자열로 연결하는 데 + 를 사용하는 것이 지겹지 않습니까?설마 더 쉬운 방법이 없단 말인가?만약 당신이 ES6를 사용할 수 있다면, 당신은 행운입니다.ES6에서 당신이 해야 할 일은 삐침표와 ${}를 사용하고 변수를 괄호 안에 두는 것입니다.
const welcome = 'You have logged in as' + first + ' ' + last + '.';
const db = 'http://' + host + ':' + port + '/' + database;
//or
const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;
Destructuring Assignment
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;
//or
import {observable, action, runInAction} from 'mobx';
const {store, form, loading, errors, entity} = this.props;
너는 심지어 스스로 변수 이름을 지정할 수 있다.
const {store, form, loading, errors, entity:contact} = this.props; // :
Spread Operator(확장 연산자)Spread Operator는 ES6에 도입되어 자바스크립트 코드를 더욱 효율적이고 재미있게 합니다.그것은 일부 수조의 기능을 대체하는 데 쓸 수 있다.Spread Operator는 일련의 세 가지 점(...)일 뿐입니다.
// 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();
//or
// 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 () 함수와 달리 Spread Operator를 사용하면 다른 그룹에 그룹을 삽입할 수 있습니다.
const odd = [1, 3, 5];
const nums = [2, ...odd, 4, 6];
또한 해부호로 사용할 수 있습니다.
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}
강제 매개변수
function foo(bar) {
if (bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}
//or
mandatory = () => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
}
Array.find만약 이전에 검색 함수를 쓴 적이 있다면, for 순환을 사용할 수도 있습니다.ES6에서 수조의 새로운 기능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];
}
}
}
// or
pet = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy');
console.log(pet); // {type: 'Dog', name: 'Tommy'}
Object[key]너 푸 알잖아.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
현재 우리는 각종 형식의 재사용을 할 수 있는 검증 함수를 가지고 있으며, 각각의 다른 기능을 위해 검증 함수를 맞춤형으로 만들 필요가 없다.Double Bitwise NOT
만약 당신이 자바스크립트 초보자라면, 비트 연산자 (Bitwise Operator) 는 영원히 어디에서도 사용하지 않을 것이다.이 밖에 만약 당신이 2진법 0과 1을 처리하지 않는다면, 더욱 사용하고 싶지 않을 것이다.
그러나 매우 실용적인 용례는 바로 두 개의 조작부호이다.너는 그것으로 Math를 대체할 수 있다.floor().Double Bitwise NOT 연산자는 같은 작업을 훨씬 빨리 수행할 수 있는 장점이 있습니다.너는 이곳에서 비트 연산자에 관한 더 많은 지식을 읽을 수 있다.
Math.floor(4.9) === 4; // true
//or
~~4.9 === 4; //true
이상은 자바스크립트 인코딩 팁 공유의 상세한 내용입니다. 자바스크립트 인코딩 팁에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.