js：let和var区别，js原生的dom选择器

今天就写点简单的吧

1.let和var区别
var 声明的变量总是全局变量，不论你的变量是在哪声明的，即使你在一个判断条件声明，但是在全局永远能访问到，而es6的let的出现其实是纠正了这个坑！let声明，在哪声明，只作用于它所在的作用域环境内！
来看例子吧
`var a=1
if(true){
var a=2
console.log(a) //输出2
}
console.log(a) //输出2

看看let声明会出现什么奇迹?

let a=1
if(true){
  let a=2
  console.log(a) //输出2
}
console.log(a) //输出1

看见没用var声明的对象永远都是全局的作用域，而用let声明，在那个上下文声明，只有在那个上下文的作用域中起作用！例子中我们在判断条件位true的时候声明用let 声明，那声明的变量只在这个条件里起作用。这就是let的块级作用域！其实是弥补了原来var声明的缺陷

来我们再看一个场景你用for循环去遍历一个数组对象，并且给对象添加一个方法，看例子

//html
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

//css
li{height:40px;border:1px solid #f80;}

//js
 var lists=document.querySelectorAll("li") //这个获取dom的方法只兼容ie9和ie9以上！后面会讲
 for(var a=0;a<lists.length;a++){
    lists[a].addEventListener("click",function(){
       alert("我是第"+a+"li")
    })
 }
 console.log(a) //输出为4 我们想声明a变量只在for循环中，然而你看看！这个a变量的作用域是全局的！
 //我们是想给每个li加一个点击事件并且弹出自己是第几个li，然后我们这样做了，于是乎我们运行代码！
 我靠！这我不管点击那个li都会弹出：“我是第4个li”! 这我们很震惊！
 注意！！！我们在for循环的时候我们声明了一个变量 var a=0 ,由于用var声明的变量作用域永远都是全局的，所有在那个for循环之后，我们a已经变成了4,然后保存在内存中，这样你无论点击那个里面的a永远都是4
 如果我们把var a=0换成 let a=0 ；结果就和大家预期的一样，你点击那个就弹出第几个li，因为这let声明a只在for循环中起作用

讲讲这个获取元素选择器获取dom的这家伙 :
document.querySelectorAll(“#box”) //这个获取dom和jquey的获取dom一样，可以直接用元素选择器，但是注意这个获取的是一个数组元素节点。所以在使用的时候请这样！

var obox=document.querySelectorAll("#box")[0] //一定要注意哦！网上有些教程讲很粗的！和没讲一样！ 如果你html中有多个id=box的元素节点
  obox.style.display="none"

document.querySelector(“#box”) //这个获取的只是一个元素对象，如果html中有两个id=box的元素节点，那么只获取到第一个！

好了今天就说这些把，不对忘了再说一次document.querySelectorAll只兼容ie9和ie9以上！

js：let和var区别，js原生的dom选择器

猜你喜欢