【JS ES6】const var let 一文搞懂声明关键字所有的知识点

简介: 【JS ES6】const var let 一文搞懂声明关键字所有的知识点

         声明    

               var + 变量名 = 值。

               const+ 常量名 = 值。

               let + 变量名 = 值。

       声明技巧

               多个变量的不同值

var a = 1, b = 2,  c = 3

image.gif

               多个变量的相同值

var = a = b = c = 1;

image.gif

       变量提升

               var 存在变量提升

               变量提升 就是 把var定义内容的过程向上移动,函数自身整体也存在提升。

console.log(a);   // 会显示undefined  定义了但没有赋值
var a = 24;
变量提升后
var;
console.log(a);
a = 4;

image.gif

              let不存在变量提升

console.log(a);   // 会报错  显示未定义
let a = 24;

image.gif

      重复声明

       var

可以进行多次重复定义并赋值,还可以后定义。

       

var a = 5;
var a = 28;//第二次重新定义并赋值
console.log(a);   // 28

image.gif

function func(a) {
    var a = 1;       //后用var定义a
    console.log(a);   // 1
}
func(24);

image.gif

       let

 let不允许重复定义,但可以多次赋值,let必须先定义声明 后使用。

let a = 10;
let a = 14;
console.log(a);   // 报错
let a = 10;
 a = 14;
console.log(a); //14

image.gif

function func(a) {
    let a = 1;
    console.log(a);   // 报错   不可以后定义
}
func(24);

image.gif

const

const不允许重复声明 或赋值

const a = 1;
a = 2;//报错不允许二次赋值
const a ;//报错 同样不允许重新定义

image.gif

临时性死区

只要作用域内存在 let、const,它们所声明的变量或常量就自动 “绑定” 这个区域,不再受到外部作用域的影响。

let a = 2;     //在相同作用域下 不允许二次let声明
function func() {
    console.log(a);   // 报错
    let a = 1;          //在作用域中出现了 let const声明 会将这个变量绑定到函数中,阻碍外部同名变量进入,会往上寻找,变量,但不会跳出函数。
}
func();

image.gif

使用 let 定义变量 务必要先定义后使用

定义函数作用域问题

       相同点

访问外部全局变量

var a = "xiao xie";
        function func() {
            console.log(a);
        }
        func();
        console.log(a);
        const b = "xiao xie";
        function func1() {
            console.log(b);
        }
        func1();
        console.log(b);
        let c = "xiao xie";
        function func2() {
            console.log(c);
        }
        func2();
        console.log(c);

image.gif

image.gif编辑

都可以在函数内部 访问外部变量(没产生暂时性死区)

重新声明变量

var a = "xiao xie";
        function func() {
            var a = "xiao xie000";
            console.log(a);
        }
        func();
        console.log(a);

image.gif

image.gif编辑

在函数内部重新定义并赋值了a,相当于重新开了一块儿内存,这个时候就存在了两个a

所以打印了两个不相同的值

不重新声明

var a = "xiao xie";
        function func() {
            a = "xiao xie000";
            console.log(a);
        }
        func();
        console.log(a);

image.gif

image.gif编辑

在函数内部 不声明直接赋值 会修改原来a地址的值。所以打印了两个相同的值。如果在全局范围内找不到同名变量,自身则就变成了一个全局变量a(全局污染问题)。

也就是说 变量在内部声明 是私有的 在内部不声明则是全局的,(共同点)

全局污染问题

上面已经提到过了这个问题,在实际开发中,我们应该严格遵守代码规范,不能图方便,不要不声明变量,就直接使用,不然会在后续书写问题引发安全隐患,为了避免问题,可以开启严格模式进行书写提示。

"use strict";
        function func() {
             a = "xiao xie000";
            console.log(a);
        }
        func();
        console.log(a);

image.gif

image.gif编辑

由于a没有定义 所以会报错 使用了 "use strict"; 严格模式后,就可以避免这种代码规范问题。

块级作用域

var a = 8;
        for (var a = 0; a < 3; a++) {
            console.log(a);
        }
        console.log(a);

image.gif

image.gif编辑

var  没有块级作用域,所以会覆盖原来a变量的内容。

let a = 8;
        for (let a = 0; a < 3; a++) {
            console.log(a);
        }
        console.log(a);

image.gif

image.gif编辑

外面的a 没有被影响 任然原样进行输出。

除了函数和对象的以外的{}都是块级作用域

常量的知识点

我们之前说了 常量实不允许二次定义和赋值的,不过并不是所有的地方都不可以。

其实常量不能重新赋值,指的是不能改变指定的内存地址,我们可以使用引用,改变引用里的其他东西

比如说对象里的键名键值,或者是数组同样可以改变。

const a = {};
        a.b = [5, 4, 3, 2, 1];
        console.log(a);

image.gif

image.gif编辑

在不同作用域中,我们可以进行同名常量的声明。

const a = [5, 4, 3, 2, 1];
        {
            const a = [5, 4, 3, 2, 1];
        }

image.gif

引用类型 只要内存地址不变  我们可以改值,在不同作用域中可以进行重复定义、

var全局污染

当我们使用var定义全局变量时,会产生全局污染,这是var声明关键字本身的一个大问题,

全局污染是这样的

var screenLeft = 0
        console.log(window.screenLeft);

image.gif

image.gif编辑

它会影响window对象里的关键字效果。使用let则不会影响

let screenLeft = 0
        console.log(window.screenLeft);

image.gif

image.gif编辑


目录
相关文章
|
2月前
|
设计模式 JavaScript 前端开发
JavaScript进阶挑战:巩固核心知识点
以上内容涵盖了从基础到进阶水平所需掌握内容,在日常工作中需要持续实践和深入学习才能真正精通这些知译点。
140 12
|
8月前
|
存储 前端开发 JavaScript
JavaScript的重要知识点
以上就是JavaScript的一些重要知识点。学习JavaScript需要理解和掌握这些知识点,才能编写出高效、可维护的代码。同时,还需要不断实践,通过编写项目来提高编程技能。
158 14
|
10月前
|
JavaScript 前端开发 安全
【JavaScript】深入理解 let、var 和 const
掌握这些关键字的使用可以提高代码的可读性和可维护性,避免潜在的变量提升和作用域问题。希望本文能帮助您更好地理解和应用 JavaScript 中的变量声明方式,编写出更高质量的代码。
345 20
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
264 58
|
9月前
|
JavaScript 前端开发 网络架构
ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南
解构赋值是一个强大且灵活的工具,它使得从数组和对象中提取数据变得更加简单和直观。通过掌握解构赋值的基本语法和实践,你可以写出更加简洁、可读性更强的代码。在实际项目中,解构赋值广泛应用于函数参数处理、变量交换、嵌套结构操作等场景,极大地提升了代码的灵活性和简洁度。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
192 5
|
前端开发 JavaScript 开发者
除了 async/await 关键字,还有哪些方式可以在 JavaScript 中实现异步编程?
【10月更文挑战第30天】这些异步编程方式在不同的场景和需求下各有优劣,开发者可以根据具体的项目情况选择合适的方式来实现异步编程,以达到高效、可读和易于维护的代码效果。
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
348 0
|
JavaScript 前端开发 数据安全/隐私保护
JavaScript_知识点梳理note1
参考文献《JavaWeb 从入门到精通》 1.JavaScript的语法 JavaScript区分大小写 每行结尾的分号可有可无 变量是弱类型的 在定义变量时,只使用var运算符就可以将变量初始化为任意的值。
957 0
|
JavaScript 前端开发
JAVASCRIPT的一些知识点梳理
春节闲点,可以安心的梳理一下以前不是很清楚的东东。。 看的是以下几个URL: http://web.jobbole.com/82520/ http://blog.csdn.net/luoweifu/article/details/41466537 http://javascriptissexy.
1400 0