变量

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,使得变量有了明确的作用域、声明位置以及不变的值。

总结

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

JavaScript中的变量声明你知道吗的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios – 如何从变量访问属性或方法?

    是否可以使用变量作为Swift中方法或属性的名称来访问方法或属性?在PHP中,您可以使用$object->{$variable}.例如编辑:这是我正在使用的实际代码:解决方法你可以做到,但不能使用“纯粹的”Swift.Swift的重点是防止这种危险的动态属性访问.你必须使用Cocoa的Key-ValueCoding功能:非常方便,它完全穿过你要穿过的字符串到属性名称的桥,但要注意:这里是龙.

  6. iOS >>块>>更改块外部的变量值

    我不是在处理一个Object并改变它,就像我的mString一样.我希望’center’属性的行为类似于myInt,因为它是直接访问的C结构,而不是指向对象的指针.我希望’backgroundColor’的行为类似于我的imstring,因为它是一个指向一个新对象的对象的指针,不是吗?

  7. ios – Xcode Bot:如何在post触发器脚本上获得.ipa路径?

    我正在使用机器人来存档iOS应用程序,我需要获取.ipa产品路径才能将其发布到我们的分发系统中.机器人设置:并使用脚本打印所有env变量,其中不包含ipa文件的路径.此外,一些变量指向不存在的目录,即:XCS_OUTPUT_DIR这里的env变量输出:除此之外,我还能够确认.ipa文件是在另一个文件夹中创建的(/IntegrationAssets//

  8. ios – 使用附加字符串本地化Info.plist变量

    我正在尝试本地化应用程序的名称,同时仍然能够根据构建配置追加字符串.所以目前它被设置为:该设置定义为:通过这种方式,我们可以为应用程序添加后缀以用于不同的beta版本.问题是,当我们尝试本地化本地化的InfoPlist.strings中的应用程序显示名称时,就像这样我们覆盖存储在Info.plist中的值,并丢失后缀字符.这有什么好办法吗?

  9. iOS – 开始iOS教程 – 变量之前的下划线?

    这是正确的还是我做错了什么?

  10. ios – 静态计算变量被多次实例化

    我有一个日期格式化程序,我试图在UITableViewCell子类中创建一个单例,所以我创建了一个这样的计算属性:问题是我不止一次看到print语句,这意味着它不止一次被创建.我已经找到了其他方法,但我很想知道这里发生了什么.有任何想法吗?解决方法您的代码段相当于只获取属性,基本上它与以下内容相同:如果你只想运行一次,你应该像定义一个惰性属性一样定义它:

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部