美文网首页
ES6 变量

ES6 变量

作者: 郑宋君 | 来源:发表于2018-11-09 13:01 被阅读0次

关于es6的变量声明新增了let,const的声明方式
因为原本的js的var声明方式太过随意,会有很多不合理的地方,比如
1.可以重复声明
2.无法限制修改
3.没有块级作用域
4.变量提升
这些问题在正常项目开发的时候会造成很多隐藏的bug,而es6中的新增的let和const声明方式就可以解决这些问题

let 不能重复声明  变量可以修改  块级作用域
const 不能重复声明 常量不可以修改 块级作用域

首先我们查看第一个特性,不能重复声明

let a = 5
let a = 'hello world'
//这个时候就可以看到浏览器就直接报错了

在声明方面,const的是不仅仅不允许重复声明,而且不允许修改值,我们可以看作赋值了一个常量

const a = 1;
a = 'hello wolrd'
当然,这个时候浏览器也会报错

但是如果const赋值的是一个对象或者数组的话,我们可以使用数组的方法和对象的方法去修改这个常量,但是不能直接赋值修改
条件虽然严格了一点,但是他的用法更加好用了,比如说我有以下的需求

//点击每个button出现了对应的编号
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
var btn = document.querySelectorAll('button')
for(var i = 0 ; i<button.length;i++){
  btn[i].onclick = function(){
  console.log(i)
}
}
</script>
//这个时候我们控制台打印无论你点击的是哪个button,打印的肯定是4 

这个时候如果我们想实现需求必须

for(var i = 0 ; i<button.length;i++){
  (function(i){
      btn[i].onclick = function(){
      console.log(i)
    }  
  })(i)
}

这样写太过麻烦,我们可以使用let命名来解决这个问题

for(let i = 0 ; i<button.length;i++){
  btn[i].onclick = function(){
  console.log(i)
}
//这样就可以满足我们的需求了

上面解决的就是我们说的块级作用域的问题,在带有{}中我们都可以把他看作一个块级作用域,在这个作用域里面,i的值只能被内部获取,不能被外部获取

相关文章

  • ES6常变量关键字

    ES6之前如何定义变量 可以重复定义变量,会覆盖 会对变量进行预解析 ES6之后如何定义变量 不允许重定义变量 没...

  • 16-JavaScript-ES6语法

    ES6常量和变量关键字 ES6定义变量 注意点:ES6开始新增了一种作用域, 叫做代码块通过let定义的变量受到代...

  • es6重点介绍

    ES6 的变量声明 ES6 中新增了 let 和 const 来定义变量: var:ES5 和 ES6中,定义全局...

  • ES6 笔记(常量&&变量)

    ES6 笔记(常量&&变量) 变量&&常量 新特性 ES6 新增了let命令,用来声明变量。它的用法类似于var,...

  • js 变量提升(3)

    ### ES6中let创建的变量不存在变量提升 /* * 在ES6中基于let或者CONST等方式创建变量或者函数...

  • ES6语法

    ES6语法 1.ES5和ES6声明变量的方式对比 ES5中声明变量的方式: ES6中声明变量的方式: 2. var...

  • ECMAScript6--let、const

    在es6之前用var定义变量。es6中新增了let、const 变量声明提升 所谓变量声明提升指的是,用var定义...

  • 『ES6脚丫系列』let+const+变量+变量作用域+块作用域

    『ES6脚丫系列』let+const+变量+变量作用域+块作用域+变量声明提升 一、let命令 【01】ES6新加...

  • 1.JavaScript中关于定义变量以及变量作用域

    1.在JavaScript中定义变量有两种方式 Es6之前:var 变量名称;Es6开始:let 变量名称; 2....

  • ES6变量的两种命名方式

    ES6变量的两种命名方式# es6是ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言...

网友评论

      本文标题:ES6 变量

      本文链接:https://www.haomeiwen.com/subject/nuznxqtx.html