JavaScript let и const

ECMAScript 2015(ECMAScript 6)

ES2015 (ES6) ввёл два важных новых ключевых слова JavaScript:letиconst。

Переменные, объявленные с помощью let, действительны только внутри блока кода, где находится команда let.

const объявляет константу, доступную только для чтения. После объявления значение константы нельзя изменить.

До ES6 в JavaScript было только два типа области видимости:глобальные переменныеилокальные переменные внутри функций。

Глобальные переменные

Переменные, объявленные вне функции, имеют глобальную область видимости:

Пример

var carName = "Volvo"; //Здесь переменная carName может быть использована function myFunction() { //Переменная carName также может быть использована здесь }

Попробуйте сами »

К глобальным переменным можно получить доступ из любого места программы JavaScript.

Локальные переменные

Переменные, объявленные внутри функции, имеют локальную область видимости (в пределах функции):

Пример

//Здесь переменная carName не может быть использована function myFunction() { var carName = "Volvo"; //Здесь переменная carName может использоваться } //Здесь переменная carName не может использоваться

Попробуйте сами »

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

Блочная область видимости JavaScript

Переменные, объявленные с помощью ключевого слова var, не имеют блочной области видимости; они по-прежнему доступны вне {}.

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

До ES6 не существовало понятия блочной области видимости.

В ES6 можно использовать ключевое слово let для создания блочной области видимости.

Переменные, объявленные с помощью let, действительны только внутри блока кода, в котором находится команда let{}и действительны внутри; снаружи{}недоступны.

{ 
    let x = 2;
}
// 这里不能使用 x 变量

Повторное объявление переменных

Повторное объявление переменных с помощью ключевого слова var может вызвать проблемы.

Повторное объявление переменной внутри блока также повторно объявляет переменную вне блока:

Пример

var x = 10; //Здесь x выводит 10. { var x = 2; //Здесь x выводит 2. } //Здесь x выводит 2.

Попробуйте сами »

Ключевое слово let может решить эту проблему, потому что оно действительно только внутри блока кода, где находится команда let,{}и действует внутри.

Пример

var x = 10; //Здесь x выводит 10. { let x = 2; //Здесь x выводит 2. } //Здесь x выводит 10.

Попробуйте сами »

Поддержка браузеров

Internet Explorer 11 и более ранние браузеры не поддерживают ключевое слово let.

В таблице ниже перечислены минимальные версии браузеров, поддерживающие ключевое слово let.

Chrome 49 IE / Edge 12 Firefox 44 Safari 11 Opera 36
март 2016 июль 2015 Янв, 2015 Сент, 2017 март 2016

Область видимости цикла

Использование ключевого слова var:

Пример

var i = 5; for (var i = 0; i < 10; i++) { //Некоторый код... } //Здесь i выводит 10.

Попробуйте сами »

Использование ключевого слова let:

Пример

var i = 5; for (let i = 0; i < 10; i++) { //Некоторый код... } //Здесь i выводит 5.

Попробуйте сами »

В первом примере используется ключевое слово varvar. Переменная, которую оно объявляет, является глобальной, как внутри, так и вне цикла.

Во втором примере используется ключевое слово letlet. Переменная, которую оно объявляет, имеет область видимости только внутри цикла; переменные вне цикла не затрагиваются.

Локальные переменные

При использовании внутри тела функции ключевые словаvarиletобъявляют переменные несколько схожим образом.

Их область видимости —локальная.:

// 使用 var
function myFunction() {
    var carName = "Volvo";   // 局部作用域
}

// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
}

Глобальные переменные

При использовании вне тела функции или вне блока кода ключевые словаvarиletобъявляют переменные, которые также несколько схожи.

Их область видимости —глобальная.:

// 使用 var
var x = 2;       // 全局作用域

// 使用 let
let x = 2;       // 全局作用域

Глобальные переменные в HTML

В JavaScript глобальная область видимости относится к среде JavaScript.

В HTML глобальная область видимости относится к объекту window.

Глобальные переменные, объявленные с помощьюvarключевого слова var, принадлежат объекту window:

Пример

var carName = "Volvo"; //Переменная доступна через window.carName

Попробуйте сами »

Глобальные переменные, объявленные с помощьюletключевого слова let, не принадлежат объекту window:

Пример

let carName = "Volvo"; //Переменная недоступна через window.carName

Попробуйте сами »

Сброс переменных

Переменные, объявленные с помощьюvarключевого слова var, можно изменять где угодно:

Пример

var x = 2; //x равно 2 var x = 3; //Теперь x равно 3

Попробуйте сами »

В одной и той же области видимости или области видимости блока нельзя использоватьletlet для сброса переменных, объявленных с помощьюvarvar:

var x = 2;       // 合法
let x = 3;       // 不合法

{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

В одной и той же области видимости или области видимости блока нельзя использоватьletlet для сброса переменных, объявленных с помощьюletvar:

let x = 2;       // 合法
let x = 3;       // 不合法

{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

В одной и той же области видимости или области видимости блока нельзя использоватьvarlet для сброса переменных, объявленных с помощьюletvar:

let x = 2;       // 合法
var x = 3;       // 不合法

{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

letКлючевое слово let можно использовать для повторного объявления и переназначения переменных в разных областях видимости или разных областях видимости блока:

let x = 2;       // 合法

{
    let x = 3;   // 合法
}

{
    let x = 4;   // 合法
}

Поднятие переменных

В JavaScript переменные, определённые с помощью ключевого слова var, могут быть объявлены после их использования; то есть переменные можно использовать до их объявления (поднятие переменных в JavaScript）。

Пример

//Здесь переменную carName можно использовать var carName;

Попробуйте сами »

Переменные, определённые с помощью ключевого слова let, не могут быть объявлены после использования; то есть переменные должны быть объявлены до использования.

// 在这里不可以使用 carName 变量

let carName;

Ключевое слово const

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

Пример

const PI = 3.141592653589793; PI = 3.14; //Выдаёт ошибку PI = PI + 10; //Выдаёт ошибку

Попробуйте сами »

constОпределение констант похоже на использованиеletключевого слова let для определения переменных:

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

У этих двух также есть следующие два различия:

  • constКонстанты, объявленные с помощью const, должны быть инициализированы, тогда какletпеременные, объявленные с помощью let, не нуждаются в этом.
  • Значение константы, определённой с помощью const, нельзя изменить путём повторного присваивания, и её нельзя повторно объявить. Однако значения переменных, определённых с помощью let, можно изменять.
var x = 10;
// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

Константы, объявленные с помощью const, должны быть инициализированы:

// 错误写法
const PI;
PI = 3.14159265359;

// 正确写法
const PI = 3.14159265359;

Не совсем константа

Суть const: переменные, определённые с помощью const, не являются настоящими константами; они не неизменяемы. Это определяет постоянную ссылку на значение. Объекты или массивы, определённые с помощью const, на самом деле изменяемы. Следующий код не вызовет ошибку:

Пример

//Создайте константный объект const car = {type:"Fiat", model:"500", color:"white"}; //Изменить свойство: car.color = "red"; //Добавить свойство car.owner = "Johnson";

Попробуйте сами »

Но нельзя переназначить константный объект:

Пример

const car = {type:"Fiat", model:"500", color:"white"}; car = {type:"Volvo", model:"EX60", color:"red"}; //Ошибка

Попробуйте сами »

Следующий пример изменяет константный массив:

Пример

//Создать константный массив const cars = ["Saab", "Volvo", "BMW"]; //Изменить элементы cars[0] = "Toyota"; //Добавить элементы cars.push("Audi");

Попробуйте сами »

Но мы не можем переназначить константный массив:

Пример

const cars = ["Saab", "Volvo", "BMW"]; cars = ["Toyota", "Volvo", "Audi"]; //Ошибка

Попробуйте сами »

Поддержка браузеров

Internet Explorer 10 и более ранние браузеры не поддерживают ключевое слово const.

В следующей таблице перечислены самые ранние версии браузеров, поддерживающие ключевое слово const.

Chrome 49 IE / Edge 11 Firefox 36 Safari 10 Opera 36
март 2016 окт. 2013 Фев, 2015 Сен, 2016 март 2016

Сброс переменных

ИспользованиеvarПеременные, объявленные с этим ключевым словом, можно изменять где угодно:

Пример

var x = 2; //Допустимо var x = 3; //Допустимо x = 4; //Допустимо

В одной и той же области видимости или области видимости блока нельзя использоватьconstключевое слово для повторного объявленияvarиletпеременные, объявленные с ключевым словом:

var x = 2;         // 合法
const x = 2;       // 不合法
{
    let x = 2;     // 合法
    const x = 2;   // 不合法
}

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

const x = 2;       // 合法
const x = 3;       // 不合法
x = 3;             // 不合法
var x = 3;         // 不合法
let x = 3;         // 不合法

{
    const x = 2;   // 合法
    const x = 3;   // 不合法
    x = 3;         // 不合法
    var x = 3;     // 不合法
    let x = 3;     // 不合法
}

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

const x = 2;       // 合法

{
    const x = 3;   // 合法
}

{
    const x = 4;   // 合法
}

Поднятие переменных

Переменные, определённые с помощью ключевого слова var в JavaScript, могут быть объявлены после использования, то есть переменные можно использовать до объявления (поднятие переменных JavaScript）。

Пример

carName = "Volvo"; //Переменная carName может быть использована здесь car carName;

Попробуйте сами »

Переменные, определённые с ключевым словом const, не могут быть объявлены после использования; то есть переменные должны быть объявлены до их использования.

carName = "Volvo";    // 在这里不可以使用 carName 变量
const carName = "Volvo";
Другие расширения