Справочник по собеседованию инженера-программиста, часть 3: JavaScript ES6

Рынок труда для инженеров-программистов очень конкурентен, и получение работы может зависеть от того, насколько хорошо вы пройдёте собеседование. В этой серии статей Справочник по собеседованию для инженера-программиста мы предоставим некоторые полезные знания, которые помогут вам подготовиться к следующему собеседованию по разработке программного обеспечения. В сегодняшней статье мы рассмотрим JavaScript ES6. Давай начнем!

Пусть/Конст

В ES6, также известном как ECMAScript 2015, let и const заменяют var для объявления переменных. позволитьблокировать область видимости, пока const остается неизменным.

вар

function varTest() {
    var a = 30;
    if (true) {
        var a = 50;
        console.log(a);
    }
    console.log(a);
}
varTest(); // 50 50

for (var i = 0; i < 5; i++) {
    console.log(i); // 1, 2, 3, 4
}
console.log(i); // 5

позволить

function testLet() {
    let a = 30;
    if (true) {
        let a = 50;
        console.log(a);
    }
    console.log(a);
}
testLet(); // 50 30

for (let i = 0; i < 5; i++) {
    console.log(i); // 1, 2, 3, 4
}
console.log(i); // undefined

константа

const только запрещает присвоение нового значения константе, но не предотвращает изменение свойств объекта.

const pi = 3.142;
pi = 1; // TypeError: Assignment to constant variable.

const person = {
    name: "Bob",
};
person.name = "Andy";
console.log(person.name); // Andy. Doesn't prevent mutation.

Классы

class Person {
    // Called during instantiation.
    constructor(fullName, emailAddress, pass) {
        (this.fullName = fullName), (this.emailAddress = emailAddress), (this.pass = pass);
    }

    // Callable without instantiation.
    static countPerson() {
        console.log("There are 100 people");
    }

    // Regular method.
    signUp() {
        console.log(this.fullName + " signed up.");
    }
}

// Instantiation.
let john = new Person("John Doe", "[email protected]", "5678");
john.signUp(); // John Doe signed up.

Person.countPerson(); // There are 100 people.

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

class Subscriber extends Person {
    constructor(fullName, emailAddress, pass, subscription) {
        super(fullName, emailAddress, pass);
        this.subscription = subscription;
    }

    getSubscription() {
        console.log(this.fullName + " uses the " + this.subscription + " subscription.");
    }
}

let jane = new Subscriber("Jane Doe", "[email protected]", "5678", "premium");
jane.getSubscription(); // Jane Doe uses the premium subscription.
jane.signUp(); // Jane Doe signed up.

Литералы шаблонов

Обратные кавычки позволяют использовать многострочные строки. Кроме того, мы можем внедрять переменные и функции с помощью ${ var }.

До

var name = "Bob";
var template = "<h1>Hello, " + name + "</h1>" + "<p>This is a simple template.</p>";

После

let name = "Bob";
let template = `<h1>Hello, ${name}</h1>
<p>This is a simple template.</p>`; // With backticks

Струны

let string = "Hello, I love Javascript.";

string.startsWith("Hello"); // true
string.endsWith("Javascript"); // false, since there is no dot.
string.includes("love"); // true

Числа

Number.isNaN("cat"); // true
Number.isInteger(1); // true

Набор

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

var array = [1, 2, 3, 3];

var set = new Set(array); // {1, 2, 3}

// Set methods
set.size; // 3
set.add("cat"); // [1, 2, 3, "cat"]
set.delete(2); // [1, 3, "cat"]

// Convert to array
var array = Array.from(set); // [1, 2, 3]
var array2 = [...set]; // [1, 2, 3]

Стрелочные функции

function hello(name) {
    return "Hello" + name;
}
console.log(hello("Bob")); // Hello Bob

// As long as no curly braces are used after the fat arrow, the return is implicit.
var hello = (name) => "Hello " + name;
console.log(hello("Bob")); // Hello Bob

Стрелочные функции наследуют this вместо перепривязки. Это обеспечивает более лаконичный синтаксис, а также лексическую привязку this, устраняя необходимость в that или self. В стрелочных функциях и arguments, и this относятся к контексту внешней функции.

Ранее каждая вновь определенная функция имела собственное значение this. Однако стрелочные функции не имеют собственных this; вместо этого они используют значение this окружающей среды.

const obj = {
    data: "Bob",
    getData() {
        console.log(this.data);
    },
    getData2: () => {
        console.log(this.data);
    },
};

obj.getData(); // Bob
obj.getData2(); // undefined

Без thisих лучше подходят для неметодных функций. Использование их в качестве методов приводит к неопределенности.

// Old
function Person() {
    var that = this;
    that.age = 0;

    setInterval(function growUp() {
        that.age++; // this.age would refer to growUp, instead of Person.
    }, 1000);
}

// New
function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++; // this refers to the Person object.
    }, 1000);
}

Для цикла

let items = [1, 2, 3];
// Old
for (var i = 0; i < items.length; i++) {
    console.log(array[i]);
}

// New
for (let item of items) {
    console.log(item);
}

Генераторы

Генераторы — это специальные функции, которые можно приостанавливать и возобновлять несколько раз, возвращая значение каждый раз, когда они приостанавливаются. Они допускают форму ленивых вычислений, предоставляя значения одно за другим, а не все сразу. Они обозначаются знаком «*» перед ключевым словом «функция» и используют ключевое слово «доходность» для приостановки и предоставления значения.

function* generateThreeNumbers() {
    yield 1;
    yield 2;
    yield 3;
}

var numberIterator = generateThreeNumbers();

numberIterator.next(); // { value: 1, done: false }
numberIterator.next(); // { value: 2, done: false }
numberIterator.next(); // { value: 3, done: false }
numberIterator.next(); // { value: undefined, done: true }

Разрушение

Деструктуризация JavaScript — это функция, позволяющая извлекать значения из массивов или объектов в отдельные переменные. Он предоставляет сокращенный синтаксис для создания переменных из данных, хранящихся в объектах или массивах, и позволяет одновременно извлекать несколько значений, упрощая доступ к нужным значениям.

const address = {
    street: "",
    city: "",
    country: "",
};

// old
const street = address.street;
const city = address.city;
const country = address.country;

// new
const { street, city, country: ctry } = address; // We can also rename the variables

// array
var foo = [1, 2, 3, 4];

var [one, two, three] = foo;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

// Default values. They work only if a property is undefined. null, false and 0 are all still values!
var obj = { a: 1 };

var { a, b = "something" } = obj;
console.log(a); // 1
console.log(b); // something

Объект против деструктурирования массива

Деструктуризация объекта требует больше написания, чтобы захватить переменную и переименовать ее.

// object destructuring. lots of writing!
const users = { admin: "Bob", user: "Andy" };

// grab the admin and user but rename them to SuperAdmin and SuperUser
const { admin: SuperAdmin, user: SuperUser } = users;

При реструктуризации массива мы просто называем переменные по мере их извлечения из массива. Первая переменная — это первый элемент массива.

// array destructuring
const users = ["Bob", "Andy"];

// grab in order and rename at the same time
const [SuperAdmin, SuperUser] = users;

Распространение

Используется для копирования или удаления свойств из одного объекта в другой.

Обновить свойство объекта

let obj = {
    foo: "foo",
    bar: "bar",
    baz: "baz",
};

let newObj = { ...obj, baz: "NEW VALUE" };

console.log(obj); // { foo: "foo", bar: "bar", baz: "baz" }
console.log(newObj); // { foo: "foo", bar: "bar", baz: "NEW VALUE" }

Свойства добавляются по порядку, поэтому, чтобы переопределить существующие свойства, вам нужно поместить их в конец, а не в начало.

let obj1 = {
    foo: "foo",
    bar: "bar",
    baz: "baz",
};

let obj2 = {
    bar: "bar2",
    baz: "baz2",
    new: "new",
};

let newObj = { ...obj1, ...obj2 };

console.log(newObj); // { foo: "foo", bar: "bar2", baz: "baz2", new: "new" }

Копировать

// Without spread
const meal = {
    id: 1,
    description: "Breakfast",
};

const updatedMeal = {
    id: meal.id,
    description: meal.description,
    calories: 600,
};

// With spread
const meal = {
    id: 1,
    description: "Breakfast",
};

const updatedMeal = {
    ...meal, // Injects the id and description properties from meal.
    description: "Brunch", // This has precedence over the spread operator.
    calories: 600,
};

Удалить

const meal = {
    id: 1,
    description: "Breakfast",
    calories: 600
}

const = { id, ...mealWithoutId} = meal; // Destructuring.
console.log(mealWithoutId); // Object without the id property.

Множество

const first = [1, 2, 3];
const second = [4, 5, 6];

// old
const combined = first.concat(second);

// new
const combined = [...first, "a", ...second, "b"]; // Easy to add other items.

// Another example
const meals = [
    { id: 1, description: "Breakfast", calories: 420 },
    { id: 2, description: "Lunch", calories: 520 },
];

const meal = {
    id: 3,
    description: "Snack",
    calories: 180,
};

const updatedMeals = [...meals, meal]; // Returns a new array with the addition.

Нулевое слияние (??)

Нулевой оператор объединения ?? является резервным значением по умолчанию для значений falsy, но только для null и undefined.

undefined ?? "not found"; // not found
null ?? "not found"; // not found

NaN ?? "not found"; // NaN
0 ?? "not found"; // 0
false ?? "not found"; // false
"" ?? "not found"; // ""

Необязательная цепочка (?.)

Необязательная цепочка позволяет получить доступ к вложенным свойствам без проверки существования каждого объекта в цепочке.

const country = {
    obj: {
        name: null,
    },
};

// OLD
const region = (country.obj && country.obj.name) || "France";

// NEW
const region = country?.obj?.name || "France";

Заключение

Таким образом, ES6 или ECMAScript 2015 представил новые функции и обновления для JavaScript, такие как новые способы объявления переменных с помощью let и const, замену var и многое другое. В следующей части JavaScript мы подробно познакомимся с объектной моделью документа (DOM). Следите за обновлениями!

Заключительные слова

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

Чтобы перейти на новый уровень, подумайте о том, чтобы стать участником Medium всего за 5 долларов США в месяц. С моей реферальной ссылкой вы получите доступ к огромному количеству знаний от тысяч писателей и присоединитесь к сообществу лидеров мнений. Улучшите свои навыки чтения и письма уже сегодня.