我终于把 JS 中 let,const 和 var 的用法讲清楚了

在编程时,变量成为了用于存储数据的容器。
例如,当你把自己的名字输入到网站上的表单字段中时,数据就会存储在变量中。而当你在网站上搜索特定项时,返回的信息在展示给你看之前首先也是存储在变量中。
赋值运算符用于将数据赋值给变量。

var name = "Kingsley";

JavaScript中,有三个定义变量的关键字。它们是letconstvar。2015年以前,使用var关键字是声明JavaScript变量的唯一方法。
幸而,EmcaScript 2016(ES16)的到来带来了另外两个变量关键字:letconst
在理解这些关键字之前,我们必须了解变量的三个概念:

1.全局作用域:

全局声明的变量(在函数外部)具有全局作用域,并且可以在整个程序的任何位置进行访问。

var name = "Kingsley";

// global scope
function myFunction() {
   //code goes here
}

2.函数作用域:

在函数内部(即本地)声明的变量具有函数作用域。

// global scope
function Function() {
   var name = "Kingsley";
   // function scope
}

上面的例子中我们已经定义了不同的作用域范围,接下来定义三个变量关键字以及它们允许的变量作用域:

3.块作用域

var:用var关键字声明的变量没有块作用域。也就是说,可以在外部访问任何在块内声明的变量。
let:用let定义的变量可以具有块作用域。也就是说,在块{}内部声明的任何变量都不能在块的外部访问。
const:和let一样,用const定义的变量可以具有块作用域。也就是说,在块{}内部声明的任何变量都不能在块的外部访问。

constlet都有块作用域。

var name = “Kingsley”;
// Here name is Kingsley
{
  let name = “Peter”;
  // name is Peter inside this block
}
// Here name is Kingsley
var name = “Kingsley”;
// Here name is Kingsley
{
  const name = “Peter”;
  // name is Peter inside this block
}
// Here name is Kingsley

此外,当在块的内部进行重新声明时,let和var的行为也有所不同。

var name = “Kingsley”;
// Here name is Kingsley
{
  var name = “Peter”;
  // name is Peter inside this block
}
// Here name is Peter
var name = “Kingsley”;
// Here name is Kingsley
{
  let name = “Peter”;
  // name is Peter inside this block
}
// Here name is Kingsley

const定义的变量不能重新分配另一个值:

const name = “Kingsley”;
name = “Peter”;      // This will give an error

注意:用const定义的数组和对象可以更改属性。不变性仅适用于原始类型值,例如数字和字符串。

可以使用const创建对象:

const writer = {name:"Kingsley", age:"21", sex:"male"};

你可以更改对象属性:

writer.name = "Peter";

你也可以给对象添加新属性:

writer.surname = "Ubah";

但是,不能重新分配完整的对象:

const writer = {name:"Kingsley", age:"21", sex:"male"};
writer = {name:"Peter", age:"25", sex:"male"}; //报错

数组类型也是如此:

const writers = ["Kingsley", "Peter", "Joe"];
writers = ["Sam", "Clark", "Kingsley"];    // 报错

内部循环

var和let在循环中的行为也有所不同。

var i = 5;
for (var i = 0; i < 10; i++) {
  // code
}
// Here i is 10
let i = 5;
for (let i = 0; i < 10; i++) {
  // code
}
// Here i is 5

4.函数范围

用let关键字声明的变量具有函数作用域。也就是说,在范围之外无法访问该变量。

// name can’t be accessed by this global code
function Foo() {
  let name = "Kingsley";
  // func scope
}

5.全局范围

用var关键字声明的变量具有全局范围。可以从所有JavaScript代码进行访问(并且可以通过window对象进行访问)。

  • 用let关键字声明的变量具有全局范围。但是,无法通过Windows对象进行访问。

在全局范围内进行声明时,这两个关键字的行为也有所不同:

var x = 1;

// Now x is 1

var x = 5;

// Now x is 5

上面的代码片段表明,允许使用var关键字在同一范围内进行重新声明。

let x = 1;       // Allowed
let x = 5;       // Not allowed

{
  let x = 2;   // Allowed
  let x = 3;   // Not allowed
}

上面的代码片段显示,let关键字不允许在相同范围或相同块中进行重声明。

var x = 1;       // Allowed
let x = 5;       // Not allowed

{
  var x = 2;   // Allowed
  let x = 3   // Not allowed
}

上面的代码片段显示,可以用var在另一个块中成功地重新声明变量,而let却不可以。

var x = 1;       // Allowed
const x = 5;       // Not allowed

{
  var x = 2;   // Allowed
  const x = 3   // Not allowed
}

上面的代码片段显示,可以用var在另一个块中成功地重新声明变量,但const不能。

let x = 1;       // Allowed

{
  let x = 5;   // Allowed
}

{
  let x = 2;   // Allowed
}

上面的代码片段表明,使用let在另一个作用域或者另一个块重声明是可行的。

const x = 1;       // Allowed

{
  const x = 5;   // Allowed
}

{
  const x = 2;   // Allowed
}

上面的代码片段表明,使用const在另一个作用域或另一个块重声明也是可行的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335