JavaScript变量声明var,let.const及区别浅析


Posted in Javascript onApril 23, 2018

var声明变量的作用域限制在其声明位置的上下文中

var x = 0; // x是全局变量,并且赋值为0。
console.log(typeof z); // undefined,因为z还不存在。
function a() { // 当a被调用时,
 var y = 2;  // y被声明成函数a作用域的变量,然后赋值成2。
 console.log(x, y);  // 0 2 
 function b() {    // 当b被调用时,
  x = 3; // 全局变量x被赋值为3,不生成全局变量。
  y = 4; // 已存在的外部函数的y变量被赋值为4,不生成新的全局变量。
  z = 5; // 创建新的全局变量z,并且给z赋值为5。 
 }     // (在严格模式下(strict mode)抛出ReferenceError)
 b();   // 调用b时创建了全局变量z。
 console.log(x, y, z); // 3 4 5
}
a();          // 调用a时同时调用了b。
console.log(x, z);   // 3 5
console.log(typeof y); // undefined,因为y是a函数的本地(local)变量。

let 声明的变量只在其声明的块或子块中可用,var的作用域是整个封闭函数

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // 同样的变量!
  console.log(x); // 2
 }
 console.log(x); // 2
}
function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // 不同的变量
  console.log(x); // 2
 }
 console.log(x); // 1
}

在 ECMAScript 2015 中,let绑定不受变量提升的约束,这意味着let声明不会被提升到当前执行上下文的顶部。
在块中的变量初始化之前,引用它将会导致 ReferenceError(而使用 var 声明变量则恰恰相反,该变量的值是 undefined )
当在块中使用时,let将变量的作用域限制为该块。注意var的作用域在它被声明的函数内的区

var a = 1;
var b = 2;
if (a === 1) {
 var a = 11; // the scope is global
 let b = 22; // the scope is inside the if-block
 console.log(a); // 11
 console.log(b); // 22
} 
console.log(a); // 11
console.log(b); // 2

const 常量必须在声明的同时指定它的值.

const声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的(如引用内容是对象),只是变量标识符不能重新分配一个常量不能和它所在作用域内的其他变量或函数拥有相同的名称

// 注意: 常量在声明的时候可以使用大小写,但通常情况下全部用大写字母。 
// 定义常量MY_FAV并赋值7
const MY_FAV = 7;
// 报错
MY_FAV = 20;
// 输出 7
console.log("my favorite number is: " + MY_FAV);
// 尝试重新声明会报错 
const MY_FAV = 20;
// MY_FAV 保留给上面的常量,这个操作会失败
var MY_FAV = 20; 
// 也会报错
let MY_FAV = 20;
// 注意块范围的性质很重要
if (MY_FAV === 7) { 
  // 没问题,并且创建了一个块作用域变量 MY_FAV
  // (works equally well with let to declare a block scoped non const variable)
  let MY_FAV = 20;
  // MY_FAV 现在为 20
  console.log('my favorite number is ' + MY_FAV);
  // 这被提升到全局上下文并引发错误
  var MY_FAV = 20;
}
// MY_FAV 依旧为7
console.log("my favorite number is " + MY_FAV);
// 常量要求一个初始值
const FOO; // SyntaxError: missing = in const declaration
// 常量可以定义成对象
const MY_OBJECT = {"key": "value"};
// 重写对象和上面一样会失败
MY_OBJECT = {"OTHER_KEY": "value"};
// 对象属性并不在保护的范围内,下面这个声明会成功执行
MY_OBJECT.key = "otherValue";
// 也可以用来定义数组
const MY_ARRAY = [];
// It's possible to push items into the array
// 可以向数组填充数据
MY_ARRAY.push('A'); // ["A"]
// 但是,将一个新数组赋给变量会引发错误
MY_ARRAY = ['B']

下面介绍下在javascript中有三种声明变量的方式:var、let、const。

var 声明全局变量,换句话理解就是,声明在for循环中的变量,跳出for循环同样可以使用。

for(var i=0;i<=1000;i++){ 
var sum=0; 
sum+=i; 
} 
alert(sum);

声明在for循环内部的sum,跳出for循环一样可以使用,不会报错正常弹出结果

let:声明块级变量,即局部变量。

在上面的例子中,跳出for循环,再使用sum变量就会报错,有着严格的作用域,变量只作用域当前隶属的代码块,不可重复定义同一个变量,不可在声明之前调用,必须先定义再使用,会报错,循环体中可以用let

注意:必须声明'use strict';后才能使用let声明变量否则浏览并不能显示结果,

const:用于声明常量,也具有块级作用域 ,也可声明块级。

const PI=3.14;

它和let一样,也不能重复定义同一个变量,const一旦定义,无法修改。

总结

以上所述是小编给大家介绍的JavaScript变量声明var,let.const及区别浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 #Javascript
vue-devtools的安装步骤
Apr 23 #Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 #Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 #Javascript
原生JS进行前后端同构
Apr 22 #Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 #Javascript
vue移动端实现下拉刷新
Apr 22 #Javascript
You might like
PHP写杨辉三角实例代码
2011/07/17 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
jquery实现简易验证插件封装
2020/09/13 jQuery
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
综合素质的自我鉴定
2013/10/07 职场文书
快递业务员岗位职责
2014/01/06 职场文书
给校长的建议书500字
2014/05/15 职场文书
新闻报道稿范文
2015/07/23 职场文书
创业计划书之寿司
2019/07/19 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android