Разница между var и let/const

JavaScript ECMAScript 6
Разница между var и let/const

letа такжеconstЭто новая команда в ES6 для объявления переменных Эти две команды такие же, как и в ES5.varмного разных, иletа такжеconstЕсть также некоторые тонкие различия, после внимательного прочтения учителя Руан Ифэн.ДокументацияПозже я обнаружил, что есть еще некоторые неизвестные детали, поэтому я реорганизовал его и поделился с вами.

блог,Документы внешнего накопления,Нет публики,GitHub

содержание:

varа такжеlet/constразница

  1. область действия блока

  2. Нет переменного продвижения

  3. Временная мертвая зона

  4. неповторяемая декларация

  5. Глобальные переменные, объявленные через let и const, не будут висеть под объектом верхнего уровня.

constДва момента, на которые стоит обратить внимание по поводу команды:

  1. объявление const должно быть назначено немедленно, иначе будет сообщено об ошибке

  2. Константный простой тип не может быть изменен после его объявления, адрес, на который указывает указатель сложного типа (массив, объект и т. д.), не может быть изменен, и внутренние данные могут быть изменены.

Зачем вам нужна блочная область?

ES5 имеет только глобальную область действия и область действия функции, без области действия блока.

Это приводит к множеству необоснованных сценариев:

  1. Внутренние переменные могут переопределять внешние переменные
  2. Переменная цикла, используемая для подсчета, просочилась как глобальная переменная
var tmp = new Date();
function f() {
  console.log(tmp); // 想打印外层的时间作用域
  if (false) {
    var tmp = 'hello world'; // 这里声明的作用域为整个函数
  }
}
f(); // undefined

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]); // i应该为此次for循环使用的变量
}
console.log(i); // 5 全局范围都可以读到

область действия блока

  1. объем
function f1() {
  let n = 5;
  if (true) {
    let n = 10;
    console.log(n); // 10 内层的n
  }
  console.log(n); // 5 当前层的n
}
  1. Блочные области произвольно вложены
{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错 读不到子作用域的变量
}}}};
  1. Блочная область видимости действительно разбивает код на блоки.
{
let a = ...;
...
}
{
let a = ...;
...
}

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

Блочное объявление функций:

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

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

if(true){
  let a = function () {}; // 作用域为块级 令声明的函数作用域范围更清晰
}

Область действия ES6 на уровне блоков допускает правила объявления функций, которые верны только при использовании фигурных скобок.Если фигурные скобки не используются, будет сообщено об ошибке..

// 报错
'use strict';
if (true)
  function f() {} // 我们需要给if加个{}

Нет переменного продвижения

Феномен переменного продвижения: В той же области переменная может использоваться до объявления, значение не определено

Используйте с ES5varПри объявлении переменной часто возникает явление продвижения переменной.

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

Временная мертвая зона:

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

var tmp = 123; // 声明
if (true) {
  tmp = 'abc'; // 报错 因为本区域有tmp声明变量
  let tmp; // 绑定if这个块级的作用域 不能出现tmp变量
}

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

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

Повторное объявление переменных не допускается

Это происходит при тестировании:var a= '声明';const a = '不报错', это связано с тем, что babel выполнил некоторую обработку во время преобразования, протестировал ее в консоли браузера и успешно сообщил об ошибке.

let,constНе допускается повторное объявление одной и той же переменной в одной и той же области видимости.

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

Глобальные переменные, объявленные через let и const, не будут висеть под объектом верхнего уровня.

  1. Объектами верхнего уровня в среде браузера являются:window
  2. Объект верхнего уровня среды узла:global
  3. Глобальные переменные, объявленные var, будут висеть под объектом верхнего уровня, тогда как let и const не будут висеть под объектом верхнего уровня. Например, следующий каштан
var a = 1;
// 如果在 Node环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined

константная команда

  1. После объявления он должен быть немедленно назначен

    let p; var p1; // 不报错
const p3 = '马上赋值'
const p3; // 报错 没有赋值

  2. const после объявления значение не может быть изменено

    Простой тип: не может быть изменен

    const p = '不能改变';
p = '报错'

    Сложный тип: указатель переменной не может быть изменен

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

    const p = ['不能改动']
const p2 = {
  name: 'OBKoro1'
}
p[0] = '不报错'
p2.name = '不报错'
p = ['报错']
p2 = {
  name: '报错'
}

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

    • Простые типы (число, строка, логическое значение):Адрес памяти является значением, то есть константой (при его изменении будет сообщено об ошибке).

    • Сложные типы (объекты, массивы и т.д.):Адрес содержит указатель,constОн может только гарантировать, что указатель фиксирован (всегда указывает на один и тот же адрес), а его внутреннее значение может быть изменено (не думайте, что const безопасен!)

      Итак, пока вы не переназначаете весь массив/объект, потому что он сохраняет указатель, используйтеpush,shift,spliceДопускаются и другие способы, вы не получите ошибку, даже если будете удалять все значения по одному.

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

Суммировать:

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

varа такжеlet/constРазница:

  1. область действия блока
  2. Нет переменного продвижения
  3. Временная мертвая зона
  4. неповторяемая декларация
  5. Глобальные переменные, объявленные через let и const, не будут висеть под объектом верхнего уровня.

constДва момента, на которые стоит обратить внимание по поводу команды:

  1. letВы можете объявить сначала и назначить позже, в то время какconstЕго нужно присвоить сразу после объявления, иначе будет сообщено об ошибке

  2. Константный простой тип не может быть изменен после его объявления, адрес, на который указывает указатель сложного типа (массив, объект и т. д.), не может быть изменен, и внутренние данные могут быть изменены.

Let и const сценарии использования:

  1. letСценарий использования: переменные, на заменуvar.
  2. constСценарии использования: при константах, при объявлении анонимных функций и стрелочных функциях.

Поощряйте меня:

Если вы думаете, что это хорошо, дайте мне проектstarБар

блог,Документы внешнего накопления,Нет публики,GitHub

Использованная литература:

команды let и const

Категории