JavaScript中的变量声明你知道吗

目录
  • 变量
    • （一）var
      • 1）关于var声明的变量的作用域
      • 2）var声明提升（hoist）
    • （二）let
      • 1）与var不同，let声明的变量不会再作用域中被提升，这一现象被称为“暂时性死区”
      • 2）全局声明
    • （三）Const
  • 总结

变量

ECMAScript中，变量可以保存任何类型的数据（既可以是字符串也可以是数组也可以是别的……），也即“松散的”，变量只是一个用来区分的占位符，一共有var、const、let三个关键字用于声明变量（var在ECMAScrip所有版本可用，后两个只在ES6及以后可用）。

（一）var

var a；//仅定义
var b=‘hi'；//定义的同时，设置值

要注意的是，值的设置可以覆盖，但我们不推荐这么做

var a=”hello”
a=”hi”

ECMAScript的变量是“松散”的，那么可以用一条语句来对不同的数据类型初始化的声明，当然插入、换行不是必要的，只是一定要用逗号隔开不同的变量。

Var a=“hello”，
    b=12，
    c=false；

1）关于var声明的变量的作用域

function test(){
    var a="shanxi";
}
test();//调用函数
console.log(a);
//ReferenceError: a is not defined
//报错：a未定义

变量在使用var定义时，若是在函数内部，则该变量在函数退出时将会被销毁，无法再调用。这里的a在函数test内部使用var完成定义，调用函数test之后，随即a便被销毁，因而出现如上报错。

当省略关键词var时，这样定义的变量将成为全局变量（不过不建议这么做，太多的全局变量会让程序变得难以维护）

function test(){
    a="sichuan";
}
test();//调用函数
console.log(a);
//sichuan

2）var声明提升（hoist）

如下，结果是undefined而并没有报错，是因为，使用var关键字声明的变量，会自动提升到函数作用域的顶部。也就是，会被ECMAScript看作

function test(){
   console.log(a)
   var a=12;
}
test()
//undefined

也就是，会被ECMAScript看作

function test(){
   var a;
   console.log(a)
   a=12;
}
test()
//undefined

这种“提升”，会把所有变量的声明都提到函数作用域的顶部。

（二）let

Let和var作用相似，只是let声明的范围是块作用域，var声明的范围是函数作用域

例如如下的if语句中的{}就是一个“块”，而不是一个函数作用域。

if(true){
    var b="zhang"
    console.log(b);//zhang
}
console.log(b);//zhang

换成let：

if(true){
    let b="zhang"
    console.log(b);//zhang
}
console.log(b);//ReferenceError: b is not defined

此时b在if外边（定义b的块作用域外）便不能被引用。

！！！注意：块作用域是函数作用域的子域（是前者不一定是后者是后者不一定是前者）。

！！！注意：适用于var的作用域限制，对let是等同的（只是一个作用域是函数作用域一个是块作用域）。

关于重复声明，var不报错而let会报错，看如下实例：

var a=24;var a=12;var a=5;console.log(a);//5let b=2;let b=4;//SyntaxError: Identifier 'b' has already been declared//运行到此处就已经报错let b=8;console.log(b);var a=24;
var a=12;
var a=5;
console.log(a);//5
let b=2;
let b=4;//SyntaxError: Identifier 'b' has already been declared
//运行到此处就已经报错
let b=8;
console.log(b);

关于嵌套使用，JavaScript会记录用于变量声明的标识符以及其所在块的作用域，所以在嵌套使用时，不会报错（因为在同一块作用域中没有重复声明）。

var a="shanxi"
console.log(a);//shanxi
if(true){
    var a="sichaun";
    console.log(a);//sichuan
}
let b=3;
console.log(b);//3
if(true){
    let b=5;
    console.log(b);//5
}

所以，let和var区别只在于，二者决定所声明的变量的相关作用域存在。

var a;
let a;//SyntaxError: Identifier 'a' has already been declared
let c;
var c;//SyntaxError: Identifier 'c' has already been declared

1）与var不同，let声明的变量不会再作用域中被提升，这一现象被称为“暂时性死区”

console.log(a);
var a=2;//undefined
console.log(b);
let b=3;//ReferenceError: Cannot access 'b' before initialization

2）全局声明

Var在全局作用域中声明出的变量自动会成为window对象的属性，但let不会

var a=3;
console.log(window.a)//a
let b=10;
console.log(window.b);//undefined

不过let声明出的变量，依旧是全局作用域发生的（不然也不会是“undeifned”），变量也会在页面的生命周期内存续，所以必须保证页面不会重复声明同一个变量

（三）Const

基本上和let相同，只是使用const时，必须同时初始化变量，且尝试修改const声明的变量时会报错

const n="zhang";
n="li";//TypeError: Assignment to constant variable.
const a=12;
const  a=9;//不可以重复声明
//SyntaxError: Identifier 'a' has already been declared

当然，const有关声明的限制，只适用于它指向的变量本身的引用，也就是说，若为一个对象，那么修改这一对象内部属性，不会违反const有关的限制。

const house={};

house.name=”myhouse”;

那么，在let和const出现之后，许多开发者不再很多地使用var了，多使用let和const，使得变量有了明确的作用域、声明位置以及不变的值。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JavaScript 声明私有变量的两种方式

    前言 JavaScript并不像别的语言,能使用关键字来声明私有变量. 我了解的JavaScript能用来声明私有变量的方式有两种,一种是使用闭包,一种是使用WeakMap. 闭包 闭包的描述有很多种,比如: 能访问其它函数作用域的函数: 内部函数访问外部函数作用域的桥梁: ...... 使用闭包构建私有变量的逻辑在于: 1.在外部函数中声明变量和内部函数: 2.使用内部函数访问或者修改变量值: 3.在外部函数内返回内部函数: function outside(){ let val = 123;

  • js变量声明var使用与不使用的区别详解

    一.区分显示的声明与隐式声明(var) JS中变量声明分显式声明和隐式声明. var name = 'muzidigbig';//显示声明 name = 'muzidigbig';//隐式声明(为全局变量的一个属性) 在函数中使用var关键字进行显式声明的变量是做为局部变量,在全局范围内声明的变量为全局变量:而没有用var关键字,使用直接赋值方式声明的是全局变量(全局对象属性). // name = 'muzidigbig';//隐式声明(为全局变量的一个属性) console.log(name

  • 区别JavaScript函数声明与变量声明

    今天,又由一到题目引发了一场我跟JS基础的较量:首先是 var getName = function(){alert(1)}; function getName(){alert(2)}; getName();// 1 or function getName(){alert(2)}; var getName = function(){alert(1)}; getName();// 1 为什么我调换声明顺序,结果还是输出以 var 形式声明的函数的值? 有人回答我说 "啊,变量提升呀..."

  • JavaScript进阶（一）变量声明提升实例分析

    本文实例讲述了JavaScript变量声明提升.分享给大家供大家参考,具体如下: 如下代码输出的结果是? var num = 123; function foo1(){ console.log( num ); //undefined var num = 456; console.log( num ); //456 } foo1(); Javascript代码执行分为两个大步: 预解析的过程 代码的执行过程 1.预解析与变量声明提升 程序在执行过程中,会先将代码读取到内存中检查,会将所有的声明在此

  • 浅析JavaScript声明变量

    JavaScript的变量声明语句无论出现在何处,都会先于其他代码首先被执行.使用var关键词声明变量的作用域是当前的执行上下文,有可能是外围函数,或者,当变量声明在函数体之外时,则为全局变量. 定义在函数体外的都属于全局变量,定义在函数体内的属于局部变量.这里的定义是指通过var声明的. JavaScript有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性.例如: function test(){ myname = "huming"; alert(myname);

  • 详解js中let与var声明变量的区别

    ES6 新增了let命令,用来声明局部变量,所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 1.ES6可以用let定义块级作用域变量 代码如下: function f1(){ { var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // Uncaught ReferenceError: b is not defined } f1(); 说明:在ES6之前只有全局作用域和函数作用域,在ES6中新增

  • JavaScript中的变量声明你知道吗

    目录 变量 (一)var 1)关于var声明的变量的作用域 2)var声明提升(hoist) (二)let 1)与var不同,let声明的变量不会再作用域中被提升,这一现象被称为“暂时性死区” 2)全局声明 (三)Const 总结 变量 ECMAScript中,变量可以保存任何类型的数据(既可以是字符串也可以是数组也可以是别的……),也即“松散的”,变量只是一个用来区分的占位符,一共有var.const.let三个关键字用于声明变量(var在ECMAScrip所有版本可用,后两个只在ES6及以后

  • JavaScript中的变量声明早于赋值分析

    JavaScript中的变量声明早于赋值分析

    如下 复制代码 代码如下: var a = 3; 实际有两个步骤: 1 初始化a为undefined 2 a赋值3 因此会出现一些"匪夷所思"的现象,即JS中变量可以先使用后声明.这在Java中是不允许的. 复制代码 代码如下: System.out.println(a); int a = 1; 编译通不过.但JS可以,如下 复制代码 代码如下: alert(a); var a; 虽然是undefined,但不会报错.说明a的确声明了,且为undefined. 如果只是"al

  • Javascript中的函数声明与函数表达式(奇技淫巧)

    举一个例子: ~function() { alert("hello, world."); }(); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 试一下就知道这段代码的意思就是声明一个函数,然后立刻执行,因为Javascript中的变量作用域是基于函数的,所以这样可以避免变量污染,但这里的位运算符"~"乍一看让人摸不到头脑,如果去掉它再运行则会报错:SyntaxError. 在阐述为什么之前,让我们先来明确Javascript中的两个概念:函数声明和函

  • Javascript中的变量使用说明

    javascript中的所有变量都是类型松散的,不同于其他面向对象语音的变量声明都是强类型的.因此Javascript 的变量声明是不包括类型的.通过var关键字或者直接写变量名来声明一个变量,如: var v = 1; v=1; 这时有人可能会问,上述的两种声明有什么区别,为什 么会有这两种不同的声明方式,这就涉及到javascript中变量的作用域了.在javascript中,变量的作用域包括全局和函数级别的. 全局变量可以声明在函数体外,无论使用上述的哪种声明方式,在函数体外 声明的变量都

  • 浅析JavaScript中的变量提升

    目录 前言: 函数提升 var变量提升 let & const提升 Class提升 前言: JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们.就好像是变量声明和函数声明被提升了代码的顶部一样. sayHi() // Hi there! function sayHi() { console.log('Hi there!') } name = 'John Doe' console.log(name) // John Doe var name 然而JavaScript并不会移动你的

  • JavaScript中的变量提升和函数提升

    JavaScript中的变量提升和函数提升

    目录 前言 为什么有变量提升 javascript变量提升和函数提升 总结 前言 在js中对变量进行操作后打印值经常会出现undefined的现象.其实原因是因为js中有一个叫做变量提升的功 举例: var data="lyyyyy"; getData(); function getData(){ //第一次打印 console.log("data值为: ", data); var data="yyyyyyy"; //第二次打印 console.

  • Go语言中的变量声明和赋值

    1.变量声明和赋值语法 Go语言中的变量声明使用关键字var,例如 复制代码 代码如下: var name string //声明变量 name = "tom" //给变量赋值 这边var是定义变量的关键字,name是变量名称,string是变量类型,=是赋值符号,tom是值.上面的程序分两步,第一步声明变量,第二步给变量赋值.也可以将两步合到一起. 复制代码 代码如下: var name string = "tom" 如果在声明时同时赋值,可以省略变量类型,Go语

  • JavaScript中的变量定义与储存介绍

    与C.Java等编程语言不同,JavaScript中的变量是无类型的,所有的变量定义使用的关键词均为var: 复制代码 代码如下: var a; var m, n; var x=42, y="test"; 如果定义变量后未对该变量进行赋值,那么该变量的值为undefined.如上面代码中的a.m.n三个变量的值均为undefined. 由于JS中变量是无类型的,因此完全可以对同一个变量进行不同类型的赋值,如: 复制代码 代码如下: var b = "temp"; c

  • JavaScript中 ES6变量的结构赋值

    变量的结构赋值用户很多 1.交换变量的值 let x = 1; let y = 2; [x,y] = [y,x] 上面的代码交换变量x和变量y的值,这样的写法不仅简洁,易读,语义非常清晰 2.从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能讲他们放在数组或者对象里返回.了解 解构赋值 ,取值这些值非常方便 //返回一个数组 function example(){ return [1,2,3]; } let [a,b,c] = example(); [a,b,c]; //[1,2,3]

  • JavaScript 中判断变量是否为数字的示例代码

    简介 JavaScript 是一种动态类型语言,这意味着解释器在运行时确定变量的类型.实际上,这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据.如果没有文档和一致性,我们在使用代码时并不总是知道变量的类型. 当我们期望一个变量是数字时,对字符串或数组进行操作可能会在代码中导致奇怪的结果.在本文中,我们将会介绍一些判断变量是否为数字的函数. 像"10"之类的数字的字符串不应被接受.在JavaScript中,诸如NaN,Infinity和-Infinity之类的特殊值也是数字类

随机推荐