> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 마스터해야 할 기술

JavaScript에서 마스터해야 할 기술

零下一度
풀어 주다: 2017-07-19 17:42:27
원래의
1081명이 탐색했습니다.

JavaScript를 처음 접했거나 개발 작업에서 최근에야 접했다면 좌절감을 느낄 수도 있습니다. 모든 언어에는 고유한 특징이 있습니다. 그러나 강력한 타이핑을 기반으로 하는 서버 측 언어에서 이동하는 개발자는 혼란스러울 수 있습니다. 저는 몇 년 전 전업 JavaScript 개발자가 되려고 했을 때 그랬습니다. 처음에 알았더라면 좋았을 것들이 많았습니다. 이 기사에서 나는 나의 특이한 점 중 일부를 공유할 것이며, 나에게 많은 골칫거리를 안겨준 몇 가지 경험을 여러분과 공유할 수 있기를 바랍니다. 이것은 전체 목록이 아닙니다. 부분 목록일 뿐입니다. 하지만 바라건대 이 언어의 힘과 한때 방해라고 생각했던 것들에 대해 눈을 뜨게 되기를 바랍니다.

1. Null(null, 정의되지 않음) 확인

우리는 일반적으로 새 변수를 생성할 때 해당 변수의 값이 null(null)인지 정의되지 않음(undefine)인지 확인합니다. 이는 JavaScript 프로그래밍에서 종종 고려해야 하는 검증입니다.

직접 작성하면 다음과 같습니다.

if (variable1 !== null || Variable1 !== undefine || Variable1 !== '') { let 변수2 = 변수1 ; }

더 간결한 버전을 사용할 수 있습니다.

믿을 수 없다면 Google Chrome 개발자 패널의 콘솔에서 사용해 보세요! ㅋㅋㅋ ole.log(변수2) ;…
console.log(variable2);
//출력: ''

//정상 상황
letvariable1 =
'안녕하세요';
letvariable2 = Variable1 | '';
console.log(variable2);
//Output: 'hi there'
2. 비교적 간단한 것 같습니다! 최적화되지 않은 코드:
let a = new Array(); a[
0] =
"myString1" = "myString2"; = "myString3";
최적화된 코드:
let a = [ "myString1", "myString2",
" myString3" ];
3. if true의 최적화 .. else


let big;
if (x >
10 ) { big = true;}else {big = false;}

간체:

코드 양을 대폭 단순화합니다!

큰 = x > 10?
사실 : 거짓;
JavaScript는 자동으로 변수를 호이스트하지만 이 방법을 사용하면 Done 함수의 머리 부분에 모든 변수를 한 줄에 넣을 수 있습니다.
let big = (x & gt; 10);
let x = 3,
big = (x & gt; 10) : (더 큰 10”: ( x < 5) ? "5와 10 사이";
console.log(big)
//"5가 적음"let x =
20,
big = {true: x>10,
false: x<=
10};console.log(big); =true, false=false}"
4. 변수 선언
최적화 전:

let x;

let z =
최적화 후:
x, y, z를 보자 =
3;

5. 할당문 단순화

단순화 전:

y=y*
x=x+1; minusCount = 마이너스 개수 -
1;
10;

간체:
x++;minusCount --;
y* =10;

가정 x=10, y=5인 경우 기본 산술 연산에 다음 약어를 사용할 수 있습니다:

x *= y // x=50
x += y
// x=15
x -= y // x=5

x /= y

// x=2

x=10y=5,那么基本的算术操作可以使用如下的简写方式:

x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0

 

6. 避免使用RegExp +

RegExp(

"d+(.) +d+",

"igm"),
result = re.exec("padding 01234 text text 56789 padding");console.log(결과); //"01234 text text 56789"
간체:
var result =

/d+(.)+d+/igm.exec (

조건 최적화

단순하지만 가치가 있는 언급. 단순화 전: 단순화 후:
if (likeJavaScript === true)

if (likeJavaScript)

let c;
무엇이 사실이 아닌지 판단하는 또 다른 예를 들어보겠습니다.

if ( c!=

true ) {
// 뭔가를 하세요...
}

간체:

let c;
if ( !c ) {
// 뭔가를 하세요...
}

9 . 함수 매개변수 최적화

저는 개인적으로 함수 매개변수에 접근하기 위해 객체 요소를 얻는 방법을 사용하는 경향이 있습니다. 물론 이것은 의견의 문제입니다!

보통 사용되는 버전:

function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// 뭔가를 하세요...
}
myFunction( "String", 1, [], {}, true );

내가 가장 좋아하는 버전:

function myFunction( ) {
/* 주석 부분
console.log( 인수.길이 ); // 5
반환for ( i = 0; i < 인수.길이; i++ ) {
console.log( typeof 인수[ i] ); // 문자열, 숫자, 객체, 객체, 부울
}
*/
}
myFunction( "String", 1, [], {}, true );

번역자 주: 원본 기사 아래에 원본 포스터의 방법을 사용하지 않는 것이 좋습니다. 첫 번째 방법을 사용할 때 함수 매개 변수의 순서가 변경될 수 있으므로 주의해야 합니다. 두 번째 방법으로.

10. charAt()의 대안

단순화 전:

"myString".charAt(
0);

이후 단순화:

"myString"[
0]; // Return 'm'

번역자 주: 이제 첫 번째 방법을 사용하는 사람이 많지 않은 것 같아요!

11. 함수 호출이 더 짧아질 수 있습니다.

단순화 전:

function
x() {console.log('x')};function y() { console .log('y')};
let z =
3;
if (z ==
3) {
x ();
}
else
{
y();
}

간체:

함수
x() {콘솔 로그( 'x')};function y() {console.log('y')};let z = 3; (z ==
3?x:y)();
4는 4가 아니라 4는 짧다고 했죠?


12. 큰 숫자를 우아하게 표현하는 방법

자바스크립트에는 숫자를 축약하는 방법이 있는데, 아마 무시하셨을 겁니다.

는 10000000을 의미합니다.

1e7단순화 전:

for (
let i = 0; i < 10000; i++) {
단순화 후:


for (
let i = 0; i < 1e7; i++) {

위 내용은 JavaScript에서 마스터해야 할 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿