tags: dev, javascript, jsguide

Краткий обзор JavaScript

Этот пост дает краткий обзор JavaScript, но объясняет все основные функции.

1. Предварительные сведения

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

Комментарии:

    // a single-line comment (at the end of a line)
    /*
    A multi-line comment (anywhere)
    */

Различные высказывания:

    console.log("hello"); // print something
    var myvar = 7; // declare a variable

2. Ценности

В JavaScript вы работаете со следующими значениями:

• Booleans: верно или неверно
• Числа: 1, 1.0 (то же самое число, нет различий между целыми числами и числами с плавающей запятой)
• Строки: «abc», «abc»
• Функции:

      function twice(x) {
          return 2 * x;
      }
      console.log(twice(4)); // 8
  

• Объекты: объекты хранят данные в свойствах. Каждое свойство имеет имя и значение.

      var obj = {
          propName1: 123,
          propName2: "abc"
      }
      obj.propName1 = 456;
      obj["propName1"] = 456; // same as previous statement
  

  Не путайте объекты JavaScript с простыми картами (словарями)! Их можно использовать как карты от строк до значений, но они также являются реальными объектами. Объектные литералы являются одной из выдающихся функций JavaScripts: они позволяют вам непосредственно создавать объекты — без классов. Это истинная объектная ориентация: вы можете начать с конкретных объектов и, при необходимости, вводить абстракции позже. Абстракция для фабрики объектов — это класс в большинстве основных языков, в JavaScript это функция конструктора (см. Ниже).

• Массивы:

      var arr = [true, "abc", 123];
      console.log(arr[1]); // abc
      console.log(arr.length); // 3
  

• не определено (см. ниже)
• ноль (см. ниже)

Примечание. Функции и массивы также являются объектами. Например, они могут иметь свойства:

    function foo() {}
    foo.bar = 123;

Примитивы против объектов

Логические значения, числа и строки являются
примитивными типами (если undefined и null считаются имеющими свои собственные типы, то эти типы также являются примитивными). Вы проверяете примитивные типы с помощью typeof:

    > typeof 123
    'number'
    > typeof true
    'boolean'
    > typeof {}
    'object'

Все остальные типы являются
типами объектов . Вы проверяете, является ли значение экземпляром данного типа с помощью instanceof:

    > 123 instanceof Object
    false
    > {} instanceof Object
    true

Обратите внимание, что, кроме typeof и instanceof, разница между примитивами и объектами практически незаметна в JavaScript.

Не имеющий значения

JavaScript присваивает неопределенные переменные, которые еще не имеют значения:

    > var x;
    > typeof x === "undefined"
    true
    > typeof undeclaredVariable === "undefined"
    true

Программисты должны предпочесть нуль для этой цели:

    function someFunction(x) {
        // test for null:
        if (x === null) {
            // ...
        }
    }
    someFunction(null);

Поскольку операторы if определяют undefined и null как false, вы можете проверить любое из значений следующим образом:

    function hasAValue(x) {
        if (x) {
            // x is neither undefined nor null
            return "YES";
        } else {
            return "NO";
        }
    }

Осторожно: все следующие значения интерпретируются как ложные. Если вы проверяете значение с помощью hasAValue (), то, например, 0 не считается значением.

• не определено
• ноль
• ложный
• 0
• «»

Все остальные значения интерпретируются как истина:

    > hasAValue(undefined)
    'NO'
    > hasAValue(null)
    'NO'
    > hasAValue(0)
    'NO'
    > hasAValue("")
    'NO'
    > hasAValue({})
    'YES'
    > hasAValue([])
    'YES'

3. Операторы

Операторы сравнения:

    myvar === "abc"
    myvar !== "def"
    myvar >= 0
    myvar < 0

Булевы операторы:

    0 <= a && a < arr.length // and
    a === "foo" || a === "bar"

4. Условия

    if (myvar === 3) {
        // then
    } else {
        // else
    }
    
    switch (fruit) {
        case "banana":
            // ...
            break;
        case "apple":
            // ...
            break;
        default:
            // ...
    }

5. Петли

    for (var i=0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    
    // Same as above:
    var i = 0;
    while (i < arr.length) {
        console.log(arr[i]);
        i++;
    }
    
    do {
        // ...
    } while(condition);

Во всех циклах:

• перерыв выходит из цикла.
• продолжить начинается новая итерация цикла.

6. Функции и объявления переменных

Переменная всегда существует в полной функции, даже если она объявлена ​​внутри блока: JavaScript выполняет
подъем — любое объявление var всегда перемещается в начало функции. Ниже приведен код, в котором выполняется подъем (внутренне).

    function foo(x) {
        x++;
        if (x > 100) {
            var tmp = x - 100;
        }
    }

Из-за внутреннего подъема приведенный выше код эквивалентен

    function foo(x) {
        var tmp;
        x++;
        if (x > 100) {
            tmp = x - 100;
        }
    }

7. Массив методов

Массивы имеют много методов. Особенно
итерационные методы очень полезны, потому что вы можете избежать цикла for.

    [3, 4, 5].forEach(function (elem) {
        console.log(elem);
    });

8. Простые объекты

Ниже приведен простой объект.

    var jane = {
        name: "Jane",
        
        // a method:
        sayHello: function () {
            return this.name + " says 'hello'"
        }
    };
    console.log(jane.sayHello()); // Jane says 'hello'

Метод является свойством, значение которого является функцией. Например, sayHello () в коде выше.

    function beep(callback) {
        console.log("beep");
        callback();
    }
    
    var counter = {
        count: 0,
        beepAndInc: function () {
            var that = this;
            beep(function () {
                // the function shadows counter’s "this"
                // => must use "that"
                that.count++;
            });
        }
    }

    var jane2 = {
        name: "Jane",
        
        logHello: function (friends) {
            friends.forEach(function (friend) {
                console.log(this.name + " says hello to " + friend)
            }, this);
        }
    }

    // The constructor sets up an instance
    function Person(name) {
        this.name = name;
    }
    // The prototype property of the constructor holds an object whose
    // properties are shared between all instances (usually methods)
    Person.prototype.sayHello = function () {
        return this.name + " says 'hello'"
    };
    var jane = new Person("Jane");