注:学习一下JavaScript的ES6语法!每天总结学习内容!
一:基础语法学习
1:ES6 新增了let和const
命令,用来声明变量和常量。它的用法类似于var
,但是let所声明的变量,只在let
命令所在的代码块内有效,而我们平时用的var是全局都有效,看以下代码:
$(document).ready(function() { { var a = 1; let b = 2; } console.log(a); //打印:1 console.log(b); //报错:b is not defined })
注:上面代码在代码块之中,分别用var和let
声明了两个变量。然后在代码块之外调用这两个变量,结果let
声明的变量报错,var
声明的变量返回了正确的值。这表明,let
声明的变量只在它所在的代码块有效。
2:关于let和var的经典问题(在循环内用var和let声明的区别)首先定义三个按钮如下:
<input type="button" value="按钮0" /> <input type="button" value="按钮1" /> <input type="button" value="按钮2" />
注:我想做的事情很简单,就是点击按钮0弹出0,点击按钮1弹出1,点击按钮2就弹出2,就这么简单!然后就直接写下以下JavaScript代码:
$(document).ready(function() { let btnAll = $(":input[type='button']"); //获取所有的按钮 for (var i = 0; i < btnAll.length; i++) { btnAll[i].onclick = function() { alert(i); } } })
想的还是非常完美的!但三次弹出的都是3,理想很美好,现实很残酷啊............................................................................................................
但是将var改为let就得到我想要的结果!为什么会这样呢?再来说一下var和let吧:
ES5中的var:它的作用域是函数级别的,也就是在函数里定义一个i,在里边任何一个地方都可以访问,甭管循环里边还是外边,都可以访问
ES6中的let:它是块级作用就级别的,也就是在当前代码块内有效,块简单就可以理解为一对花括号
个人理解:在上边js代码中,整个ready空间中就一个i,i的值一旦改变,那就全部改变,也就是说无论循环多少次,都是一个i的值在发生改变,反而用let为什么就可以呢?因为let是块级的,也就是说,它只在for循环内有效,每次循环,都有一个新的i产生,循环多少次,就有多少新的i产生!所以:用var声明,永远只有一个i,最后弹出的就是循环完i最后的值;用let声明,每次弹出的都是新的i,值就是当前循环i的值!
明天接着学习,接着补充!