欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript 常量与变量,var、let、const的区别

程序员文章站 2022-03-13 19:51:20
常量什么是常量?常量表示一些固定不变的数据javascript中常量的分类整型常量:整型常量就是整数实型常量:实型常量就是小数字符串常量:用单引号或双引号括起来的内容布尔常量自定义常量:ES6新增的,const 常量名称 = 常量取值变量什么是变量?变量表示一些可以被修改的数据如何定义一个变量?传统格式:var 变量名称 = 变量取值ES6格式: let 变量名称 = 变量取值全局变量全局变量:定义在{}外面的变量作用范围:当前一行开始,知道文件结尾注意点...

常量

什么是常量?

常量表示一些固定不变的数据,const有点特殊,兼有变量和常量的特性

javascript中常量的分类

  • 整型常量:整型常量就是整数
  • 实型常量:实型常量就是小数
  • 字符串常量:用单引号或双引号括起来的内容
  • 布尔常量
  • 自定义常量:ES6新增的,const 常量名称 = 常量取值

变量

什么是变量?

变量表示一些可以被修改的数据

如何定义一个变量?

  • 传统格式:var 变量名称 = 变量取值
  • ES6格式: let 变量名称 = 变量取值

全局变量

  • 全局变量:定义在{}外面的变量
  • 作用范围:当前一行开始,知道文件结尾
  • 注意点: 通过var或let定义的全局变量,都是从当前一行开始,直到文件末尾都能使用
如何定义一个全局变量
	// 1、使用var + 变量名,在方法外部声明
    var msg = '你好';

    window.onload = function () {
        setMsg();
        getMsg();
    };

    function setMsg() {
        msg = '再见';
    }

    function getMsg() {
        console.log(msg); // 再见
    }


	// 2、在方法内部声明,不使用var关键字
    window.onload = function () {
        setMsg();
        getMsg();
    };

    function setMsg() {
        msg = '你好';
    }

    function getMsg() {
        console.log(msg); // 你好
    }


	// 3、使用window全局对象
    window.onload = function () {
        setMsg();
        getMsg();
    };

    function setMsg() {
        window.msg = '你好';
    }

    function getMsg() {
        console.log(msg); // 你好
    }

局部变量

  • 局部变量:定义在{}里面的变量
  • 作用范围:所在{}中
  • 注意点:
    在块级作用域中,通过var定义的局部变量和全局变量一样,能在后续使用
    在局部作用域(函数{}…)中,通过var定义的局部变量,只能在当前{}中使用
    通过let定义的局部变量,只能在当前{}中使用

var、let、const的区别

  • const 定义的常量, 必须初始化
  • var、let 定义的变量,可以不初始化
 	const a; // 直接报错

    var b;
    console.log(b); // undefined

    let c;
    console.log(c); // undefined
  • 通过var定义的变量,为全局变量,会挂载到window对象中
  • 通过let、const定义的变量,不会挂载到window对象中
 	var   a = 1;
    let   b = 2;
    const c = 3;

    console.log(window.a); // 1
    console.log(window.b); // undefined
    console.log(window.c); // undefined
  • let、var声明的变量,值和类型都可以改变
  • const声明的变量,不能修改值和类型
  • 对于复合类型的变量,如数组和对象,变量名不指向数据,而是指向数据所在的地址。const只是保证变量名指向的地址不变,并不保证该地址的数据不变
	var a = 1;
    let b = 2;
    const c = 3;
    
    a = [];
    b = []; 
    c = []; // 直接报错
    
	const arr = [];

    arr = [1, 2, 3]; // 直接报错,因为变量arr指向的地址不能发生改变,[]与[1, 2, 3]地址不一样

    arr[0] = 1;
    arr[1] = 2;
    arr[2] = 3;
    console.log(arr); // [1, 2, 3],因为变量arr指向的地址没变,只是改变了内部的数据

  • 传统的变量定义:后定义的同名变量会覆盖前面的变量
  • ES6变量定义:let 则会报错
	 var num = 123;
	 var num = 456;
	 console.log(num); // 456
 
	let i= 123;
    let i= 456;
    console.log(i); // Uncaught SyntaxError: Identifier 'num' has already been declared
  • 传统的变量定义:由于js的预定义,在解析js代码时,会将所有的变量定义放到最前(变量提升),打印结果undefined
  • ES6变量定义:let 、const则会报错
<script>
    console.log(a); // undefined
    var a = 1;

    console.log(b); // Uncaught ReferenceError: Cannot access 'i' before initialization
    let b = 1;

	console.log(c); // Uncaught ReferenceError: Cannot access 'i' before 		initialization
    const c = 1;
</script>
  • 在块级作用域中,通过var定义的局部变量和全局变量一样,能在后续使用
  • 通过let定义的局部变量,只能在当前{}中使用
	function sum(p1, p2) {
        var total = p1 + p2;

        for (var i=0; i<3; i++) {
            total++;
        }
        
        console.log(i);     // 3
        console.log(total); // 6
    }
    sum(1, 2);
    
	function sub(p1, p2) {
        let total = p1 - p2;

        for (let i=0; i<3; i++) {
            total++;
        }

        console.log(total); // 4
        console.log(i);     // Uncaught ReferenceError: i is not defined
    }
    sub(2, 1);

本文地址:https://blog.csdn.net/weixin_44240581/article/details/112530892

相关标签: JavaScript 前端