Руби в JavaScript

Краткое руководство для рубистов, начинающих JS210

Переменные

  • Объявление локальной переменной: let schoolName = 'Launch School';
  • Объявление постоянной переменной: const SCHOOL_NAME = 'Launch School';
  • Необъявленная переменная с глобальной областью действия: schoolName = 'Launch School';
     (не делайте этого)
  • camelCase для локальных переменных (и функций)
  • SCREAMING_SNAKE_CASE для констант
  • Мы также можем создавать переменные с помощью оператора var с датой:
    var weather = 'Sunny';
    var — это функция (странно), а let — блочная область (нормально)
    Кое-что, о чем нужно знать, потому что let и const — недавние добавления
  • Локальные переменные имеют ожидаемую область действия блока, за исключением того, что они доступны внутри функций (эквивалент методов JS):
// Example 1
let dog = 'Banjo';
function example() { // curly braces delimit the function body
  console.log(dog);
}
example(); // Banjo
console.log(dog); // Banjo
// Example 2
function example() {
  let dog = 'Banjo';
  console.log(dog);
}
example(); // Banjo
console.log(dog); // ReferenceError: dog is not defined

Функции

  • С точки зрения Ruby, функции JS — это методы с мягкой логикой и тем, что по сути является блочной областью действия.
  • Фигурные скобки {}, окружающие тело функции, не определяют блок. Тела функций и блоки различны. Однако они настолько похожи, что тела функций обычно называют блоками.
  • Неявный возврат undefined за исключениемпри использовании стрелочной функции с одним выражением. В этом случае JS позволяет нам опустить ключевое слово return.
  • Для явного возврата требуется ключевое слово return
  • Параметры по умолчанию работают как положено
  • Объявление функции: function hello() { …
    (начинается с function)
  • Выражение именованной функции: let hello = function hello() { …
    (полезно для отладки)
  • Выражение анонимной функции: let hello = function () { …
    (обычное)
  • Стрелочная функция: сокращенный способ написания выражения функции:
    let greeting = (arg1, arg2) => { …
    Обычно используется в функциях обратного вызова: функция передается в качестве аргумента другой функции. :
// Example 1
arr.forEach((ele, idx) => console.log(ele, idx));
// Example 2
arr.forEach((ele, idx) => {
  console.log(ele, idx);
  if (ele === 1) arr2.push(ele);
})
  • Чистая функция:функция без побочных эффектов и с возвращаемым значением, определяемым только ее аргументами.
  • Параметр Rest:похож на splat в Ruby, принимает любое количество аргументов и делает их доступными в виде элементов массива:
    function dogNames(…args) { …
  • Функции — это объекты первого класса: они могут быть назначены переменной или элементу коллекции, переданы в качестве аргумента функции или возвращены функцией.

Объекты

  • Мы можем думать об объекте JS как о хеше Ruby.
  • У объектов есть пары имя/значение, называемые свойствами.
  • На свойства ссылаются и создают с помощью точечной нотации (предпочтительно) или скобочной нотации:
let obj = {num: 5, str: 'dog'};
console.log(obj.num); // 5
console.log(obj['num']); // 5
obj.wowz = 'powz';
console.log(obj); // { num: 5, str: 'dog', wowz: 'powz' }
obj.wowz = 'zowz';
console.log(obj); // { num: 5, str: 'dog', wowz: 'zowz' }
  • Имя свойства должно быть строкой (кавычки можно не ставить, как указано выше). Значение свойства может быть выражением функции, массивом, объектом, строкой, числом или любым допустимым выражением:
let obj = {
  num: 5,
  str: 'dog',
  arr: [1, 2, 3],
  obj: {hello: 'goodbye'},
  bool: true,
  add(num1, num2) { // compact method syntax
    return num1 + num2;
  },
  'multiple words': 'this works',
};
console.log(obj.add(1, 2)); // 3
// add is a 'method' because it is part of an object
// compact method syntax saves us from
// add: function add(num1, num2) {
//   return num1 + num2;
// },

Массивы

  • Массивы работают почти так же, как и в Ruby. Они имеют нулевой индекс: индексы начинаются с 0, а arr.length возвращает последний индекс + 1.
  • Массивы — это тип объекта: индексы — это имена, а элементы — значения.
  • arr[-1] не ссылается на последний индекс
  • Мы можем создавать разные пары n/v в массиве, но не в литерале:
let arr = [1, 2, 3];
arr[3] = 4;
arr[-11] = 'wow!';
arr['hello'] = 'bye';
console.log(arr[3]); // 4
console.log(arr['hello']); // bye
console.log(arr[-11]); // wow!
console.log(arr); // [ 1, 2, 3, 4, '-11': 'wow!', hello: 'bye' ]
let arr2 = [1, 2, 3, 4, '-11': 'wow!', hello: 'bye'];
// SyntaxError: Unexpected token ':'
// Note the type coercion
  • Все пары n/v являются свойствами. Неотрицательные целые имена по умолчанию являются обычными свойствами индекса. Все остальные свойства не учитываются при определении длины массива. Они также не обрабатываются другими методами массива:
let arr = [1, 2, 3];
arr[3] = 4; // new element increases length
arr[-11] = 'wow!'; // does not increase length
arr['hello'] = 'bye'; // does not increase length
console.log(arr.length); // 4
console.log(arr); // [ 1, 2, 3, 4, '-11': 'wow!', hello: 'bye' ]
arr.forEach(ele => console.log(ele));
// 1
// 2
// 3
// 4
  • Свойства массива обозначаются точечной нотацией (предпочтительнее) или скобочными скобками: console.log(arr.hello); // bye или console.log(arr['hello']); // bye.
  • Просмотреть все названия свойств с console.log(Object.keys(arr));
  • В разреженном массиве есть пробелы. Промежутки можно создать, увеличив свойство length:
console.log(arr); // [ 1, 2, 3, 4, '-11': 'wow!', hello: 'bye' ]
arr.length = 20;
console.log(arr); 
// [ 1, 2, 3, 4, <16 empty items>, '-11': 'wow!', hello: 'bye' ]

Заявление о переключении

  • JS-эквивалент оператора case в Ruby
  • Используйте break в каждой ветке. Break предотвращает «выпадение» выполнения из истинной ветки:
let dog = 'Banjo';
// Example 1
switch (dog.charAt(1)) {
  case 'a':
    console.log('a is at 1');
    break;
  case 'n':
    console.log('n is at 1');
    break;
  default:
    console.log('neither');
    break;
} // => a is at 1
// Example 2
switch (dog.charAt(2)) {
  case 'a':
    console.log('a is at 2');
    break;
  case 'n':
    console.log('n is at 2');
  default:
    console.log('neither');
    break;
}
// n is at 2
// neither

Разнообразный

  • Нет синтаксического сахара для ()
  • Заканчивайте операторы с помощью ;, кроме объявленийfunction и class и операторов if, for, while.
  • Строки неизменяемы
  • === вместо == (== выполняет приведение типов)
  • console.log(arg) вместо puts arg
  • Фальшивые: 0, false, ‘’, undefined, null, NaN
  • if синтаксис оператора:
let type = 'Dog';
if (type === 'Dog') {
  console.log('Banjo');
} else if (type === 'Cat') {
  console.log('Scruffers');
} else {
  console.log('Crumps');
}
  • if (var) console.log(var2); or var && console.log(var2);
  • `hello ${name}` вместо "hello #{name}"
  • {} ограничивает блок, за исключением объявления функции или окружения литерала объекта
  • .typeof вместо .class
  • forEach вместо each (но нельзя преждевременно прерывать итерацию)
  • CoderPad JS по умолчанию использует строгий режим