Приховані особливості JavaScript? [зачинено]

Як ви вважаєте, які «приховані функції» JavaScript повинні знати кожен програміст?

Побачивши чудову якість відповідей на наступні запитання, я подумав, що прийшов час задати JavaScript.

• Приховані особливості HTML
• Приховані особливості CSS
• Приховані особливості PHP
• Приховані особливості ASP.NET
• Приховані особливості C #
• Приховані особливості Java
• Приховані особливості Python

Незважаючи на те, що JavaScript, напевно, є найважливішою мовою на стороні клієнта зараз (просто запитайте Google), дивно, як мало хто з більшості веб-розробників оцінює, наскільки він насправді потужний.

Вам не потрібно визначати жодні параметри для функції. Ви можете просто використовувати argumentsоб’єкт, подібний до масиву функції .

function sum() {
    var retval = 0;
    for (var i = 0, len = arguments.length; i < len; ++i) {
        retval += arguments[i];
    }
    return retval;
}

sum(1, 2, 3) // returns 6

Я можу процитувати більшість відмінних книг JavaScript Дугласа Крокфорда : Добрі частини .

Але я візьму для вас лише один, завжди використовуйте ===і !==замість ==і!=

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

==не є перехідним. Якщо ви використовуєте, ===це дасть помилковий для всіх цих тверджень, як очікувалося.

Функції є громадянами першого класу в 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

Функціональні методи програмування можна використовувати для написання елегантного JavaScript .

Зокрема, функції можуть передаватися як параметри, наприклад Array.filter () приймає зворотний виклик:

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

Ви також можете оголосити "приватну" функцію, яка існує лише в межах певної функції:

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

Ви можете скористатися оператором 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

Призначення змінних за замовчуванням

Ви можете використовувати логічний або оператор ||у виразі призначення, щоб надати значення за замовчуванням:

var a = b || c;

aМінлива отримає значення cтільки тоді , коли bце falsy (якщо є null, false, undefined, 0, empty string, або NaN), в іншому випадку aотримаєте значення b.

Це часто корисно у функціях, коли ви хочете надати аргументу значення за замовчуванням, якщо він не надається:

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

Приклад резервного IE у обробниках подій:

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

Наступні мовні функції були у нас давно, всі реалізації JavaScript підтримують їх, але вони не були частиною специфікації до ECMAScript 5th Edition :

debuggerзаяву

Описано в: § 12.15 Заява про налагодження

Це твердження дозволяє програматично вводити точки переривання у ваш код просто:

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

Якщо налагоджувач присутній або активний, це призведе до того, що він порушиться негайно, прямо на цьому рядку.

В іншому випадку, якщо налагоджувача немає або активний, це твердження не має спостережуваного ефекту.

Багаторядкові рядкові літерали

Описано в: § 7.8.4. Строкові літерали

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

Ви повинні бути обережними, тому що символ поряд із \ обов'язковим повинен бути термінатором рядка, якщо у вас є пробіл після, \наприклад, код буде виглядати точно так само, але він підніме «a» SyntaxError.

У JavaScript немає області блоку (але він закритий, так що давайте назвемо його навіть?).

var x = 1;
{
   var x = 2;
}
alert(x); // outputs 2

Ви можете отримати доступ до властивостей об'єкта за допомогою, []а не з.

Це дозволяє шукати властивість, що відповідає змінній.

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

Ви також можете використовувати це для отримання / встановлення властивостей об'єкта, ім'я якого не є юридичним ідентифікатором.

obj["class"] = "test";  // class is a reserved word; obj.class would be illegal.
obj["two words"] = "test2"; // using dot operator not possible with the space.

Деякі люди цього не знають і в кінцевому підсумку використовують eval (), подібний до цього, що дуже погана ідея :

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

Це важче читати, складніше знаходити помилки (не можна використовувати jslint), повільніше виконувати та може призвести до XSS подвигів.

Якщо ви шукаєте в Google за гідною посиланням JavaScript на певну тему, включіть у свій запит ключове слово "mdc", і ваші перші результати отримають у Центрі розробників Mozilla. Я не несу при собі жодних довідок чи книг в автономному режимі. Я завжди використовую фокус ключових слів "mdc", щоб безпосередньо дістатися до того, що шукаю. Наприклад:

Google: масив javascript сортування mdc
(у більшості випадків ви можете опустити "javascript")

Оновлення: Центр розробників Mozilla перейменований у Мережу розробників Mozilla . Трюк із ключовими словами "mdc" все ще працює, але досить скоро нам, можливо, доведеться замість цього почати використовувати "mdn" .

Можливо, трохи очевидним для когось ...

Встановіть Firebug і використовуйте console.log ("привіт"). Набагато краще, ніж використання випадкового сигналу (); я пам'ятаю, що робив багато років тому.

Приватні методи

Об'єкт може мати приватні методи.

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    // A private method only visible from within this constructor
    function calcFullName() {
       return firstName + " " + lastName;    
    }

    // A public method available to everyone
    this.sayHello = function () {
        alert(calcFullName());
    }
}

//Usage:
var person1 = new Person("Bob", "Loblaw");
person1.sayHello();

// This fails since the method is not visible from this scope
alert(person1.calcFullName());

Також згадується в "Javascript: The Good Parts" Крокфорда:

parseInt()небезпечно. Якщо ви передаєте йому рядок, не повідомляючи її про належну базу, вона може повернути несподівані номери. Наприклад, parseInt('010')повертає 8, а не 10. Передача бази на parseInt змушує її працювати правильно:

parseInt('010') // returns 8! (in FF3)
parseInt('010', 10); // returns 10 because we've informed it which base to work with.

Функції є об'єктами і тому можуть мати властивості.

fn = функція (x) {
   // ...
}

fn.foo = 1;

fn.next = функція (y) {
  //
}

Я повинен би сказати функції самовиконання.

(function() { alert("hi there");})();

Оскільки у Javascript немає області блоку , ви можете використовувати функцію самовиконання, якщо ви хочете визначити локальні змінні:

(function() {
  var myvar = 2;
  alert(myvar);
})();

Тут myvarне втручається чи не забруднює глобальну сферу, і зникає, коли функція припиняється.

Знайте, скільки параметрів очікує функція

function add_nums(num1, num2, num3 ){
    return num1 + num2 + num3;
}
add_nums.length // 3 is the number of parameters expected.

Знайте, скільки параметрів отримує функція

function add_many_nums(){
    return arguments.length;
}    
add_many_nums(2,1,122,12,21,89); //returns 6

Ось кілька цікавих речей:

• За порівнянні NaNз чим - або (навіть NaN) завжди помилково, що включає в себе ==, <і >.
• NaN Позначає не число, але якщо ви запитаєте тип, він фактично повертає число.
• Array.sort може приймати функцію порівняння та викликається драйвером, що нагадує швидкий корт (залежить від реалізації).
• Регулярне вираження "константи" може підтримувати стан, як і останнє, що вони відповідали.
• Деякі версії JavaScript дозволяють вам отримати доступ $0, $1, $2члени на регулярний вираз.
• nullна відміну від усього іншого. Це не є ні об'єктом, ні булевим числом, ні числом, а й рядком undefined. Це трохи схоже на "замінник" undefined. (Примітка: typeof null == "object")
• У найвіддаленішому контексті thisвиходить інакше неіменний [Глобальний] об’єкт.
• Оголошення змінної за допомогою var, замість того, щоб просто покладатися на автоматичне оголошення змінної, дає реальним шансам оптимізувати доступ до цієї змінної.
• withКонструкція буде знищувати такий optimzations
• Імена змінних можуть містити символи Unicode.
• Регулярні вирази JavaScript фактично не є регулярними. Вони ґрунтуються на регексах Perl, і можна побудувати вирази за допомогою головних головок, які оцінюють дуже багато часу.
• Блоки можна мітити і використовувати як цілі break. Петлі можна мітити і використовувати як ціль continue.
• Масиви не рідкісні. Встановлення 1000-го елемента порожнього масиву має заповнити його undefined. (залежить від реалізації)
• if (new Boolean(false)) {...} виконає {...}блок
• Двигун регулярних виразів Javascript є специфічним для впровадження: наприклад, можна записати "не портативні" регулярні вирази.

[оновлено трохи у відповідь на хороші коментарі; будь ласка, дивіться коментарі]

Я знаю, що я запізнююся на вечірку, але я просто не можу повірити, що +корисність оператора не згадується за межами "перетворення нічого в число". Можливо, це наскільки добре прихована функція?

// Quick hex to dec conversion:
+"0xFF";              // -> 255

// Get a timestamp for now, the equivalent of `new Date().getTime()`:
+new Date();

// Safer parsing than parseFloat()/parseInt()
parseInt("1,000");    // -> 1, not 1000
+"1,000";             // -> NaN, much better for testing user input
parseInt("010");      // -> 8, because of the octal literal prefix
+"010";               // -> 10, `Number()` doesn't parse octal literals 

// A use case for this would be rare, but still useful in cases
// for shortening something like if (someVar === null) someVar = 0;
+null;                // -> 0;

// Boolean to integer
+true;                // -> 1;
+false;               // -> 0;

// Other useful tidbits:
+"1e10";              // -> 10000000000
+"1e-4";              // -> 0.0001
+"-12";               // -> -12

Звичайно, ви можете зробити все це, використовуючи Number()натомість, але +оператор настільки гарніший!

Ви також можете визначити числове повернене значення для об'єкта, замінивши valueOf()метод прототипу . Будь-яке перетворення чисел, виконане на цьому об'єкті, не призведе до NaN, а повернене значення valueOf()методу:

var rnd = {
    "valueOf": function () { return Math.floor(Math.random()*1000); }
};
+rnd;               // -> 442;
+rnd;               // -> 727;
+rnd;               // -> 718;

" Методи розширення в JavaScript " через властивість прототипу.

Array.prototype.contains = function(value) {  
    for (var i = 0; i < this.length; i++) {  
        if (this[i] == value) return true;  
    }  
    return false;  
}

Це додасть containsметод до всіх Arrayоб'єктів. Ви можете викликати цей метод за допомогою цього синтаксису

var stringArray = ["foo", "bar", "foobar"];
stringArray.contains("foobar");

Щоб правильно видалити властивість з об’єкта, слід видалити властивість, а не просто встановити його на невизначений :

var obj = { prop1: 42, prop2: 43 };

obj.prop2 = undefined;

for (var key in obj) {
    ...

Властивість prop2 все ще буде частиною ітерації. Якщо ви хочете повністю позбутися prop2 , вам слід:

delete obj.prop2;

Властивість prop2 більше не відображатиметься під час перегляду властивостей.

with.

Він використовується рідко, і, чесно кажучи, рідко корисний ... Але, за обмежених обставин, він має своє використання.

Наприклад: об'єкти-літерали досить зручні для швидкого налаштування властивостей на новий об’єкт. Але що робити, якщо вам потрібно змінити половину властивостей на існуючому об’єкті?

var user = 
{
   fname: 'Rocket', 
   mname: 'Aloysus',
   lname: 'Squirrel', 
   city: 'Fresno', 
   state: 'California'
};

// ...

with (user)
{
   mname = 'J';
   city = 'Frostbite Falls';
   state = 'Minnesota';
}

Алан Сторм зазначає, що це може бути дещо небезпечно: якщо об'єкт, використовуваний як контекст, не має жодного з призначених властивостей, він буде вирішений у зовнішній області, можливо, створивши або перезаписавши глобальну змінну. Це особливо небезпечно, якщо ви звикли писати код для роботи з об'єктами, де властивості з значеннями за замовчуванням або порожніми значеннями не визначені:

var user = 
{
   fname: "John",
// mname definition skipped - no middle name
   lname: "Doe"
};

with (user)
{
   mname = "Q"; // creates / modifies global variable "mname"
}

Тому, мабуть, є хорошою ідеєю уникати використання with оператора для такого призначення.

Дивіться також: Чи є законне використання для JavaScript оператора "з"?

Методи (або функції) можна викликати на об'єкті, не такого типу, з яким вони були розроблені для роботи. Це чудово, щоб викликати рідні (швидкі) методи на користувацьких об'єктах.

var listNodes = document.getElementsByTagName('a');
listNodes.sort(function(a, b){ ... });

Цей код виходить з ладу, оскільки listNodesвін не єArray

Array.prototype.sort.apply(listNodes, [function(a, b){ ... }]);

Цей код працює тому, що listNodesвизначає достатньо властивостей, схожих на масив (довжина, [] оператор), якими повинен користуватися sort().

Прототипне успадкування (популяризоване Дугласом Крокфордом) повністю революціонує те, як ви думаєте про навантаження речей у Javascript.

Object.beget = (function(Function){
    return function(Object){
        Function.prototype = Object;
        return new Function;
    }
})(function(){});

Це вбивця! Шкода, що майже ніхто цим не користується.

Це дозволяє "породити" нові екземпляри будь-якого об'єкта, розширити їх, зберігаючи (живе) прототипне посилання успадкування до інших їх властивостей. Приклад:

var A = {
  foo : 'greetings'
};  
var B = Object.beget(A);

alert(B.foo);     // 'greetings'

// changes and additionns to A are reflected in B
A.foo = 'hello';
alert(B.foo);     // 'hello'

A.bar = 'world';
alert(B.bar);     // 'world'


// ...but not the other way around
B.foo = 'wazzap';
alert(A.foo);     // 'hello'

B.bar = 'universe';
alert(A.bar);     // 'world'

Дехто назвав би це питанням смаку, але:

aWizz = wizz || "default";
// same as: if (wizz) { aWizz = wizz; } else { aWizz = "default"; }

Тринаціональний оператор може бути прикований до дії, як схема (умова ...):

(cond (predicate  (action  ...))
      (predicate2 (action2 ...))
      (#t         default ))

можна записати як ...

predicate  ? action( ... ) :
predicate2 ? action2( ... ) :
             default;

Це дуже "функціонально", оскільки він розгалужує ваш код без побічних ефектів. Тож замість:

if (predicate) {
  foo = "one";
} else if (predicate2) {
  foo = "two";
} else {
  foo = "default";
}

Ви можете написати:

foo = predicate  ? "one" :
      predicate2 ? "two" :
                   "default";

Добре працює і з рекурсією :)

Числа - це також об’єкти. Тож ви можете робити цікаві речі, такі як:

// convert to base 2
(5).toString(2) // returns "101"

// provide built in iteration
Number.prototype.times = function(funct){
  if(typeof funct === 'function') {
    for(var i = 0;i < Math.floor(this);i++) {
      funct(i);
    }
  }
  return this;
}


(5).times(function(i){
  string += i+" ";
});
// string now equals "0 1 2 3 4 "

var x = 1000;

x.times(function(i){
  document.body.innerHTML += '<p>paragraph #'+i+'</p>';
});
// adds 1000 parapraphs to the document

Як щодо закриття в JavaScript (подібно до анонімних методів у C # v2.0 +). Ви можете створити функцію, яка створює функцію або "вираз".

Приклад закриття :

//Takes a function that filters numbers and calls the function on 
//it to build up a list of numbers that satisfy the function.
function filter(filterFunction, numbers)
{
  var filteredNumbers = [];

  for (var index = 0; index < numbers.length; index++)
  {
    if (filterFunction(numbers[index]) == true)
    {
      filteredNumbers.push(numbers[index]);
    }
  }
  return filteredNumbers;
}

//Creates a function (closure) that will remember the value "lowerBound" 
//that gets passed in and keep a copy of it.
function buildGreaterThanFunction(lowerBound)
{
  return function (numberToCheck) {
    return (numberToCheck > lowerBound) ? true : false;
  };
}

var numbers = [1, 15, 20, 4, 11, 9, 77, 102, 6];

var greaterThan7 = buildGreaterThanFunction(7);
var greaterThan15 = buildGreaterThanFunction(15);

numbers = filter(greaterThan7, numbers);
alert('Greater Than 7: ' + numbers);

numbers = filter(greaterThan15, numbers);
alert('Greater Than 15: ' + numbers);

Ви також можете розширювати (успадковувати) класи та переосмислювати властивості / методи за допомогою прототипу ланцюжка-прототипу16, на який посилалися.

У наступному прикладі ми створюємо клас Pet та визначаємо деякі властивості. Ми також перекриваємо метод .toString (), успадкований від Object.

Після цього ми створюємо клас Dog, який розширює Pet і переосмислює метод .toString (), знову змінюючи його поведінку (поліморфізм). Крім того, ми додаємо ще деякі властивості до дочірнього класу.

Після цього ми перевіряємо ланцюжок спадкування, щоб виявити, що собака все ще типу типу собака, типу Pet та типу Object.

// Defines a Pet class constructor 
function Pet(name) 
{
    this.getName = function() { return name; };
    this.setName = function(newName) { name = newName; };
}

// Adds the Pet.toString() function for all Pet objects
Pet.prototype.toString = function() 
{
    return 'This pets name is: ' + this.getName();
};
// end of class Pet

// Define Dog class constructor (Dog : Pet) 
function Dog(name, breed) 
{
    // think Dog : base(name) 
    Pet.call(this, name);
    this.getBreed = function() { return breed; };
}

// this makes Dog.prototype inherit from Pet.prototype
Dog.prototype = new Pet();

// Currently Pet.prototype.constructor
// points to Pet. We want our Dog instances'
// constructor to point to Dog.
Dog.prototype.constructor = Dog;

// Now we override Pet.prototype.toString
Dog.prototype.toString = function() 
{
    return 'This dogs name is: ' + this.getName() + 
        ', and its breed is: ' + this.getBreed();
};
// end of class Dog

var parrotty = new Pet('Parrotty the Parrot');
var dog = new Dog('Buddy', 'Great Dane');
// test the new toString()
alert(parrotty);
alert(dog);

// Testing instanceof (similar to the `is` operator)
alert('Is dog instance of Dog? ' + (dog instanceof Dog)); //true
alert('Is dog instance of Pet? ' + (dog instanceof Pet)); //true
alert('Is dog instance of Object? ' + (dog instanceof Object)); //true

Обидві відповіді на це питання були кодами, модифікованими з чудової статті MSDN Рея Джаджадіната.

Ви можете ловити винятки залежно від їх типу. Цитується з MDC :

try {
   myroutine(); // may throw three exceptions
} catch (e if e instanceof TypeError) {
   // statements to handle TypeError exceptions
} catch (e if e instanceof RangeError) {
   // statements to handle RangeError exceptions
} catch (e if e instanceof EvalError) {
   // statements to handle EvalError exceptions
} catch (e) {
   // statements to handle any unspecified exceptions
   logMyErrors(e); // pass exception object to error handler
}

ПРИМІТКА: Умовні умови лову - це розширення Netscape (а отже, Mozilla / Firefox), яке не є частиною специфікації ECMAScript, і тому на нього не можна покладатися, окрім окремих веб-переглядачів.

Зверху моєї голови ...

Функції

argument.callee посилається на функцію, яка розміщує змінну "аргументи", тому її можна використовувати для повторного анонімного функціонування:

var recurse = function() {
  if (condition) arguments.callee(); //calls recurse() again
}

Це корисно, якщо ви хочете зробити щось подібне:

//do something to all array items within an array recursively
myArray.forEach(function(item) {
  if (item instanceof Array) item.forEach(arguments.callee)
  else {/*...*/}
})

Об'єкти

Цікава річ про членів об’єкта: вони можуть мати будь-який рядок як їх імена:

//these are normal object members
var obj = {
  a : function() {},
  b : function() {}
}
//but we can do this too
var rules = {
  ".layout .widget" : function(element) {},
  "a[href]" : function(element) {}
}
/* 
this snippet searches the page for elements that
match the CSS selectors and applies the respective function to them:
*/
for (var item in rules) {
  var elements = document.querySelectorAll(rules[item]);
  for (var e, i = 0; e = elements[i++];) rules[item](e);
}

Струни

String.split може приймати регулярні вирази як параметри:

"hello world   with  spaces".split(/\s+/g);
//returns an array: ["hello", "world", "with", "spaces"]

String.replace може приймати регулярний вираз як параметр пошуку, а функцію як параметр заміни:

var i = 1;
"foo bar baz ".replace(/\s+/g, function() {return i++});
//returns "foo1bar2baz3"

Ви можете використовувати об'єкти замість комутаторів більшу частину часу.

function getInnerText(o){
    return o === null? null : {
        string: o,
        array: o.map(getInnerText).join(""),
        object:getInnerText(o["childNodes"])
    }[typeis(o)];
}

Оновлення: якщо ви стурбовані тим, що випадки, заздалегідь оцінені як неефективні (чому ви рано переживаєте про ефективність проектування програми ??), ви можете зробити щось подібне:

function getInnerText(o){
    return o === null? null : {
        string: function() { return o;},
        array: function() { return o.map(getInnerText).join(""); },
        object: function () { return getInnerText(o["childNodes"]; ) }
    }[typeis(o)]();
}

Це більш обтяжливо набирати (чи читати), ніж комутатор чи об’єкт, але це зберігає переваги використання об'єкта замість комутатора, детально описаного в розділі коментарів нижче. Цей стиль також робить його більш простим, щоб перетворити це на належний "клас", як тільки він виросте досить.

update2: із запропонованими розширеннями синтаксису для ES.next це стає

let getInnerText = o -> ({
    string: o -> o,
    array: o -> o.map(getInnerText).join(""),
    object: o -> getInnerText(o["childNodes"])
}[ typeis o ] || (->null) )(o);

Обов’язково використовуйте метод hasOwnProperty під час ітерації через властивості об'єкта:

for (p in anObject) {
    if (anObject.hasOwnProperty(p)) {
        //Do stuff with p here
    }
}

Це робиться для того, щоб ви отримали доступ лише до прямих властивостей anObject , а не використовувати властивості, що знаходяться вниз по ланцюгу прототипу.

Приватні змінні з публічним інтерфейсом

Він використовує акуратний маленький трюк з визначенням функції самовиклику. Все, що знаходиться всередині об'єкта, який повертається, доступне в загальнодоступному інтерфейсі, а все інше - приватне.

var test = function () {
    //private members
    var x = 1;
    var y = function () {
        return x * 2;
    };
    //public interface
    return {
        setx : function (newx) {
            x = newx;
        },
        gety : function () {
            return y();
        }
    }
}();

assert(undefined == test.x);
assert(undefined == test.y);
assert(2 == test.gety());
test.setx(5);
assert(10 == test.gety());