当前位置:首页 > 技术分析 > 正文内容

ES6(二)let 和 const(es6let和const区别)

ruisui885个月前 (02-03)技术分析21

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版

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/677.html

分享给朋友:

“ES6(二)let 和 const(es6let和const区别)” 的相关文章

Linux发行版需要杀软吗?卡巴斯基推出免费KVRT病毒扫描清理工具

IT之家 6 月 4 日消息,你认为使用 Linux 发行版,需要杀毒软件吗?或许很多用户认为 Linux 发行版偏小众,因此受到黑客攻击的风险也相对较小,不过卡巴斯基并不这么认为,近期推出了适用于 Linux 平台的杀毒软件。最新上线的 Linux 版本 Kaspersky Virus Remov...

学会使用Vue JSX,一车老干妈都是你的

作者:子君转发链接:https://mp.weixin.qq.com/s/eAOivpHeowLShfwPfW8-BA?君自前端来,应知前端事。需求时时变,bug改不完。?连续几篇文章,每篇都有女神,被老铁给吐槽了,今天不提了女神了,反正女神都是别人的(扎心了)。这两天小编看了腾讯与老干妈的事情,晚...

理解virt、res、shr之间的关系(linux系统篇)

前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历,或者被问到这样的问题——你的程序在运行时占用了多少内存(物理内存)?通常我们可以通过top命令查看进程占用了多少内存。这里我们可以看到VIRT、RES和SHR三个重要的指标,他们分别代表什么意思呢?这是本文需要跟大家一起探讨的问题。...

抖音 Android 性能优化系列:启动优化实践

启动性能是 APP 使用体验的门面,启动过程耗时较长很可能使用户削减使用 APP 的兴趣,抖音通过对启动性能做劣化实验也验证了其对于业务指标有显著影响。抖音有数亿的日活,启动耗时几百毫秒的增长就可能带来成千上万用户的留存缩减,因此,启动性能的优化成为了抖音 Android 基础技术团队在体验优化方向...

明日9时,成绩公布!

甘肃省2023年普通高校毕业生基层服务项目(三支一扶、特岗计划、西部计划)考试成绩将于7月12日公布甘肃省2023年普通高校毕业生基层服务项目(三支一扶、特岗计划、西部计划)考试成绩将于2023年7月12日9:00开通查询,考生可登录“甘肃人事考试网”,点击“成绩查询”栏目查询本人成绩。网址:htt...

VUE高效开发 - 脚手架

哈喽哈喽 大家好,今天跟大家分享一下关于vue开发的一些小技巧。目前前端最主流的两个 开发 模式 就是 react 和 vue 。他们的特点显明,一个是类似 jsp的jsx语言,js动态拼凑html片段,一个是模板与控制分开,各有千秋,都有大量的支持者。今天主要给大家介绍一个基于vue的项目,从哪些...