최고의 자바 스크립트 구문 설탕

다음은 몇 가지 보석입니다.

리터럴 :

var obj = {}; // Object literal, equivalent to var obj = new Object();
var arr = []; // Array literal, equivalent to var arr = new Array();
var regex = /something/; // Regular expression literal, equivalent to var regex = new RegExp('something');

기본값 :

arg = arg || 'default'; // if arg evaluates to false, use 'default', which is the same as:
arg = !!arg ? arg : 'default';

물론 우리는 익명의 함수를 알고 있지만, 그것들을 리터럴로 취급하고 그 자리에서 (클로저로) 실행할 수 있다는 것은 훌륭합니다.

(function() { ... })(); // Creates an anonymous function and executes it

질문 : 자바 스크립트에서 사용할 수있는 다른 훌륭한 구문 설탕은 무엇입니까?

현재 날짜 시간을 밀리 초로 가져옵니다.

Date.now()

예를 들어, 코드 섹션의 실행 시간을 측정하려면 다음을 수행하십시오.

var start = Date.now();
// some code
alert((Date.now() - start) + " ms elapsed");

개체 멤버십 테스트 :

var props = {a : 1, b : 2};

(props의 "a") // true
(props의 "b") // true
(props의 "c") // false

Mozilla (및 IE7)에서는 다음을 사용하여 XML 상수를 만들 수 있습니다.

var xml = <elem> </ elem>;

변수를 대체 할 수도 있습니다.

var elem = "html";
var text = "일부 텍스트";
var xml = <{elem}> {text} </ {elem}>;

익명 함수와 클로저를 사용하여 개인 변수 (정보 숨김) 및 관련 get / set 메서드를 만듭니다.

var getter, setter;

(function()
{
   var _privateVar=123;
   getter = function() { return _privateVar; };
   setter = function(v) { _privateVar = v; };
})()

프로토 타입 상속을 통해 네이티브 JavaScript 유형을 확장 할 수 있습니다.

String.prototype.isNullOrEmpty = function(input) {
    return input === null || input.length === 0;
}

===값 과 유형 을 비교하는 데 사용 합니다 .

var i = 0;
var s = "0";

if (i == s) // 참

if (i === s) // 거짓

여러 줄 문자열 :

var str = "이것은 \
모두 하나
끈.";

문자열에 공백을 추가하지 않고는 다음 줄을 들여 쓸 수 없기 때문에 사람들은 일반적으로 더하기 연산자로 연결하는 것을 선호합니다. 그러나 이것은 여기 에 좋은 문서 기능을 제공합니다.

배열 길이 크기 조정

길이 속성은 읽기 전용이 아닙니다 . 배열의 크기를 늘리거나 줄이는 데 사용할 수 있습니다.

var myArray = [1,2,3];
myArray.length // 3 elements.
myArray.length = 2; //Deletes the last element.
myArray.length = 20 // Adds 18 elements to the array; the elements have the empty value. A sparse array.

빈 배열에서 join 메소드를 활용하여 "-"와 같은 문자열을 특정 횟수만큼 반복 :

var s = new Array(repeat+1).join("-");

repeat == 3이면 "---"가됩니다.

기본 연산자와 마찬가지로 ||가드 연산자 &&입니다.

answer = obj && obj.property

반대로

if (obj) {
    answer = obj.property;
}
else {
    answer = null;
}

var tags = {
    name: "Jack",
    location: "USA"
};

"Name: {name}<br>From {location}".replace(/\{(.*?)\}/gim, function(all, match){
    return tags[match];
});

문자열 교체를위한 콜백은 유용합니다.

게터 및 세터 :

function Foo(bar)
{
    this._bar = bar;
}

Foo.prototype =
{
    get bar()
    {
        return this._bar;
    },

    set bar(bar)
    {
        this._bar = bar.toUpperCase();
    }
};

우리에게 주어지다:

>>> var myFoo = new Foo("bar");
>>> myFoo.bar
"BAR"
>>> myFoo.bar = "Baz";
>>> myFoo.bar
"BAZ"

이것은 자바 스크립트 전용이 아니지만 세 줄의 코드처럼 절약됩니다.

check ? value1 : value2

levik의 예에 대해 조금 더 :

var foo = (condition) ? value1 : value2;

Javascript 1.6 의 Array # forEach

myArray.forEach(function(element) { alert(element); });

다음 obj || {default : true} 구문 :

, 하나 개의 매개 변수가 정의되지 않은 경우 안녕하세요 (neededOne && neededTwo && needThree) 또는 (false)를 인사 호출 한 후 거짓이 당신의 함수를 호출 때때로 유용

고정 된 구성 요소 부분 집합이있는 구문 분석 상황에서 :

var str = "John Doe";

"파괴 할당"synatx를 사용하여 결과를 변수에 직접 할당 할 수 있습니다.

var [fname, lname] = str.split(" ");
alert(lname + ", " + fname);

다음보다 조금 더 읽기 쉽습니다.

var a = str.split(" ");
alert(a[1] + ", " + a[0]);

번갈아:

var [str, fname, lname] = str.match(/(.*) (.*)/);

이것은 Javascript 1.7 기능입니다. 지금은 Mozilla 2.0+ 및 Chrome 6+ 브라우저입니다.

즉시 호출 된 화살표 기능 :

var test = "hello, world!";
(() => test)(); //returns "hello, world!";

나는 잊었다 :

(function() { ... }).someMethod(); // Functions as objects

간단히 : ({})를 사용하여 익명 개체 리터럴을 만듭니다.

예 : 객체에 valueOf 메소드가 있는지 알아야합니다.

var hasValueOf = !! ({}). valueOf

보너스 구문 설탕 : 이중이 아닌 '!!' 거의 모든 것을 부울로 아주 간결하게 변환합니다.

나는 json 문자열을 eval ()하고 완전히 채워진 데이터 구조를 되 찾을 수 있다는 것을 좋아합니다. 나는 모든 것을 적어도 두 번 작성해야하는 것을 싫어한다 (IE의 경우 한 번, Mozilla의 경우 다시).

자주 사용되는 키워드 (또는 모든 메서드)를 ths와 같은 간단한 변수로 지정

  var $$ = document.getElementById;

  $$('samText');

세미- "유창한 인터페이스"를 제공하는 JavaScript의 Date 클래스. 이로 인해 Date 클래스에서 직접 날짜 부분을 추출 할 수 없습니다.

var today = new Date((new Date()).setHours(0, 0, 0, 0));

다음은 실제로 Date 객체가 아닌 숫자 값만 제공하기 때문에 완전한 Fluent 인터페이스가 아닙니다.

var today = new Date().setHours(0, 0, 0, 0);

기본 대체 :

var foo = {}; // empty object literal

alert(foo.bar) // will alert "undefined"

alert(foo.bar || "bar"); // will alert the fallback ("bar")

실제 예 :

// will result in a type error
if (foo.bar.length === 0)

// with a default fallback you are always sure that the length
// property will be available.
if ((foo.bar || "").length === 0) 

방금 발견 한 것은 함수를 호출하기 전에 null 확인입니다.

a = b && b.length;

이것은 다음과 같은 더 짧습니다.

a = b ? b.length : null;

가장 좋은 점은 속성 체인을 확인할 수 있다는 것입니다.

a = b && b.c && b.c.length;

나는 목록으로 작업하는 것이 얼마나 간단한 지 좋아합니다.

var numberName = ["zero", "one", "two", "three", "four"][number];

그리고 해시 :

var numberValue = {"zero":0, "one":1, "two":2, "three":3, "four":4}[numberName];

대부분의 다른 언어에서 이것은 상당히 무거운 코드입니다. 값 기본값도 아름답습니다. 예를 들어 오류 코드보고 :

var errorDesc = {301: "Moved Permanently",
                 404: "Resource not found",
                 503: "Server down"
                }[errorNo] || "An unknown error has occurred";

int to string cast

var i = 12;
var s = i+"";

element.innerHTML = "";  // Replaces body of HTML element with an empty string.

요소의 모든 자식 노드를 삭제하는 바로 가기입니다.

불가능한 경우 문자열을 정수로 기본 0으로 변환합니다.

0 | "3" //result = 3
0 | "some string" -> //result = 0
0 | "0" -> 0 //result = 0

경우에 따라 유용 할 수 있습니다. 대부분 0이 나쁜 결과로 간주 될 때

템플릿 리터럴

var a = 10;
var b = 20;
var text = `${a} + ${b} = ${a+b}`;

그러면 텍스트 변수는 아래와 같습니다!

10 + 20 = 30