浅谈JS中var,let和const的区别

目录
  • 区别1
  • 区别2
  • 区别3
  • 区别4
  • 区别5
  • 区别6
  • 区别7

区别1

let和var用来声明变量，const用来声明常量。

变量就是赋值后可以改变它的值，常量就是赋值后就不能改变它的值。

当声明为对象时，可以直接修改对象内的属性值

const age = 26;
age = 36; // TypeError: 给常量赋值

// const声明的作用域也是块
const name = 'Matt';
if (true) {
    const name = 'Nicholas';
}
console.log(name); // Matt

区别2

const不允许只声明不赋值，一旦声明就必须赋值

const num; // 错误
const num = 1; //正确

区别3

var是函数作用域，let和const是块级作用域。

花括号{}就是块级作用域，函数作用域就是函数里面的内容。

{
    let num = 4;
}
console.log(num);// num is not defined
{
    var num = 4;
}
console.log(num); // 4

区别4

var有提升的功能，let和const没有

// 片段A
console.log(a);  //undefined
var a = 4;
// 片段B
console.log(b); //b is not defined
let b = 4;

片段A在代码预编译时，javaScript引擎会自动将所有代码里面的var关键字声明的语句都会提升到当前作用域的顶端，如下：

var a;
console.log(a);  //undefined
a = 4;

区别5

在最外层的作用域，也就是全局作用域，用var声明的变量，会作为window的一个属性；而用let和const声明的变量或常量，并不会作为window的属性

var a = 4;
function foo(){
	/*
	这里的this采用默认的规则，与window进行了绑定，所以实际上访问的是window.a
	*/
	console.log(this.a);// 4
}
foo()
let a = 4;
function foo(){
	/*
	在这种情况下，this.a 访问的是window.a，但是let定义的变量，并不会作为window的属性，所以访问不到
	*/
	console.log(this.a);// undefined
}
foo()

区别6

let,const不允许同一个块作用域中出现冗余声明（重复声明）,而var可以

var name;
var name; // 可以

let age;
let age; // SyntaxError；标识符age已经声明过了
const name = 'Matt';
const name = 'Nicholas'; // SyntaxError

区别7

变量渗透问题

// for循环中var定义的迭代变量会渗透到循环体外部
for (var i = 0; i < 5; ++i) {
    // 循环逻辑
}
console.log(i); // 5
// 改成使用let之后，这个问题就消失了，因为迭代变量的作用域仅限于for循环块内部
for (let i = 0; i < 5; ++i) {
    // 循环逻辑
}
console.log(i); // ReferenceError: i没有定义

到此这篇关于浅谈JS中var,let和const的区别的文章就介绍到这了,更多相关JS var,let,const,内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 深入了解JavaScript中let/var/function的变量提升

    目录 前言 1. let存在提升 2. var/function的变量提升 2.1 var的变量提升 2.2 function的变量提升 3. 总结 前言 在我们的印象中,当提到JavaScript中的变量提升,我们想到的是“变量和函数的声明在物理层面移动到代码的最前面“.当然这么说不大准确,变量和函数声明在代码里的位置是不会变的,而是在编译阶段被放入内存中. 可是如果我问你:let 到底有没有提升?如果有,var / let / function三者的变量提升一致吗?此时你的答案是什么? 接下

  • JavaScript中var与let的区别

    目录 1.作用域表现形式不同 2.是否变量提升的区别 3.暂时性死区上的区别 4.在同一个上下文中var可以重复声明,let不行 前言: var是JavaScript刚出现时就存在的变量声明关键字,而let作为ES6才出现的变量声明关键字,无疑两者之间存在着很大的区别.那么具体有哪些区别呢? 1.作用域表现形式不同 var是函数作用域,let是块级作用域 { var monkey='熏悟空'; let pig='猪扒盖'; } console.log(monkey); //输出undefined

  • Javascript var变量隐式声明方法

    诸如此类.这有一个问题,比如说在代码中的某一行,我想使用的一个已声明的变量x,结果由于打字或者拼写错误,这个变量被写成y了,结果相当于"隐式"声明了一个变量y,在实际编程过程中,这种错误有时比较难以发现. 除此之外,今天通过同事介绍,了解到这种"隐式声明"中的别外一个问题. 当你在当前上下文内进行这种"隐式"声明时,JavaScript引擎会先在当前上下文中寻找是否之前有声明此变量,如果没有,再到上一级的上下文中去寻找,如果一直未找到,会最后在w

  • 小程序中使用css var变量(使js可以动态设置css样式属性)

    使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单. 基本用法 基础用法 <!--web开发中顶层变量的key名是:root,小程序使用page--> page { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; } .

  • javascript的var与let,const之间的区别详解

    javascript的var与let,const之间的区别详解

    目录 作为全局变量时 变量提升 暂时性死区 块级作用域 重复声明 修改声明的变量(常量与变量声明) 总结 说到JavaScript中声明变量的几种方法也就是var.let.const了,let和const是es6中新增的命令.那么它们之间有什么区别呢? 我们先整体说一下三者的区别,在详细介绍,var.let.const的区别主要从以下几点分析: 作为全局变量时的不同 变量提升 暂时性死区 块级作用域 重复声明 修改声明的变量 作为全局变量时 在ES5中,顶层对象的属性和全局变量是等价的,用var

  • Javascript var变量删除原理及实现

    var有三种声明的情形: var声明的全局变量 var在函数范围内声明的局部变量 eval中声明的全局变量. 首先, 1.2种情形var声明的变量是无法删除的. 尽管var声明的全局变量是属于window对象的属性(在浏览器中),但依然是无法删除的,因为这种属性的configurable=false,因此不能delete掉. 局部变量就更不用说了,连var变量依附的对象都不知道在哪里,肯定无法删除. 而eval('vara=1')看似和直接var是一样的效果(当然是在全局作用执行eval),执行

  • 浅谈JS中var,let和const的区别

    目录 区别1 区别2 区别3 区别4 区别5 区别6 区别7 区别1 let和var用来声明变量,const用来声明常量. 变量就是赋值后可以改变它的值,常量就是赋值后就不能改变它的值. 当声明为对象时,可以直接修改对象内的属性值 const age = 26; age = 36; // TypeError: 给常量赋值 // const声明的作用域也是块 const name = 'Matt'; if (true) { const name = 'Nicholas'; } console.lo

  • 浅谈js中的in-for循环

    浅谈js中的in-for循环 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </hea

  • 浅谈js中的三种继承方式及其优缺点

    第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr

  • 浅谈js中字符和数组一些基本算法题

    最近在刷 fcc的题,跟升级打怪一样,一关一关的过,还挺吸引我的.今天抽时间把 Basic Algorithm Scritping  这部分题做了,根据一些提示,还是比较简单的.有些题的处理方式 方法,我想值得借鉴.比如在项目中有时候要处理一个字符,如果想不到一些相关的方法,还挺费事的,所以,在此记录下来,如果以后遇到一些字符或者数组处理,可以来翻翻这篇文章,希望以此得到一些提示而不是去翻文档. 看到此博文的博友,有更好更简单的代码或者好的想法,请留言交流(我一直觉得只有学习别人的优秀代码才能进

  • 浅谈JS中的三种字符串连接方式及其性能比较

    工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法 用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法 以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);

  • 浅谈js中function的参数默认值

    func(string1,url,flag,icon),然后在另一个asp中调用它func(a,b),那flag和icon的值是什么,怎么定义默认值?谢谢! --默认值应该是 undefined 在函数内预设数可以用 arguments[i] i就是你参数的位置 第一个为0 所以要设定 flag 的默认值 则可以这么写 function func(string1,url,flag,icon){ if(!arguments[2]) flag = "123"; if(!arguments[

  • 浅谈JS中逗号运算符的用法

    注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScript做举例. 最近重新阅读JavaScript权威指南这本书,应该说很认真的阅读,于是便想把所学的东西多记录下来.后 面本人将逐步写上更多关于本书的文章. 本文的理论知识来自于JavaScript权威指南,我这里做一下整理,或者说叫笔记. 如果你的基础够好的话,完全理解不成问题,但是如果读得有些郁闷的话,可以加我的QQ:

  • 浅谈js中test()函数在正则中的使用

    test() 方法用于检测一个字符串是否匹配某个模式. 返回一个 Boolean 值,它指出在被查找的字符串中是否匹配给出的正则表达式. regexp.test(str) 参数 regexp 必选项.包含正则表达式模式或可用标志的正则表达式对象. str    必选项.要在其上测试查找的字符串. 说明 test 方法检查字符串是否与给出的正则表达式模式相匹配,如果是则返回 true,否则就返回 false. 每个正则表达式都有一个 lastIndex 属性,用于记录上一次匹配结束的位置. var

  • 浅谈js中的引用和复制(传值和传址)

    好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西 先讲一下很基础的东西,看看js中几种数据类型分别传的什么 引用:对象.数组.函数 复制:数字.布尔 字符串单独说明,因为它的特殊性,无法确定是传递引用还是复制数值(因为字符串的值是没法改变的,所以纠结这个问题也是没意义的)但是用于比较的时候显然是属于传值比较(稍后具体说比较的事) 下面讲一下在使用中的具体体现 最普通的使用就是赋值了 var a = 1; var b = a; //赋的是a的复制值 b ++; aler

  • 浅谈js中startsWith 函数不能在任何浏览器兼容的问题

    在做js测试的时候用到了startsWith函数,但是他并不是每个浏览器都有的,所以我们一般要重写一下这个函数,具体的用法可以稍微总结一下 在有些浏览器中他是undefined 所以我们可以这样的处理一下. if (typeof String.prototype.startsWith != 'function') { String.prototype.startsWith = function (prefix){ return this.slice(0, prefix.length) === p

随机推荐