Подход Javascript (ES7) от ruby-разработчика

В этой статье рассматриваются новые возможности ES7 и основы javascript с точки зрения разработчика ruby. Я не специалист по JS, поэтому буду использовать аналогии для упрощения понятий или сравню их с рубином для понимания.

Основы JavaScript

Классы

Мы также можем использовать классы в JS:

class Person {
  name = 'name';
  method_one = () => {};  
}
const personA = new Person()
personA.method_one()
personaA.name

Классы также поддерживают наследование, и вы можете реализовать метод конструктора:

class person extends Human {
  constructor(){
    super();
    this.name = 'Max';
  } 
}

Примитивные типы и ссылки

Объекты и массивы используют ссылку, а значения примитивов — нет. Это именно то, что происходит в рубине.

const num = 1
const num2 = num // This is a real copy of num
const person = {
  name: 'P'
};
const person2 = person // This is a reference in memory to the person object

Поведение метода dup в ruby ​​можно реализовать с помощью оператора «…». У вас есть раздел об этом операторе ниже.

Метод map также существует в JS

«карта» работает точно так же, как в ruby

const numbers = [1, 2, 3];
const numbers_2 = numbers.map((num) => {
  return num * 2
});
// The output will be this array: [2, 4, 6]

Javascript с ES7

Let и const

Введение let и const меняет область действия переменных в сценах.

Подводя итог, старый «var» — это «let», а const определяет постоянные значения, которые являются неизменяемыми.

Функции и функции со стрелками

// function
function myFnc(args){}
// arrow function
const myFnc = (args) => {}

Новый способ решает проблемы с использованием «этого» из-за обеспечения контекста.

// For only one arg you can skip the parenthesis
// if it's going to return directly you can remove the brackets and // the return statement
const myFnc = arg => arg + 1

Свойства классов

Что касается свойств, то между ES6 и ES7 есть некоторые различия.

// ES6
constructor(){
  this.prop = 'a'
}
// ES7
prop = 'a'
// ES7 behind the scenes will use the constructor, but you don't need to call it explicitiy

Оператор (…)

Оператор «…» разделяет элементы ИЛИ свойства объекта, а также может объединять аргументы.

// with arrays
const newArray = [...oldArray, 1, 2, 3]
// with classes
const newPerson = {
  ...person,
  age: 32
}

Разрушение

Легко извлекайте элементы массива или свойства объектов и сохраняйте их в переменных.

const elements = [1, 2, 3];
[num1, , num3] = elements;
console.log(num1, num3)

Экспорт по умолчанию и именованный экспорт

Когда вы хотите импортировать в другой файл какой-то фрагмент кода, у вас есть зарезервированное слово «по умолчанию».

Когда вы определяете «экспорт по умолчанию», вы получите это при импорте по умолчанию.

// car.js
const car = {}
export default car
// app.js
import car from './car.js'
import vehicle from './car.js'
// car or vehicle or whatever. It doesn't matter always refers to 
// the car constant in car.js

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

// utils.js
export const version = 1;
// main.js
import { version } from './utils.js'