Заметки по JS (ECMAScript 5)

Числовые методы

var n = 13.687;
// Привести к числу с плавующей точкой, с 2 знаками после запятой (округляет)
n.toFixed(2); // 13.69

Строковые методы

var n = 13.687;

var string = "String"
// Вывести символ по номеру индекса
string.chartAt(0); // "S"
// Количество символов
string.length(0); // 5 (подсчет с 0)
// Получить подстроку
string.substring(3); // "ing"
string.substring(3,5); // "in"

string = "Some string is very good"
// Получить подстроку с конца
string.slice(-5); // "good"

// Получить подстроку, 1п - индекс, 2п - кол-во символов
string.substr(5,7); // "string"

// Поиск индекса вхождения подстроки (поиск с начала строки)
string.indexOf("very"); // 15
// Поиск индекса вхождения подстроки (поиск с конца строки)
string.lastIndexOf("very"); // 15
// Замена подстроки
string.replace("is","is not"); // "Some string is not very good"
// Разбить строку на массив по символу (в данном случае пробел)
string.split(" "); // ["Some", "string", "is", "very", "good"]
// Привести текст к верхнему регистру
string.toUpperCase(); // SOME STRING IS VERY GOOD
// Привести текст к нижнему регистру
string.toLowerCase(); // some string is very good

Логические значения

// Присвоет к а значение 5, если isTrue содержит true;
var a = 0;
isTrue = true;
isTrue && (a == 5);
// Если someString будет пустой, то оно будет со значение "default string"
var someString = "some string";
var newString = someString || "default string";
// Тернарный оператор
var x = 5,
text = x > 5 ? "x больше 5" : x < 5 "x меньше 5" : "x равен 5"

Преобразование типов

Number("111");
String(123);
Boolean(1); // true
// Упращенное преобразование в bool
!!5 // true
!!0 // false
// Упращенное преобразование в string
123 + "" // "123"
// Упращенное преобразование в number
+ "123" // 123
+ "" // 0

var number = 12;
number.toString(); // "12"
// В качестве параметра можно указать систему исчисления (СИ)
var number = 5;
number.toString(2); // "101"

parseInt("75 pt"); // 75
parseInt('12.33 px') // 12
// Второй параметр - СИ
parseInt("5 px", 2); // 101

parseFloat("12.23 px"); // 12.23

Циклы

// Класчический цикл
for(var i = 0; i < 10; i++){
    console.log(i);
}
// while
var i = 10;
while (i < 10){
    console.log(i);
    i++;
}
while (i--){
    console.log(i);
}
// do-while
do console.log(i++); while (i < 10);

Функции

 // Function Declaration
function goodStr(text){
    return text + ' is good';
}
console.log(goodStr("Vasya")); // Vasya is good

// Function Expression
var isGood = function(text){
    return text + " is good";
}; 
console.log(isGood('Vasya')); // Vasya is good

// Объявление с параметром
var isGood = function(text){
    return text + " is good";
}('Vasya'); 
console.log(isGood); // Vasya is good

// Получение параметров
var myFunc = function(text){
    console.log(arguments); // ["text", 11, 12, 13]
    console.log(arguments[1]); // 11
    return text;
}; 
myFunc('text',11,12,13);

// Анонимные функции (без имени и сразу вызываются)
function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Вы согласны?",
  function() { alert("Вы согласились."); },
  function() { alert("Вы отменили выполнение."); }
);


// Функция с callback
var func = function(callback){
 var text = "Vasya";
 callback(text);
}

func(function(x){
	console.log(x + " is good");
}); // Vasya is good

Пример замыкание в Js

func = (function() {
   var counter = 0;

   return function () {
       return counter ++;
   }
})();

var counter = func;

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

Пример обработки ошибок

var calc  = function (n) {
    if(n > 10) throw new Error("n не должно быть больше 10");
    return n;
};

try {
    calc(20);
} catch (e) {
    console.log("Невозможно запустить скрипт: " + e.message);
}
// Не возможно запустить скрипт: n не должно быть больше 10

Работа с объектом

// Объектный литерал
var persone = {
    name: "Vasya",
    age: 20,
    gender: "male",
    sayHello: function () {
        return "Hello";
    }
};

// Изменить свойство
persone.age = 25;
// добавить свойство
persone.work = "Web-developer";

// Вывод свойств
console.log(persone.name);
console.log(persone["name"]);
console.log(persone.sayHello());

// Удаление свойства
delete persone.gender;

// Проверка существования свойства
console.log("gender" in persone);

Объекты: this, call, apply, bind

var person1 = {
    name: "Vasya",
    sayHello: function () {
        return "Hello " + this.name;
    }
};

console.log(person1.sayHello()); // Hello Vasya

// Ещё пример

var sayHello2 = function () {
    return "Hello " + this.name;
};

var person2 = {
    name: "Viktor",
    sayHello2: sayHello2,
};

var person3 = {
    name: "Petr",
    sayHello2: sayHello2,
};

console.log(person2.sayHello2()); // Hello Viktor
console.log(person3.sayHello2()); // Hello Petr

// Пример с call
console.log(person3.sayHello2.call(person2)); // Hello Viktor

// С аргументами
var sayHello3 = function (word) {
    return word + " " + this.name;
};

var person4 = {
    name: "Pavel",
    sayHello3: sayHello3,
};

console.log(person4.sayHello3("Hi")); // Hi Pavel
console.log(person4.sayHello3.call(person2, "Hello")); // Hello Viktor
// Отличие от call, только тем, что параметры в массиве
console.log(person4.sayHello3.apply(person2, ["Boonjour"])); // Boonjour Viktor

// Не вызывает функцию, а связывает её с объектом и не меняет исходную функцию
var bound = sayHello3.bind(person4);
console.log(bound("Hey!")); // Hey! Pavel

Объекты: аксессоры и атрибуты свойств

// Аксессоры (get и set)

var person = {
    _name: "Vasya",
    _age: 20,
    get age(){
        return this._age;
    },
    set age(value){
        this._age = value < 0 ? 0 : value > 100 ? 100 : value;
    }
};

person.age = 125;
console.log(person.age); // 100

// Атрибуты свойств
console.log(Object.getOwnPropertyDescriptor(person,"_name"));
console.log(Object.getOwnPropertyDescriptor(person,"age"));

// Определение свойств / переопределение
Object.defineProperty(person, "gender",{
    value: "male",
    writable: false, // нерадактируемое
    enumerable: false, // не будет выводиться в цикле for, если false
    configurable: false // разрешить редактирование других атрибутов
});

console.log(person.gender); // male
person.gender = "female";
console.log(person.gender); // male
console.log('');

// Перебор свойств объекта
for(property in person){
    console.log(property);
}
// _name _age age

// Вывод свойств объекта
console.log(Object.keys(person)); //["_name", "_age", "age"]

// Массовое определение свойств / переопределение
var a = {};
Object.defineProperties(a,{
    x:{
        value: 2,
        writable: false
    },
    y:{
        value: 3,
        writable: false,
    },
    r: {
        get: function () {
            return this.x * this.y
        }
    }
});
console.log(a); // {x: 2, y: 3}
console.log(a.r); // 6

// Запретить добавлять новые свойства для объектов
Object.preventExtensions(obj);
// Запрет удалять, добавлять, редактировать
Object.seal(obj); // устанавливает configurable для всех свойств false
// Только для чтения
Object.freeze(obj);

Объекты: прототипы и наследование

// Прототип
var Person = {
    constructor: function (name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        return this;
    },
    hello: function () {
        console.log("Hello, my name is " + this.name);
    }
};

var person1, person2, person3;

person1 = Object.create(Person).constructor("Vasya", 25, "male");
person2 = Object.create(Person).constructor("Petr", 19, "male");
person3 = Object.create(Person).constructor("Ivan", 34, "male");

console.log(person1.name,person2.name, person3.name); // Vasya Petr Ivan

// Проверка объекта на прототип
console.log(Person.isPrototypeOf(person1)); // true

// Наследование

var Webdeveloper = Object.create(Person);
Webdeveloper.constructor = function (name, age, gender, skills) {
    // Вызов конструктора Person
    Person.constructor.apply(this, arguments);
    this.skills = skills || [];
    return this;
};
// добавление метода
Webdeveloper.develop = function () {
    console.log("He is working");
};

var developer = Object.create(Webdeveloper).constructor("Jhon", 26, "male", ["php","js","sql"]);
console.log(developer.skills); // ["php", "js", "sql"]
developer.develop(); // He is working