html中let函数,浅谈JS中const、let与var的区别

在JavaScript中有三种声明变量的方式:var、let、const。下面本篇文章就来给大家介绍一下js中三种定义变量的方式const, var, let的区别。

1.声明后未赋值，表现相同//一个例子

'use strict';

(function() {

var varTest;

let letTest;

console.log(varTest); //输出undefined

console.log(letTest); //输出undefined

}());

2.使用未声明的变量，表现不同//一个例子

(function() {

console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)

console.log(letTest); //直接报错：ReferenceError: letTest is not defined

var varTest = 'test var OK.';

let letTest = 'test let OK.';

}());

3.重复声明同一个变量时，表现不同//一个例子

'use strict';

(function() {

var varTest = 'test var OK.';

let letTest = 'test let OK.';

var varTest = 'varTest changed.';

let letTest = 'letTest changed.';

//直接报错：SyntaxError: Identifier 'letTest' has already been declared

console.log(varTest);

//输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)

console.log(letTest);

}());

4.变量作用范围，表现不同//一个例子

'use strict';

(function() {

var varTest = 'test var OK.';

let letTest = 'test let OK.';

{

var varTest = 'varTest changed.';

let letTest = 'letTest changed.';

}

console.log(varTest);

//输出"varTest changed."，内部"{}"中声明的varTest变量覆盖外部的letTest声明

console.log(letTest);

//输出"test let OK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量

}());

5.const定义的变量不可以修改，而且必须初始化//一个例子

const b = 2;//正确

// const b;//错误，必须初始化

console.log('函数外const定义b：' + b);//有输出值

// b = 5;

// console.log('函数外修改const定义b：' + b);//无法输出

6.var定义的变量可以修改，如果不初始化会输出undefined，不会报错var a = 1;

// var a;//不会报错

console.log('函数外var定义a：' + a);//可以输出a=1

function change(){

a = 4;

console.log('函数内var定义a：' + a);//可以输出a=4

}

change();

console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4

7.let是块级作用域，函数内部使用let定义后，对函数外部无影响let c = 3;

console.log('函数外let定义c：' + c);//输出c=3

function change(){

let c = 6;

console.log('函数内let定义c：' + c);//输出c=6

}

change();

console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3

学习到此结束！

更多web前端开发知识，请查阅 HTML中文网 ！！