В чем разница между использованием "let" и "var"? - PullRequest
Новая
       247

В чем разница между использованием "let" и "var"?

3889 голосов
/ 18 апреля 2009

ECMAScript 6 представил оператор let .

Я слышал, что она описывается как "локальная" переменная, но я все еще не совсем уверен, как она ведет себя иначе, чем ключевое слово var.

В чем различия? Когда следует использовать let поверх var?

Ответы [ 32 ]

3 голосов
/ 21 июля 2016

Некоторые хаки с let:

1 

    let statistics = [16, 170, 10];
    let [age, height, grade] = statistics;

    console.log(height)

2 

    let x = 120,
    y = 12;
    [x, y] = [y, x];
    console.log(`x: ${x} y: ${y}`);

3 

    let node = {
                   type: "Identifier",
                   name: "foo"
               };

    let { type, name, value } = node;

    console.log(type);      // "Identifier"
    console.log(name);      // "foo"
    console.log(value);     // undefined

    let node = {
        type: "Identifier"
    };

    let { type: localType, name: localName = "bar" } = node;

    console.log(localType);     // "Identifier"
    console.log(localName);     // "bar"

Получатель и установщик с let: 

let jar = {
    numberOfCookies: 10,
    get cookies() {
        return this.numberOfCookies;
    },
    set cookies(value) {
        this.numberOfCookies = value;
    }
};

console.log(jar.cookies)
jar.cookies = 7;

console.log(jar.cookies)
2 голосов
/ 17 декабря 2017

пусть входит в состав es6. Эти функции объяснят разницу простым способом. 

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
1 голос
/ 28 апреля 2019

Я думаю, что термины и большинство примеров немного ошеломляющие, Основная проблема, с которой я столкнулся лично, - это понимание, что такое «Блок». В какой-то момент я понял, что блоком будут любые фигурные скобки, кроме оператора IF. открывающая скобка { функции или цикла определит новый блок, все, что определено с let внутри него, не будет доступно после закрывающей скобки } того же самого элемента (функции или цикла); Учитывая это, было легче понять: 

let msg = "Hello World";

function doWork() { // msg will be available since it was defined above this opening bracket!
  let friends = 0;
  console.log(msg);

  // with VAR though:
  for (var iCount2 = 0; iCount2 < 5; iCount2++) {} // iCount2 will be available after this closing bracket!
  console.log(iCount2);
  
    for (let iCount1 = 0; iCount1 < 5; iCount1++) {} // iCount1 will not be available behind this closing bracket, it will return undefined
  console.log(iCount1);
  
} // friends will no be available after this closing bracket!
doWork();
console.log(friends);
1 голос
/ 11 марта 2019

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

Понимание разницы между var и let может быть проще, если мы понимаем разницу между function и scope блока .

Рассмотрим следующие случаи: 

(function timer() {
    for(var i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();


   Stack            VariableEnvironment //one VariablEnvironment for timer();
                                       // when the timer is out - the value will be the same value for each call
5. [setTimeout, i]  [i=5] 
4. [setTimeout, i]  
3. [setTimeout, i]
2. [setTimeout, i]
1. [setTimeout, i]
0. [setTimeout, i]

####################    

(function timer() {
    for (let i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();

   Stack           LexicalEnvironment - each iteration has a new lexical environment
5. [setTimeout, i]  [i=5]       
                      LexicalEnvironment 
4. [setTimeout, i]    [i=4]     
                        LexicalEnvironment 
3. [setTimeout, i]      [i=3]       
                         LexicalEnvironment 
2. [setTimeout, i]       [i=2]
                           LexicalEnvironment 
1. [setTimeout, i]         [i=1]
                             LexicalEnvironment 
0. [setTimeout, i]           [i=0]

при вызове timer() создается ExecutionContext , который будет содержать VariableEnvironment и все LexicalEnvironments , соответствующие каждой итерации.

И более простой пример

Область действия функции 

function test() {
    for(var z = 0; z < 69; z++) {
        //todo
    }
    //z is visible outside the loop
}

Область применения блока 

function test() {
    for(let z = 0; z < 69; z++) {
        //todo
    }
    //z is not defined :(
}
1 голос
/ 16 февраля 2019

enter image description here

Взгляните на это изображение, я создал один очень простой пример для демонстрации переменных const и let. Как вы можете видеть, когда вы пытаетесь изменить переменную const, вы получите ошибку ( Попытка переопределить 'name', которая является постоянной '), но посмотрите на переменную let .

Сначала мы объявляем let age = 33, а затем присваиваем какое-то другое значение age = 34;, что нормально, у нас нет ошибок при попытке изменить let переменную

1 голос
/ 08 февраля 2016

Раньше в JavaScript было только две области: функциональная и глобальная. С ключевым словом 'let' JavaScript теперь вводит block-level переменных.

Чтобы иметь полное представление о ключевом слове let, ES6: ключевое слово «let» для объявления переменной в JavaScript поможет.

1 голос
/ 07 августа 2018

Как уже упоминалось выше:

Разница в том, var ограничен ближайшей функцией блок и let ограничен ближайшим включающим блоком , который может быть меньше, чем функциональный блок. Оба являются глобальными, если вне каких-либо блок. Давайте посмотрим пример:

Example1:

В обоих моих примерах у меня есть функция myfunc. myfunc содержит переменную myvar, равную 10. В моем первом примере я проверяю, равняется ли myvar 10 (myvar==10). Если да, я объявляю переменную myvar (теперь у меня есть две переменные myvar), используя ключевое слово var, и присваиваю ей новое значение (20). В следующей строке я печатаю его значение на моей консоли. После условного блока я снова печатаю значение myvar на моей консоли. Если вы посмотрите на вывод myfunc, myvar имеет значение, равное 20.

let keyword

Example2: Во втором примере вместо использования ключевого слова * 1036 в условном блоке я объявляю myvar с использованием ключевого слова let. Теперь, когда я звоню myfunc, я получаю два разных выхода: myvar=20 и myvar=10.

Таким образом, разница очень проста, т.е.

1 голос
/ 01 июля 2016

Теперь я думаю, что есть лучшая область видимости переменных для блока операторов, используя let: 

function printnums()
{
    // i is not accessible here
    for(let i = 0; i <10; i+=)
    {
       console.log(i);
    }
    // i is not accessible here

    // j is accessible here
    for(var j = 0; j <10; j++)
    {
       console.log(j);
    }
    // j is accessible here
}

Я думаю, что люди начнут использовать let here after, чтобы у них была такая же область видимости в JavaScript, как в других языках, Java, C # и т. Д.

Люди, не имеющие четкого представления о области видимости в JavaScript, раньше делали ошибку.

Подъем не поддерживается при использовании let.

При таком подходе ошибки, присутствующие в JavaScript, удаляются.

См. ES6 In Depth: let и const , чтобы лучше понять это.

1 голос
/ 27 декабря 2016

Эта статья четко определяет разницу между var, let и const

const - это сигнал о том, что идентификатор не будет переназначен.

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

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

https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75#.esmkpbg9b

0 голосов
/ 13 февраля 2019

Я хочу связать эти ключевые слова с контекстом выполнения, потому что контекст выполнения важен во всем этом. Контекст выполнения имеет две фазы: фаза создания и фаза выполнения. Кроме того, каждый контекст выполнения имеет переменную среду и внешнюю среду (свою лексическую среду).

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

Однако вы не можете ссылаться на объявленную переменную с помощью let или const, пока она не будет объявлена. Если вы попытаетесь использовать его до того, как он будет объявлен, тогда будет возникать исключительная ситуация на этапе выполнения контекста выполнения. Теперь переменная по-прежнему будет в памяти, благодаря фазе создания контекста выполнения, но механизм не позволит вам использовать ее: 

function a(){
    b;
    let b;
}
a();
> Uncaught ReferenceError: b is not defined

С переменной, определенной с помощью var, если Механизм не может найти переменную в среде переменных текущего контекста выполнения, он поднимется по цепочке областей действия (Внешняя среда) и проверит переменную среду внешней среды для переменной. Если он не может найти его там, он продолжит поиск в Scope Chain. Это не относится к let и const.

Вторая особенность let - ввод области блока. Блоки определяются фигурными скобками. Примеры включают в себя функциональные блоки, блоки if, для блоков и т. Д. Когда вы объявляете переменную с помощью let inside блока, переменная доступна только внутри блока. Фактически, каждый раз, когда блок запускается, например, в цикле for, он создает новую переменную в памяти.

ES6 также вводит ключевое слово const для объявления переменных. const также имеет ограниченную область видимости. Разница между let и const заключается в том, что переменные const должны быть объявлены с использованием инициализатора, иначе это вызовет ошибку.

И, наконец, когда дело доходит до контекста выполнения, переменные, определенные с помощью var, будут присоединены к объекту this. В глобальном контексте выполнения это будет объект окна в браузерах. Это не относится к let или const.

Страница:
...