Пожаловаться

Скрытые фичи JavaScript

14679
Пожаловаться

Несмотря на высокую востребованность, совсем немногие разработчики знают его скрытые фичи языка JavaScript. Перед вами 10 главных скрытых фишек JavaScript по мнению пользователей stackoverflow.

1. Работа с аргументами функции

Вам не нужно определять параметры для функции. Вы можете просто использовать массиво-подобный объект функции argument.

	
function sum() { 
    var retval = 0; 
    for (var i = 0, len = arguments.length; i < len; ++i) { 
        retval += arguments[i]; 
    } 
    return retval;
} 
sum(1, 2, 3) // вернет 6

2. Операторы === и !==

Всегда используйте === и !== вместо == и !=.

	
alert('' == '0'); //false 
alert(0 == ''); // true 
alert(0 =='0'); // true

== не является транзитивным. Если вы используете === , то оно как и ожидалось будет возвращать false для всех вышеперечисленных случаев.

3. Функции в JavaScript

Функции - граждане первого класса в JavaScript:

	
var passFunAndApply = function (fn,x,y,z) { 
    return fn(x,y,z); 
}; 

var sum = function(x,y,z) {
    return x+y+z;
}; 

alert(passFunAndApply(sum,3,4,5)); // 12

В частности функции могут быть переданы как параметры, например Array.filter() является функцией обратного вызова:


[1, 2, -1].filter(function(element, index, array) { 
   return element > 0 }); // -> [1,2]

Также вы можете объявить "private" функцию, которая существует только в области действия определенной функции:


function PrintName() { 
var privateFunction = function() { 
   return "Steve"; 
}; 
return privateFunction(); 
}

4. Оператор in

Вы можете использовать оператор in для того чтобы проверить есть ли такой ключ у объекта:

	
var x = 1; 
var y = 3; 
var list = {0:0, 1:0, 2:0};
x in list; //true 
y in list; //false 
1 in list; //true 
y in {3:0, 4:0, 5:0}; //true

Если вы посчитаете, что литералы объекта недостаточно хорошо выглядят, то вы можете комбинировать их с помощью функции без параметров:


function list() {
var x = {}; 
for(var i=0; i < arguments.length; ++i)
 x[arguments[i]] = 0;
 return x 
}

5 in list(1,2,3,4,5) //true

5. Значения по умолчанию

Вы можете использовать оператор || в выражении присваивания для предоставления значения по умолчанию:

	
var a = b || c;

Переменная a получит значение c только если b = false (то есть если null, false, undefined, 0, empty string, или NaN), иначе a получит значение b.
Это часто полезно в функциях, когда вы хотите присвоить значение по умолчанию аргументу в случае, если оно не указано:


function example(arg1) { 
    arg1 || (arg1 = 'default value'); 
}

 

Например IE отказывает в обработчике событий:


function onClick(e) {
    e || (e = window.event); 
}
The debugger 

Этот оператор позволяет расставить брейкпоинты внутри кода:


// ... debugger; // ...

 

Если отладчик активен, то это приведет к его остановке прямо на этой линии.
Другими словами, если отладчик не работает в данный момент, то выражение не будет иметь видимого эффекта.
Многострочные литералы

	
var str = "This is a \ 
really, really \ 
long line!";

Вы должны быть осторожны, потому как символ рядом с '\' должен заканчивать строку, если у вас стоит пробел после '\', код будет выглядеть так же, но появится SyntaxError.

6. Область действия в JavaScript

JavaScript не имеет области действия блока:


var x = 1; 
{ var x = 2; } 
alert(x); // выводит 2

7. Свойства объекта

Вы можете получить доступ к свойствам объекта с помощью [] вместо '.'. Это позволяет найти свойство, которое соответствует переменной.

	
obj = {a:"test"}; 
var propname = "a"; 
var b = obj[propname]; // "test"

Также вы можете использовать это для получения/установки значения свойства, если его название неразрешенный идентификатор.

	
obj["class"] = "test"; // class - зарезервированное слово; obj.class было бы недоступно. 
obj["two words"] = "test2"; // использования оператора . невозможно с пробелом.

Некоторые люди не знают этого и заканчивают это использованием eval(),что по-настоящему плохая идея:


var propname = "a"; 
var a = eval("obj." + propname);

Так код сложнее читать, сложнее находить ошибки(невозможно использование jslint), он медленнее выполняется и может привести к XSS.

8. mdc

Если вы пробовали гуглить что-нибудь по JavaScript на эту тему, то добавьте в запрос "mdc" тогда первые результаты будут от Mozilla Developer Center.
Например:

Google: javascript array sort mdc

(в большинстве случаев можно исключить "javascript")

UPD: Mozilla Developer Center был переименован в Mozilla Developer Network. Ключевое слово "mdc" работает по-прежнему, но возможно вскоре нужно будет использовать "mdn".

9. Cap Obvious

Установите Firebug и используйте console.log("hello"). Это намного удобнее использования случайных alert();’ов

10. Private методы

Объекты могут иметь private методы

	
function Person(firstName, lastName) { 
    this.firstName = firstName; 
    this.lastName = lastName; //private метод видим только внутри этого конструктора function calcFullName() { 
    return firstName + " " + lastName; } // public метод доступен всем
    this.sayHello = function () { 
        alert(calcFullName()); 
    } 
} 
//Использование: 
var person1 = new Person("Bob", "Loblaw"); 
person1.sayHello(); // Это не сработает так метод отсюда невидим alert(person1.calcFullName());

Также вам могут понравится:

15 советов по программированию на языке JavaScript
62 лучших видео для тех, кто хочет углубить знания в JavaScript

14679

Комментарии

Рекомендуем

BUG!