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

Question

보석은 다음과 같습니다.

리터럴 :

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

의문: JavaScript에서 다른 훌륭한 구문 설탕은 무엇입니까?

Answer 1

현재 DateTime을 밀리 초로 가져 오기 :

Date.now()

예를 들어, 코드 섹션의 실행 시간에 다음과 같습니다.

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

Answer 2

객체 멤버십 테스트 :

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

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

Answer 3

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

var xml = <elem></elem>;

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

var elem = "html";
var text = "Some text";
var xml = <{elem}>{text}</{elem}>;

Answer 4

익명의 기능과 폐쇄를 사용하여 개인 변수 (정보 숨기기) 및 관련된 GET/세트 방법을 생성합니다.

var getter, setter;

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

Answer 5

프로토 타입 상속을 통해 기본 JavaScript 유형을 확장 할 수 있습니다.

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

Answer 6

사용 === 가치를 비교합니다 그리고 유형:

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

if (i == s)  // true

if (i === s) // false

Answer 7

멀티 라인 문자열 :

var str = "This is \
all one \
string.";

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

Answer 8

배열의 길이를 조정하십시오

길이 속성은 a입니다 읽지 않습니다. 배열의 크기를 늘리거나 줄일 수 있습니다.

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.

Answer 9

빈 배열에서 결합 메소드를 활용하여 "-"-"와 같은 문자열을 반복합니다.

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

"---"가 반복 될 때 == 3.

Answer 10

기본 연산자처럼 || 가드 운영자입니다. &&.

answer = obj && obj.property

반대로

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

Answer 11

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

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

String Replace의 콜백은 유용합니다.

Answer 12

게터와 세터:

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"

Answer 13

이것은 JavaScript 독점은 아니지만 세 줄의 코드와 같이 저장합니다.

check ? value1 : value2

Answer 14

Levik의 예에 대해 조금 더 :

var foo = (condition) ? value1 : value2;

Answer 15

그만큼 배열#foreach JavaScript 1.6

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

Answer 16

다음 obj || {기본값 : true} 구문 :

이것으로 당신의 기능을 호출하십시오 : hello (revelseone && indredtwo && 니드 터프리) 하나의 매개 변수가 정의되지 않았거나 false 인 경우 hello (false)라고 부릅니다. 때때로 유용한

Answer 17

고정 된 구성 요소 부품 세트가있는 구문 분석 상황에서 :

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(/(.*) (.*)/);

이것은 a입니다 JavaScript 1.7 특징. 현재 Mozilla 2.0+ 및 Chrome 6+ 브라우저입니다.

Answer 18

즉시 호출 된 화살표 기능 :

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

Answer 19

나는 잊었다 :

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

Answer 20

간단히 사용하여 익명의 개체를 만듭니다 : ({})

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

var hasvalueof = !! ({}).

보너스 구문 설탕 : 이중-노트 '!!' 거의 모든 것을 부울으로 변환하는 것.

Answer 21

나는 JSON 문자열을 평가하고 완전히 인구가 많은 데이터 구조를 되 찾는 것을 좋아합니다. 나는 모든 것을 적어도 두 번 이상 써야하는 것을 싫어합니다 (즉, 다시 한 번, Mozilla의 경우).

Answer 22

자주 사용되는 키워드 (또는 모든 방법)를 THS와 같은 간단한 변수로 자주 사용합니다.

  var $$ = document.getElementById;

  $$('samText');

Answer 23

반 "유창한 인터페이스"를 제공하는 JavaScript의 날짜 클래스. 이것은 날짜 클래스에서 날짜 부분을 직접 추출 할 수 없다는 것을 보완합니다.

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

다음은 실제로 날짜 개체가 아닌 수치 값 만 제공하기 때문에 완전히 유창한 인터페이스가 아닙니다.

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

Answer 24

기본 폴백 :

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) 

Answer 25

방금 발견 한 것은 다음과 같습니다. 널 확인하기 전에 NULL Check :

a = b && b.length;

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

a = b ? b.length : null;

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

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

Answer 26

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

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";

Answer 27

int to string cast

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

Answer 28

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

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

Answer 29

불가능한 경우 문자열을 정수로 변환하십시오.

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

어떤 경우에는 0, 대부분 0이 나쁜 결과로 간주되는 경우 유용 할 수 있습니다.

Answer 30

템플릿 리터럴

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

그럼 텍스트 변수는 다음과 같습니다!

10 + 20 = 30