javascript 变量声明 var,let,const 的区别

更新时间：2022年06月01日 08:52:38 作者：天行无忌

这篇文章主要介绍了javascript 变量声明 var,let,const 的区别,变量声明，每种编程语言必不可少的语法，在javascript中，变量的声明相对其他语言来说，算是比较简单的。更多相关的具体内容需要的小伙伴可以参考一下

作用域（Scope）是什么

作用域是程序的执行环境，它包含在当前位置可访问的变量和函数。在 ES5 语法中，有全局作用域和局部作用域，ES6 则新增了块级作用域。

全局作用域是最外层的作用域，在函数外面定义的变量属于全局作用域，可以被任何其他子作用域访问。在浏览器中，window 对象就是全局作用域。在编写前端代码过程中，其中有一条优化规则就是少使用全局变量，因为全局变量容易导致程序BUG，并且不容易查找。

局部作用域的基本单元是 function，只在函数体内有效。局部作用域是在函数内部的作用域。在局部作用域定义的变量只能在该作用域以及其子作用域被访问。

javascript中，变量声明使用 var、const、let来声明变量，var为ES5的语法，const和let为ES6之后的语法。ES6 的let和const为新引入的关键字，它们不会被提升，而且是块作用域。也就是说被大括号包围起来的区域声明的变量外部将不可访问。

下面我们就来说说各自的区别。

var 声明

var声明，为ES5的语法，var声明的变量总是归属于包含函数（即全局，如果在最顶层的话）。在 javaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是局部的）。可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

提升(Hoisting)

在编译过程中，将var和function的定义移动到他们作用域最前面的行为叫做提升。

整个函数定义会被提升。所以，可以在函数还未定义之前调用它，而不用担心找不到该函数。

console.log(toSquare(3)); // 9
function toSquare(n) {
    return n * n;
}

变量只会被部分提升。而且只有变量的声明会被提升，赋值不会动。

开发者可能最希望实现 for循环的块级作用域了，因为可以把随意声明的计数器变量限制在循环内部。

for (var i = 0; i < 10; i++) {
    console.log(i);
}

立即执行函数能够有效解决：

for (var i = 0; i < 10; ++i) {
    (function (value) {
        console.log(value);
    })(i);
}

再来看一个例子

(function () {
    var testValue = "hello";
    var testFunc = function () {
        console.log("just test");
    };
})();
console.log(window.testValue); // undefined
console.log(window.testFunc); // undefined

趣题：

var x = 10;
var y = 20;
[y, x] = [x, y];
console.log(x, y); // 20 10

let 声明

过早访问 let声明的引用导致的这个referenceerror叫做临时死亡区错误，在访问一个已经声明但还没有初始化的变量。创建一个块作用域。

let g1 = "global 1";
let g2 = "global 2";
{
    g1 = "new global 1";
    let g2 = "local global 2";
    console.log(g1); // new global 1
    console.log(g2); // local global 2
    console.log(g3); // ReferenceError: g3 is not defined
    let g3 = "I am not hoisted";
}

const 声明

const是对赋值做锁定，不对值的改变锁定。例如：数组、对象。一个常见的误解是：使用const声明的变量，其值不可更改，但是对于数组和对象，其值是可以更改的。

const tryMe = "initial assignment";
//下面重新赋值会导致程序错误
tryMe = "this has been reassigned"; // TypeError: Assignment to constant variable.

//对于数组是可以更改元素值
const array = ["Ted", "is", "awesome!"];
array[0] = "Barney";
array[3] = "Suit up!";
console.log(array); // [ 'Barney', 'is', 'awesome!', 'Suit up!' ]
//下面这样更改整个数组，相对于重新赋值，是错误的
array = ["Barney", "is", "awesome!", "Suit up!"];

// 同样对于对象
const airplane = {};
airplane.wings = 2;
airplane.passengers = 200;
console.log(airplane); // { wings: 2, passengers: 200 }

//下面是错误
airplane = { wings: 2, passengers: 200 };

对于支持ES6的语法，建议默认使用 const，在确实需要改变的变量声明使用 let, 这样可以在某种程度上实现代码的不可变。从而可以避免很多的问题的出现。

到此这篇关于javascript 变量声明 var,let,const 的区别的文章就介绍到这了,更多相关JS var,let,const 的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序获取头像和昵称的最新方法(直接用!)
微信小程序最新获取头像信息之前是使用open-dada获取微信头像和昵称,但是后面由于官网更新,此方法被收回了,所以不能使用此方法了,下面这篇文章主要给大家介绍了关于微信小程序获取头像和昵称的最新方法,本文介绍的方法可以直接拿来用,需要的朋友可以参考下
2023-05-05
详解JavaScript数组的操作大全
这篇文章主要给大家介绍js数组的操作，数组的创建，数组元素的发那个吻，数组元素的添加，数组元素的删除，数组的截取和合并，数组的拷贝，数组元素的排序，数组元素的字符串化等知识，对js数组的操作感兴趣的朋友可以参考下本篇文章
2015-10-10
js is_valid_filename验证文件名的函数
有时候我们需要对文件名进行控制，包括一些特殊命名的文件与特殊符号的文件名进程替换，那么就可以使用下面的函数
2017-07-07
如何在JavaScript中创建具有多个空格的字符串？
这篇文章主要介绍了如何在JavaScript中创建具有多个空格的字符串？,需要的朋友可以参考下
2020-02-02
详解JavaScript 浮点数运算的精度问题
这篇文章主要介绍了详解JavaScript 浮点数运算的精度问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
JavaScript 获取事件对象的注意点
平时我们获取事件对象一定要将firefox考虑进去。
2009-07-07
微信小程序日期时分组件(年月日时分)
这篇文章主要为大家详细介绍了微信小程序日期时分组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
HTML+CSS+JavaScript实现简单日历效果
这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript常用函数工具集：lao-utils
现在Javascript库海量，流行的也多，比如jQuery，YUI等，虽然功能强大，但也是不万能的，功能不可能涉及方方面面，这里给大家分享一个的JS库是对这些的补充，很多也比较实用，把应用到项目中中去也比较方面，这也是对工作的一些积累，也加深对知识的理解。
2016-03-03
JS字符串与二进制的相互转化实例代码详解
这篇文章主要介绍了JS字符串与二进制的相互转化 ,在文中给大家提到了Js之字符串和字节码之间的相互转换，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06