百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

ES6(二)let 和 const(es6 var let const区别)

myzbx 2025-07-03 18:18 4 浏览

let 命令

let 和 var 差不多,只是限制了有效范围。

先定义后使用

不管是什么编程语言,不管语法是否允许,都要秉承先定义,然后再使用的习惯,这样不会出幺蛾子。以前JavaScript比较随意,可以不定义直接使用,这样很容易乱,let 就要严格一些,let定义的变量,在定义之前是不可以用的,会报错。

console.log(v)
var v = 1;
console.log(a)
let a = 1;


运行结果:

var定义的变量不会报错,但是let定义的变量会报错。let更加的严谨。

let 的有效范围

let 只在代码块内部有效。我们举个例子来区分一下

function test() {
      let arr = [1,2,3]
      for (var i = 0; i<arr.length;i++) {
        console.log(i)
      }
      console.log(i) // 3
      for (let j = 0; j<arr.length;j++) {
        console.log(j)
      }
      console.log(j) // j is not defined
    }


运行结果:

var 定义的 i ,循环结束后依然可以访问,但是let 定义的 j,出了循环就无效了。

let的块级特性,写循环就更方便了,比如这样:

for (let j = 0; j<arr.length;j++) {
        console.log(j)
      }
      for (let j = 0; j<arr.length;j++) {
        console.log(j)
      }
      for (let j = 0; j<arr.length;j++) {
        console.log(j)
      }
      for (let j = 0; j<arr.length;j++) {
        console.log(j)
      }


多次循环都可以直接定义同样的变量名字,比用var方便多了。

只是现在似乎也不需要这么写循环了,ES6对数组又增加了很多新的方法。

let 的变量可以修改

let 定义的变量,不仅可以改值,还可以改类型,这一点继承了JavaScript的非fang常fei灵zi活wo 的特点。

      let aa = 0
      console.log(aa) //
      aa = 'aaa'
      console.log(aa) //
      aa = {name: 'ttt'}
      console.log(aa) //
      aa = [5,6,7]
      console.log(aa) //
      aa = function () {
        console.log('变成函数')
      }
      console.log(aa) //


运行结果:


如果不能改类型的话,可以使用const 来定义。

const 命令

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

只读常量吗?

看vue的代码里面,各种const定义的对象,哪个也不像不能改的呀。

其实这里不能改,指的是“地址(里的指针)”不能改。

只要保证地址不变,地址(里的指针)对应的内容是可以随意的。

那么具体怎么区分呢?

  • 先来看看简单类型
const aa = 1;
console.log(aa) //
aa = 2; // 报错
console.log(aa) //

运行结果:

修改简单类型的值的时候会报错。

  • 再来看看数组的情况
      const arr = [1,2,3]
      console.log(arr) // [1, 2, 3]
      arr.push(5)
      console.log(arr) // [1, 2, 3, 5]
      arr[0] = 111
      console.log(arr) // [111, 2, 3, 5]
      const arr2 = [4,5,...arr]
      console.log(arr2) // [4, 5, 111, 2, 3, 5]
      const arr3 = [7,8] // 7,8 被覆盖
      Object.assign(arr3, arr)
      console.log(arr3) // [111, 2, 3, 5]
      const arr4 = [7,8] //
      arr4 = [...arr] // 报错 
      console.log(arr4) //
      arr = [7,8,9] // 报错
      console.log(arr) //

运行结果如下:

数组自带的各种函数都是可以运行的,不会报错,但是直接给数组赋值就不行了。因为前者没有改变地址,只是在地址里面增加了新的数据,而后者是改了一个新的地址。

  • 再看看对象的情况
      const foo = {title: '我是标题'}
      console.log(foo) //
      foo.name = '新名称'
      console.log(foo) // 可以修改属性值
      foo.title = '新标题'
      console.log(foo) // 可以增加属性
      Object.assign(foo, {age:65})
      console.log(foo) // 合并对象
      foo = {newTitle: '这个就不行了'} // 报错

运行结果:

只要地址(里的指针)没变,那么就可以随心所欲了。

参考书目

《ES6 标准入门》第3版

相关推荐

C语言速成之数组:C语言数据处理的核心武器,你真的玩透了吗?

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、鸿蒙、嵌入式、人工智能等开发,专注于程序员成长的那点儿事,希望在成长的路上有你相伴!君志所向,一往无前!数组:C语言数据处理...

ES6史上最全数JS数组方法合集-02-数组操作

数组生成array.ofletres=Array.of(1,2,3)console.log(res)//[1,2,3]下标定位indexOf用于查找数组中是否存在某个值,如果存...

前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!

在前端开发的江湖里,JavaScript就是我们手中的“绝世宝剑”。但为啥别人用剑就能轻松斩敌,你的代码却总拖后腿,页面加载慢、交互卡顿?别着急!今天带来8个超实用的JavaScript实...

12种JavaScript中最常用的数组操作整理汇总

数组是最常见的数据结构之一,我们需要绝对自信地使用它。在这里,我将列出JavaScript中最重要的几个数组常用操作片段,包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可...

手把手教你在Webpack写一个Loader

前言有的时候,你可能在从零搭建Webpack项目很熟悉,配置过各种loader,面试官在Webpack方面问你,是否自己实现过一个loader?如果没有去了解过如果去实现,确实有点尴尬,其...

const关键字到底该什么用?(可以用const关键字定义变量吗)

文|守望先生经授权转载自公众号编程珠玑(id:shouwangxiansheng)前言我们都知道使用const关键字限定一个变量为只读,但它是真正意义上的只读吗?实际中又该如何使用const关键字...

“JavaScript变量声明三兄弟,你真的会用吗?

在JavaScript中,var、let和const是声明变量的关键字,它们在作用域、变量提升、重复声明和重新赋值等方面有显著区别。以下是它们的相同点和不同点,并通过代码示例详细说明。一、相同点声明变...

ES6(二)let 和 const(es6 var let const区别)

let命令let和var差不多,只是限制了有效范围。先定义后使用不管是什么编程语言,不管语法是否允许,都要秉承先定义,然后再使用的习惯,这样不会出幺蛾子。以前JavaScript比较随意,...

js 里面 let 和 const的区别(js中的let)

在JavaScript(包括Vue、Node.js、前端脚本等)中,const和let是用于声明变量的两种方式,它们的主要区别如下:constvslet的区别特性constlet是否...

JDK21新特性:Sequenced Collections

SequencedCollectionsJDK21在JEP431提出了有序集合(SequencedCollections)。引入新的接口来表示有序集合。这样的集合都有一个明确的第一个元素、第二个...

动态编程基础——第 2 部分(动态编程是什么)

有两种方法可以使用动态规划来解决问题。在这篇文章中,我们将了解制表法。请参阅我的动态编程基础——第1部分了解记忆方法。记忆制表什么是动态规划?它是一种简单递归的优化技术。它大大减少了解决给定...

Lambda 函数,你真的的了解吗(lambda函数用法)

什么是lambda函数lambda函数是一个匿名函数,这意味着与其他函数不同,它们没有名称。这是一个函数,它添加两个数字,写成一个命名函数,可以按其名称调用它们:defadd(x,y):...

JavaScript 数组操作方法大全(js数组操作的常用方法有哪些)

数组操作是JavaScript中非常重要也非常常用的技巧。本文整理了常用的数组操作方法(包括ES6的map、forEach、every、some、filter、find、from、of等)...

系列专栏(六):解构赋值(解构赋值默认值)

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...

js列表遍历方法解读(js遍历链表)

JavaScript提供了多种遍历数组(或列表)的方法。以下是一些常用的方法及其解读:for循环:vararray=[1,2,3,4,5];for(vari=0;...