литералы

[] а также{} называются литералами массива и объекта соответственно.

var x = [] коротка дляvar x = new Array();

а такжеvar y = {} коротка дляvar y = new Object();

Массивы

Массивы - это структуры со свойством длины. Вы можете получить доступ к значениям через их числовой индекс.

var x = [] or var x = new Array();
x[0] = 'b';
x[1] = 'c';

И если вы хотите перечислить все свойства, которые вы делаете:

for(var i = 0; i < x.length; i++)
console.log(x[i]);// numeric index based access.

Трюки и хитрости

1. Внутреннее кэширование свойства length

Стандартная итерация массива:

for (var i = 0; i < arr.length; i++) {
    // do stuff
};

Малоизвестный факт: в приведенном выше сценарииarr.length свойство читается на каждом шаге цикла for. Как и любая функция, которую вы там вызываете:

for (var i = 0; i < getStopIndex(); i++) {
     // do stuff
};

Это снижает производительность без причины. Внутреннее кэширование на помощь:

for (var i = 0, len = arr.length; i < len; i++) {
     // enter code here
};

Вот доказательство вышесказанного.

2. Не делайt указать длину массива в конструкторе.

// doing this:
var a = new Array(100);
// is very pointless in JS. It will result in an array with 100 undefined values.

// not even this:
var a = new Array();
// is the best way.

var a = [];
// using the array literal is the fastest and easiest way to do things.

Тестовые случаи для определения массива доступныВот.

3. Избегайте использования Array.prototype.push (arr.push)

Если вы имеете дело с большими коллекциями, прямое назначение выполняется быстрее, чем использованиеArray.prototype.push(); метод.

myArray[i] = 0; быстрее чемmyArray.push(0);в соответствии с jsPerf.comконтрольные примеры.

4. Неправильно использовать массивы для ассоциативных заданий.

Единственная причина, почему это работает, потому чтоArray расширяетObject класс внутри ядра языка JS. Вы можете также использоватьDate(); или жеRegEx(); объект например. Это победилоне имеет значения.x['property'] = someValue ДОЛЖЕН всегда использовать сОбъекты.

Массивы должны иметь только числовые индексы. УВИДЕТЬЭТОТ, руководство по разработке Google JS! избежатьfor (x in arr) петли или.arr['key'] = 5;

Это можно легко сделать резервную копию, посмотритеВОТ для примера.

var x = [];
console.log(x.prototype.toString.call);

будет выводить:[object Array]

Это показывает основной языкучебный класс' образец наследования.

var x = new String();
console.log(x.prototype.toString.call);

будет выводить.[object String]

5. Получение минимума и максимума из массива.

Малоизвестный, но действительно мощный трюк:

function arrayMax(arr) {
    return Math.max.apply(Math, arr);
};

соответственно:

function arrayMin(arr) {
    return Math.min.apply(Math, arr);
};

Объекты

С объектом вы можете сделать только:

var y = {} или жеvar y = new Object();

y['first'] = 'firstValue' такой же какy.first = 'firstValue', который вы можете 'сделать с массивом. Объекты предназначены для ассоциативного доступа сString ключи.

Итерация примерно такая:

for (var property in y) {
    if (y.hasOwnProperty(property)) {
        console.log(y.property);
    };
};

Трюки и хитрости

1. Проверка, есть ли у объекта свойство.

Большинство людей используютObject.prototype.hasOwnProperty, К сожалению, это часто дает ошибочные результаты, приводящие к неожиданным ошибкам.

Вот'хороший способ сделать это:

function containsKey(obj, key) {
    return typeof obj[key] !== 'undefined';
};

2. Замена переключателя операторов.

Один из простых, но эффективных трюков JSswitch замена.

switch (someVar) {
    case 'a':
        doSomething();
        break;
    case 'b':
        doSomethingElse();
        break;
    default:
        doMagic();
        break;
};

В большинстве двигателей JS вышеупомянутое мучительно медленно. Когда вы смотрите на три возможных результата, это нене имеет значения, но что, если у вас были десятки или сотни?

Вышесказанное можно легко заменить объектом. Дон»добавить трейлинг(), это не выполнение функций, а просто сохранение ссылок на них:

var cases = {
    'a': doSomething,
    'b': doSomethingElse,
    'c': doMagic
};

Вместо:switch

var x = ???;
if (containsKey(cases, x)) {
    cases[x]();
} else {
    console.log("I don't know what to do!");
};

3. Глубокое клонирование стало проще.

function cloneObject(obj) {
   var tmp = {};
   for (var key in obj) {
       tmp[key] = fastDeepClone(obj[key];
   };
   return tmp;
}

function cloneArr(arr) {
   var tmp = [];
   for (var i = 0, len = arr.length; i < len; i++) {
     tmp[i] = fastDeepClone(arr[i]);
   }
   return tmp;
}


function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
};

function isArray(obj) {
   return obj instanceof Array;
}

function isObject(obj) {
  var type = typeof obj;
  return type === 'object' && obj !== null || type === 'function';
}

function fastDeepClone(obj) {
  if (isArray(obj)) {
    return cloneArr(obj);
  } else if (isObject(obj)) {
    return cloneObject(obj);
  } else {
    return obj;
  };
};

ВОТ это глубокая функция клона в действии.

Авто-бокс

Как динамически типизированный язык, JavaScript ограничен в терминах нативных типов объектов:

объектмассивЧислологическийДатаRegExошибка

Нуль не тип,typeof null это объект.

Какие'подвох? Существует сильное различие между примитивными и непримитивными объектами.

var s = "str";
var s2 = new String("str");

Они делают то же самое, вы можете вызвать все строковые методы наs а такжеs2, Еще:

type of s == "string"; // raw data type
type of s2  == "object" // auto-boxed to non-primitive wrapper type
s2.prototype.toString.call == "[object String]";

Вы можете услышать в JS всеobject, Тот'не совсем верно, хотя этоЭто действительно простая ошибка.

На самом деле есть 2 типа, примитивы и объекты, и когда вы звонитеs.indexOf("c"), двигатель JS будет автоматически конвертироватьs к его не примитивному типу обертки, в этом случаеobject Stringгде все методы определены на.String.prototype

Это называетсяauto-boxing,Object.prototype.valueOf(obj) Метод - это способ заставить приведение из примитива в не примитив. Это'такое же поведение, какое язык, подобный Java, вводит для многихСобственные примитивы, в частности пары:int - целое число,double - двухместный,float - плавать и т. Д.

Почему ты должен заботиться?

Просто:

function isString(obj) {
   return typeof obj === "string";
}
isString(s); // true
isString(s2); // false

Так что еслиs2 был создан сvar s2 = new String("test") вы получаете ложноотрицательный результат даже для простой проверки типа. Более сложные объекты также влекут за собой серьезные потери производительности.

Микрооптимизация, как некоторые сказали бы, но результаты действительно замечательны, даже для очень простых вещей, таких как инициализация строки. Позволять's сравните следующие два с точки зрения производительности:

var s1 = "this_is_a_test" 

а также

var s2 = new String("this_is_a_test")

Вы, вероятно, ожидаете совпадения производительности по всем направлениям, но, что удивительно, последнее утверждение используетnew String на 92% медленнее, чем первый, что доказаноВот.

функции

1. Параметры по умолчанию

|| Оператор - это самый простой способ дефолта. Почему это работает? Из-за правдивых и ложных ценностей.

Когда оценивается в логическом состоянии,undefined а такжеnull значения будут автоматически переданы.false

Простой пример (кодВОТ):

function test(x) {
   var param = x || 5;
   // do stuff with x
};

2. OO JS

Самое важное, что нужно понять, это то, что JavaScriptthis объект не является неизменным Это просто ссылка, которую можно легко изменить.

В OO JS мы полагаемся наnew ключевое слово, чтобы гарантировать неявную область видимости во всех членах класса JS. Тем не менее, вы можете легко изменить область действия с помощьюFunction.prototype.call а также .Function.prototype.apply

Еще одна очень важная вещьObject.prototype, Непримитивные значения, вложенные в прототип объекта, являются общими, а примитивные - нет.

Код с примерамиВОТ.

Простое определение класса:

function Size(width, height) {
    this.width = width;
    this.height = height;
};

Класс простого размера, с двумя членами,this.width а также .this.height

В определении класса все, что имеетthis перед ним создаст новую ссылку для каждого экземпляра Size.

Добавление методов в классы и почему "закрытие» шаблон и прочеепричудливый образец имени чистая выдумка

Это, возможно, где самые вредоносные анти-паттерны JavaScript.

Мы можем добавить метод к нашемуSize Класс двумя способами.

Size.prototype.area = function() {
   return this.width * this.height;
};

Или же:

function Size2(width, height) {
   this.width = width;
   this.height = height;
   this.area = function() {
      return this.width * this.height;
   }
}

var s = new Size(5, 10);
var s2 = new Size2(5, 10);



var s3 = new Size2(5, 10);
var s4 = new Size(5, 10);
 // Looks identical, but lets use the reference equality operator to test things:
s2.area === s3.area // false
s.area === s4.area // true

area методSize2 создается для каждого экземпляра. Это совершенно бесполезно и медленно, НАМНОГО медленнее. 89%, если быть точным. ПосмотритеВОТ.

Приведенное выше утверждение действительно для примерно 99% всех известных "причудливый образец имени, Помните одну самую важную вещь в JS, все это не что иное, как выдумка.

Можно привести веские архитектурные аргументы, в основном связанные с инкапсуляцией данных и использованием замыканий.

Такие вещи, к сожалению, абсолютно бесполезны в JavaScript, просто потеря производительностиэто того не стоит. Мы говорим о 90% и выше, этоНичего, кроме незначительного.

3. Ограничения

Так какprototype определения являются общими для всех экземпляров класса, вы выигралине сможет поместить туда объект непримитивных настроек.

Size.prototype.settings = {};

Зачем?size.settings будет одинаковым для каждого экземпляра. И что'с примитивами?

Size.prototype.x = 5; // won't be shared, because it's a primitive.
// see auto-boxing above for primitive vs non-primitive
// if you come from the Java world, it's the same as int and Integer.

Точка:

Средний парень JS напишет JS следующим образом:

var x = {
    doStuff: function(x) {
    },
    doMoreStuff: 5,
    someConstant: 10
}

Которыйотлично (хорошо = плохое качество, трудно поддерживать код), если вы понимаете, что этоSingleton объект, и эти функции должны использоваться только в глобальной области видимости без ссылкиthis внутри них.

Но потом дело доходит до совершенно ужасного кода:

var x = {
   width: 10,
   height: 5
}
var y = {
   width: 15,
   height: 10
}

Вы могли бы сойти с рук:.var x = new Size(10, 5); var y = new Size(15, 5);

Печатается дольше, вам нужно каждый раз печатать одно и то же. И снова этоОЧЕНЬ МЕДЛЕННО. ПосмотритеВОТ.

Плохие стандарты во всем

Это можно увидеть практически везде:

   function() {
      // some computation
      var x = 10 / 2;
      var y = 5;
      return {
         width: x,
         height: y
      }
    }

Опять с альтернативой:

function() {
    var x = 10 / 2;
    var y = 5;
    return new Size(10, 5);
};

Суть: ИСПОЛЬЗУЙТЕ КЛАССЫ, ГДЕ УДОБНЫ !!

Зачем? Пример 193% медленнее, ПосмотритеВОТ, Примеры здесь тривиальны, но они иллюстрируют что-то, что игнорируется в JS, OO.

Это'твердое правило не нанимать людей, которые думают, что JS нене иметь классов и получить работу от рекрутеров, о которых говорят "Объектно-ориентированный JS.

Затворы

Многие люди предпочитают их выше, потому что это дает им чувство инкапсуляции данных. Помимо резкого падения производительности на 90%, здесь »Что-то одинаково легко пропустить. Утечки памяти.

function Thing(someParam) {
   this.someFn = function() {
     return someParam;
   }
}

Вы'мы только что создали закрытие дляsomeParam, Почему это плохо? Во-первых, это заставляет вас определять методы класса как свойства экземпляра, что приводит к значительному снижению производительности.

Во-вторых, он съедает память, потому что замыкание никогда не будет разыменовано. ПосмотритеВот для доказательства. Конечно, вы получаете некоторую ложную инкапсуляцию данных, но вы используете в три раза больше памяти с падением производительности на 90%.

Или вы можете добавить@private и получить способ с именем функции подчеркивания.

Другие очень распространенные способы создания замыканий:

function bindSomething(param) {
   someDomElement.addEventListener("click", function() {
     if (param) //do something
     else // do something else
   }, false);
}

param сейчас закрытие! Как от этого избавиться? Есть разные трюки, некоторые найденыВот, Наилучший из возможных подходов, хотя и более строгий, состоит в том, чтобы вообще не использовать анонимные функции, но для этого потребуется способ определения областей для обратных вызовов событий.

Насколько мне известно, такой механизм доступен только в Google Closure.

Синглтон

Хорошо, так что мне делать для одиноких? Я неЯ не хочу хранить случайные ссылки. Вот'прекрасная идея, бессовестно украденная уGoogle Closure 's base.js

/**
 * Adds a {@code getInstance} static method that always return the same instance
 * object.
 * @param {!Function} ctor The constructor for the class to add the static
 *     method to.
 */
function addSingletonGetter(ctor) {
  ctor.getInstance = function() {
    if (ctor.instance_) {
      return ctor.instance_;
    }
    return ctor.instance_ = new ctor;
  };
};

Это'с Java-esque, но этопростой и мощный трюк. Теперь вы можете сделать:

project.some.namespace.StateManager = function() {
   this.x_ = 5;
};
project.some.namespace.prototype.getX = function() { return x; }
addSingletonGetter(project.some.namespace.StateManager);

Чем это полезно? Просто. Во всех других файлах, каждый раз, когда вам нужно ссылатьсяproject.some.namespace.StateManager, ты можешь написать:project.some.namespace.StateManager.getInstance(), Это круче, чем выглядит.

Вы можете иметь глобальное состояние с преимуществами определения класса (наследование, члены с состоянием и т. Д.) Ибез загрязнение глобального пространства имен.

Шаблон одного экземпляра

Теперь у вас может возникнуть соблазн сделать это:

function Thing() {
   this.someMethod = function() {..}
}
// and then use it like this:
Thing.someMethod();

Это еще один большой нет-нет в JavaScript. Помните, чтоthis объект гарантированно будет неизменным только тогда, когдаnew ключевое слово используется. Магия кода выше интересна.this на самом деле является глобальной областью действия, так что не имеет смысла добавлять методы к глобальному объекту. И вы уже догадались, эти вещи никогда не собираются мусором.

Ничто не говорит JavaScript, чтобы использовать что-то еще.function в теме'с собственной неу меня нет возможности. Будьте очень осторожны с тем, что вы делаете сstatic свойства. Чтобы воспроизвести цитату, которую я однажды прочитал, глобальный объект JavaScript похож на общественный туалет. Иногда у вас нет выбора, кроме как пойти туда, но постарайтесь свести к минимуму контакт с поверхностями в максимально возможной степени.

Либо придерживаться вышеуказанногоSingleton шаблон или использовать объект настроек, вложенный в пространство имен.

Сборка мусора в JavaScript

JavaScript - это язык для сборки мусора, но JavaScript GC часто довольно плохо понимается. Дело опять в скорости. Возможно, это слишком знакомо.

// This is the top of a JavaScript file.
var a = 5;
var b = 20;
var x = {};//blabla

// more code
function someFn() {..}

Это плохо, плохая производительность кода. Причина проста. JS будет собирать переменную в мусоре и освобождать кучу памяти, которую она хранит, только когда эта переменная освобождается, например. нет упоминаний об этом нигде в памяти.

Например:

function test(someArgs) {
   var someMoreStuf = // a very big complex object;
}
test();

Три вещи:

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

Зачем? Потому что они больше не принадлежатток" объем. Они созданы, использованы и уничтожены. Там тоже нет замыканий, так что вся память у тебяV используется освобождается через сборщик мусора.

По этой причине вам никогда не следует, чтобы ваши JS-файлы никогда не выглядели так, поскольку глобальная область будет просто загрязнять память.

var x = 5;
var y = {..}; //etc;

Хорошо, что теперь?

Пространства имен.

JS не делаету нас нет пространства имен, скажем так, это неЭто точно эквивалент Java, но с точки зрения администрирования кодовой базы вы получаете то, что хотите.

var myProject = {};
myProject.settings = {};
myProject.controllers = {};
myProject.controlls.MainController = function() {
    // some class definition here
}

Красивая. Одна глобальная переменная. Правильная структура проекта. На этапе сборки вы можете разделить ваш проект на файлы и получить подходящую среду разработки.

Там'Нет предела тому, чего вы можете достичь здесь.

Подсчитайте свои библиотеки

Имея удовольствие работать с бесчисленным количеством кодовых баз, последний и самый важный аргумент - очень внимательно следить за зависимостями вашего кода. Я'Мы видели, как программисты случайно добавляли jQuery в стек для простого анимационного эффекта и так далее.

Зависимость и управление пакетами - это то, что мир JavaScript не имелЭто длится долгое время, до создания таких инструментов, как Bower. Браузеры все еще несколько медленные, и даже когда онибыстро, интернет-соединения медленные.

В мире Google, например, они проходят через длины написания целых компиляторовпросто чтобы сохранить байтыи этот подход во многих отношениях является правильным менталитетом в веб-программировании. И я очень высоко ценю Google, поскольку их библиотека JS поддерживает такие приложения, как Google Maps, которые не только безумно сложны, но и работают везде.

Возможно, JavaScript имеет огромное разнообразие доступных инструментов, учитывая его популярность, доступность и, в некоторой степени, очень низкое качество, что экосистема в целом готова принять.

ЗаХакер Новости подписчики, день нене обойтись без новой библиотеки JS, и они, безусловно, полезны, но нельзя игнорировать тот факт, что многие из них повторно реализуют те же самые задачи без какого-либо твердого представления о новизне или каких-либо убийственных идеях и улучшениях.

Это'Настойчивое эмпирическое правило заключается в том, чтобы противостоять стремлению смешать все новые игрушки, прежде чем они успеют доказать свою новизну и полезность для всей экосистемы, а также провести четкое различие между веселым программированием в воскресенье и производственными развертываниями.

Если твой тег длиннее, чем этот пост, выты все делаешь неправильно.

Проверка ваших знаний JavaScript

Немного "перфекционист» тесты уровня:

http://perfectionkills.com/javascript-quiz/Спасибо Кангакс.

http://javascript-puzzlers.herokuapp.com/