[JS Pocket Book] Главы 1 и 2: Введение и основы JS

JavaScript ECMAScript 6

Добавить Автора Переводчик: Front-end Xiaozhi Источник: гитхаб

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Глава 1: Введение в JS

что такое джаваскрипт

JS — это язык сценариев для Интернета. JS родился в1995Год, созданный **Бренданом Эйхом** для добавления интерактивности веб-страницам. В то время Интернет был в зачаточном состоянии, и большинство причудливых веб-страниц, которые мы видим сегодня, были тогда просто мечтой.

По настоянию руководителя проекта,BrendanТолько10дней на создание динамичного, гибкого языка, работающего в браузере. Он написал JavaScript, несколько странный язык программирования, который ссылается на Java, C и Scheme. У JS всегда была плохая репутация, потому что с самого начала в нем было много странностей. Но тем не менее он заслужил свое место в Зале славы и сохранился до наших дней.

Теперь JS используется для создания всего приложения под названиемSPA (одностраничное приложение). По мере роста использования экосистема JS также пережила кембрийский взрыв. Большинство веб-инструментов и библиотек, которые мы используем сегодня для разработки JS, многие из них написаны на JS. JS также используется во фронтенде. использоватьNode.jsМы можем создавать серверные и IoT-приложения, промышленное оборудование и многое другое. Но самое главное, одностраничные приложения — одно из наиболее заметных применений JS.

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

Зачем изучать JavaScript

Изучение JS сегодня не предполагает поверхностного понимания переменных и функций: их гораздо больше. Разработчики JS знают замыкания,this,new, система прототипирования и обновленные функции. JS с каждым годом становится все популярнее, а его функции постепенно совершенствуются. Почти каждая работа фронтенд-разработчика теперь требует знания JS. Менеджеры по найму не ищут кого-то, кто может использовать JQ (и, говоря о jQuery, похоже, что он умирает).

В большинстве случаев вам также необходимо понимать и изучать TypeScript, JS с упором на типы. Front-end разработчики должны понимать особенности JS и уметь писать идиоматический, хорошо структурированный код JS. JS быстро распространяется, и даже если вам не нравится этот язык, игнорирование его на данном этапе может плохо сказаться на вашей карьере.

Глава 2: Основы JS

В настоящее время JS имеет 7 основных типов:

  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Object
  • Symbol(ES6)

КромеObjectПомимо сложных типов данных, остальные 6 являются базовыми типами данных JS. У каждого типа JS есть соответствующее представление, которое можно использовать в нашем коде, например строки:

var string = "Hello John";

количество:

var age = 33;

Кстати говоря, в JS также есть арифметические операции:

оператор Название операции
+ добавление
++ автоматическое приращение
* умножение
** показатель
- уменьшать
-- Уменьшение
/ Удалить
% Удалить

В JS вы можете использоватьvarКлючевое значение, хранящееся в переменной, который является наиболее совместимым способом объявления переменной:

var greet = "Hello";
var year = 89;
var not = false;

Здесь упоминается совместимость, потому что в ES6 у нас есть два варианта:letа такжеconst. Старые браузеры могут не поддерживать эти новые ключевые слова и могут вызывать ошибки, если не используются «транспозиторы». В новых браузерах рекомендуется, чтобы обаletа такжеconst. Есть два основных преимущества:

  • letа такжеconstимеет собственную область действия блока
  • constнельзя ни переназначить, ни повторно объявить

область действия блокаозначает использоватьletилиconstпеременные, объявленные с охватывающим или внешним块Одни и те же имена переменных, объявленные в, не перекрываются. Например:

let name = "前端小智";

{
  let name = "王大冶";
  console.log(name); // "王大冶"
}

console.log(name); // "前端小智"

здесьnameПохоже на дубликат, но на самом деле это две разные переменные в своей области.constимеет такое же поведение:

const name = "前端小智";

{
  const name = "王大冶";
  console.log(name); // "王大冶"
}

console.log(name); // "前端小智"

а такжеvarповедение такое же, какletа такжеconstНе то же самое.

var name = "前端小智";

{
  var name = "王大冶";
  console.log(name); // "王大冶"
}

console.log(name); // "王大冶"

Как говорит передняя часть,constНельзя переназначить или повторно объявить в той же области. Если вы попытаетесь повторно объявитьconst, получите"SyntaxError: Identifier has already been declared". Если вы переназначите значение тому жеconst, получите"TypeError: Assignment to constant variable"ошибка.

const name = "前端小智";
const name = "王大冶";

// SyntaxError: Identifier 'name' has already been declared

Следующий код также выдает ошибку:

const name = "前端小智";
name = "王大冶";

// TypeError: Assignment to constant variable.

Однако обратите внимание, сказал здесь“cons 不能重新分配，也不能重新声明”, не значитconstявляется неизменным.

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

const person = {
  name: "前端小智",
  age: 21
};

person.name = "王大冶";

console.log(person);

// {name: "王大冶", age: 21}

constЧто значит неизменяемый в объекте? Ниже представлен массив:

const list = [1, 1, 3, 2, 5];

list.shift();

console.log(list); // [ 1, 3, 2, 5 ]

такой же,не неизменный. Когда кто-то говорит, что «const неизменяем», покажите ему эти примеры. Теперь вернемся к основам. В дополнение к независимым переменным, массивы также могут быть объявлены буквально:

var array = ["Hello", 89, false, true];

от0Начальный индекс может обращаться к элементам массива:

var array = ["Hello", 89, false, true];
var first = array[0]; // "Hello"

Почти все объекты JS имеют некоторую прикрепленную функцию, называемуюметод. Чтобы назвать два примера, массивы имеют много способов работы с самими собой.

var array = ["Hello", 89, false, true];

array.push(99);
array.shift();

console.log(array); // [ 89, false, true, 99 ];

То же верно и для строк:

var string = "John";
console.log(string.toUpperCase()); // JOHN

Вы увидите, откуда берутся эти методы, в главе 5, но вот подсказка: ониArray.prototype 和 String.prototypeопределено выше. В дополнение к методам есть некоторые свойства, полезные для извлечения информации о длине строк:

var string = "John";
console.log(string.length); // 4

или длина массива:

var array = ["Hello", 89, false, true];

array.push(99);
array.shift();

console.log(array.length); // 4

Эти свойства несколько особенные, потому что они называются"getters"/"setters". Вы можете представить заданную строку как объект с набором присоединенных методов и свойств. При доступе к длине массива вы просто вызываете соответствующийgetter.setterФункция используется для установки операции:

var array = {
  value: ["Hello", 89, false, true],
  push: function(element) {
    //
  },
  shift: function() {
    //
  },
  get length() {
    // gets the length
  },
  set length(newLen) {
    // sets the length
  }
};

// Getter call
var len = array.length

// Setter call
array.length = 50;

Теперь, когда мы заложили основу, давайте подробнее рассмотрим объекты, один из самых важных типов JS.

стоя на плечах объекта

Objectявляется наиболее важным типом в JS, поэтому почти любой другой объект может быть получен от него. Например, функции и массивы являются специализированными объектами. Объекты в JS — это контейнеры пар ключ/значение, как в следующем примере (в буквальном виде):

var obj = {
  name: "John",
  age: 33
};

Есть еще один способ создания объекта, но он редкий и малопроизводительный, избегайте такой формы:

var obj = new Object({
  name: "John",
  age: 33
});

Как видите, объекты — это удобный способ хранения значений, которые можно получить позже, обратившись к соответствующим свойствам:

var obj = {
  name: "前端小智",
  age: 26
};

console.log(obj.name); // "前端小智"

Мы также можем добавлять новые свойства, удалять или изменять их.

var obj = {
  name: "前端小智",
  age: 26
};

obj.address = "王大冶";
delete obj.name;
obj.age = 18;

Ключевой объект может быть строкой, в этом случае мы используем атрибуты доступа в квадратных скобках:

var obj = {
  name: "前端小智",
  age: 26,
  "complex key": "stuff"
};

console.log(obj["complex key"]); // "stuff"

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

var obj = {
  name: "前端小智",
  age: 26
};

console.log(obj.name); // "前端小智"

Это все, что нам нужно знать об основах, но в главе 5 мы увидим, что объекты JS очень мощны и могут делать гораздо больше. Теперь давайте посмотрим на функции JS.

5 различных JS-функций

Практически в каждом языке программирования есть функции, и JS не исключение. Функции — это повторно используемые фрагменты кода. Рассмотрим следующий пример

function hello(message) {
  console.log(message);
}

hello("Hello");

а также

function sum(a, b) {
  return a + b;
}

var sum = sum(2, 6);

Первая функция печатает строку, а вторая возвращает значение во внешний мир. Как видите, функции могут принимать параметры, указанные в «сигнатуре» функции:

// a 和 b 是函数签名中的参数
function sum(a, b) {
  return a + b;
}

Мы можем передавать значения при вызове функции:

// a and b are parameters in the function's signature
function sum(a, b) {
  return a + b;
}

// 2 和 6 是该函数的参数
var sum = sum(2, 6);

использоватьfunctionФункция JS, объявленная ключевым словом, является обычной функцией, в отличие от функции плеча без тела.Обычные функции могут принимать разные формы:

  • именованная функция
  • анонимная функция
  • метод объекта
  • Сокращение метода объекта (ES 6)
  • IIFE (функция немедленного выполнения)

Именованные функции являются наиболее традиционным типом функций:

function sum(a, b) {
  return a + b;
}

Анонимная функция, с другой стороны, не имеет имени и может быть присвоена переменной для последующего использования.

var sum = function(a, b) {
  return a + b;
};

или как обратный вызов в других функциях:

var button = document.createElement("button");

button.addEventListener("click", function(event) {
  // do stuff
});

Функции также могут существовать внутри объекта, функция, называемаяметод:

var widget = {
  showModal: function() {
    // do stuff
  }
};

widget.showModal();

Обычные функции также получаютthisключевое слово, которому можно присвоить разные значения в зависимости от того, как вызывается функция. В главе 6 мы подробно рассмотрим эту тему. Теперь есть простое правило: функции, которые выполняются внутри объекта, имеютthisуказатель на содержащий объект

var widget = {
  html: "<div></div>",
  showModal: function() {
    console.log(this.html);
  }
};

widget.showModal(); // "<div></div>"

В ES6 вы также можете использовать сокращение метода объекта:

var widget = {
  showModal() {
    // object method shortand
  }
};

widget.showModal();

наконец,IIFE(функция для немедленного выполнения):

var IIFE = (function() {
  // what happens in an IIFE stays in the IIFE
})();

Синтаксис может показаться странным, но IIFE очень мощны, и вы увидите их в главе 4. В дополнение к обычным функциям есть стрелочные функции, которые были добавлены в ES6. Стрелочные функции не используютсяfunctionКлючевые слова, но они имеют подобную форму:

  • именованная стрелочная функция
  • анонимная стрелочная функция
  • метод объекта
  • Функция стрелки IIFE

Стрелочные функции удобны, но я не рекомендую злоупотреблять ими. Это именованная стрелочная функция. Если нет параметров, его можно не указыватьreturnутверждение и использованиекруглые скобки:

const arrow = () => console.log("Silly me");

Если вам нужно что-то вычислить в стрелочной функции или вызвать другую функцию, заключите тело в фигурные скобки.

const arrow = () => {
  const a = callMe();
  const b = callYou();
  return a + b;
};

Фигурные скобки также являются буквальной формой определения объекта, что не означает, что мы можем сделать что-то вроде:

const arrow = () => {
  a : "hello", 
  b: "world"
};

Это недопустимый синтаксис. Чтобы вернуть объект из стрелочной функции, вы можете использовать круглые скобки:

const arrow = () => ({
  a: "hello",
  b: "world"
});

console.log(arrow());
// { a: 'hello', b: 'world' }

или использоватьreturnЗаявление:

const arrow = () => {
  return {
    a: "hello",
    b: "world"
  };
};

Как и обычные анонимные функции, существуют также анонимные стрелочные функции. Здесь один передан как обратный вызов другой функции

const arr = [1, 2, 3];

const res = arr.map(element => element + 1);

console.log(res); // [ 2, 3, 4 ]

это начинается сelementв качестве параметра и возвращается для каждого элемента массиваelement +1. Как видите, если стрелочная функция имеет только один параметр, то нет необходимости заключать его в круглые скобки:

const fun = singleParameter => singleParameter + 1;

Но если вам нужно больше параметров, круглые скобки обязательны:

const fun = (a, b) => a + b + 1;

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

var widget = {
  html: "<div></div>",
  showModal: function() {
    console.log(this.html);
  }
};

widget.showModal(); // "<div></div>"

И в функции стрелкиthisуказывает на совсем другое:

var widget = {
  html: "<div></div>",
  showModal: () => console.log(this.html)
};

widget.showModal(); // undefined

Как таковые, стрелочные функции менее подходят в качестве объектных методов, но имеют несколько интересных вариантов использования, и в этой брошюре мы увидим, почему и когда их следует использовать эффективно. Наконец, взгляните на стрелочную функцию IIFE:

(() => {
  console.log("aa");
})();

Запутанный синтаксис, не так ли? Тогда мы перейдем к следующей главе.

передать параметры

**Аргументы всем функциям в ECMAScript передаются по значению. **То есть копирование значения вне функции в параметр внутри функции аналогично копированию значения из одной переменной в другую. Передача значений базового типа аналогична копированию переменных базового типа, а передача значений ссылочного типа аналогична копированию переменных ссылочного типа. Многие разработчики могут запутаться на этом этапе, потому что есть два способа доступа к переменным по значению и по ссылке, а параметры можно передавать только по значению.

При передаче примитивного типа в параметр переданное значение копируется в локальную переменную (именованный параметр, или в концепции ECMAScript,argumentsэлемент в объекте). Когда значение ссылочного типа передается параметру, адрес значения в памяти копируется в локальную переменную, поэтому изменения этой локальной переменной будут отражены вне функции. См. пример ниже:

function addTen(num){
  num += 10；
  return num
}

var count = 20;
var result = addTen(count);
alert(count); // 20 没有变化
alert(result); // 30

функция здесьaddTen ()Есть параметр num, и этот параметр на самом деле является локальной переменной функции. При вызове этой функции переменнаяcountпередается в качестве параметра функции, значение этой переменной равно20. Итак, значение20копируется в параметрnumчтобыaddTen()используется в. Внутри функции параметрnumЗначение добавлено10, но это изменение не влияет на внешнийcountПеременная. Значение параметра также станет30, что отражает изменение внутри функции. Конечно, проще использовать примитивные значения вроде чисел для иллюстрации передачи параметров по значению, но если вы используете объекты, то проблема не так проста для понимания. Другой пример:

function setName (obj) {
  obj.name = '前端小智';
}

var person = new Object();
setName(person);
alert(person.name) // "前端小智"

Приведенный выше код создает объект и сохраняет его в переменной person. Затем эта переменная копируется в obj после передачи в функцию setName(). Внутри этой функции obj и person ссылаются на один и тот же объект. Поэтому, когда атрибут name добавляется к obj внутри функции, человек вне функции также будет отражен, потому что объект, на который указывает человек, имеет только один объект в куче памяти, и это глобальный объект.

Многие разработчики ошибочно полагают, что объекты, измененные в локальной области видимости, отразятся в глобальной области видимости, указывая на то, что параметры передаются по ссылке. Чтобы продемонстрировать, что объекты передаются по значению, давайте еще раз взглянем на следующий модифицированный пример:

function setName(obj) {
  obj.name = '前端小智';
  obj = new Object();
  obj.name = '王大冶'
}
var person = new Object();
setName(person);
alert(person.name) // '前端小智'

Единственная разница между этим примером и предыдущим состоит в том, чтоsetName()В функцию добавлены две строки кода: одна строка кодаobjПереопределяет объект, для которого другая строка кода определяет другое значениеnameАтрибуты. вpersonПерейти кsetName()После этого егоnameсвойство установлено на‘前端小智’. Затем в свою очередь новый объект присваивается переменнойobj, при этом ставяnameсвойство установлено на'王大冶'.

еслиpersonпередается по ссылке, тоpersonавтоматически модифицируется, чтобы указать на егоnameсобственность‘王大冶'Новый объект. Но оригинальная ссылка остается прежней. На самом деле, при переопределении внутри функцииobj, ссылка на переменную является локальным объектом. И этот локальный объект будет уничтожен сразу после выполнения функции.

Суммировать

В JS есть семь основных строительных блоков, называемых «типами», 6 из которых также называются базовыми типами данных.ObjectСам по себе тип и самая важная сущность языка. Объекты являются контейнерами для пар ключ/значение и могут содержать почти любой другой тип JS, включая функции.

Как и в большинстве других языков программирования, в JS есть строки, числа, функции, логические значения и нечто, называемоеNullа такжеUndefinedособый тип. В JS есть два вида функций: стрелочные функции и обычные функции. Все они имеют свое использование, используйте их по сценарию.

думать

  • В чем разница между аргументами и параметрами?

  • Сколько примитивных типов в JS

  • Что такое обычная стрелочная функция

  • Какие специальные ключевые слова доступны, когда функция запускается как метод объекта?

  • Сколько способов объявить переменные в JS

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:

GitHub.com/Валентино Г.А.…

GitHub.com/Валентино Г.А.…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории