有关ES5/ES6的小补充

let/var


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<body>
<button>按钮1button>
<button>按钮2button>
<button>按钮3button>
<button>按钮4button>
<button>按钮5button>

body>
<script>
  //1.变量作用域:变量在什么范围是可用的
  {
    var name = 'why';
    console.log(name);//why
  }
  console.log(name);//why

  //2.没有块级作用域引起的问题 if都没有作用域
  var func;
  if (true){
    var name = 'why';
    func = function(){
      console.log(name);
    }
    name = 'kobe'
    func();
  }
  console.log(name);//kobe

  // 3.没有块级作用域引起的问题 for没有作用域
  var btns = document.getElementsByTagName('button');
  for(var i=0;i<btns.length;i++){
    btns[i].addEventListener('click',function(){
      console.log('第'+i +'个按钮被点击'); 
    })
  }
    
    
  //解决 闭包 因为函数是一个作用域
  var btns = document.getElementsByTagName('button');
  for(var i=0;i<btns.length;i++){
      (function(i){  
      //立即调用函数,其实在传递了i之后,此时的i不会因为外界i的改变而改变,
       //实际可以看成创建了12345五个相同的函数
        btns[i].addEventListener('click',function(){  // 将i存入函数作用域中
        console.log('第'+i +'个按钮被点击');  //首先会在自己的作用域找i,找不到再去window找
      })})(i)}
    
    
  //ES6中let加入了for和if的块级作用域
  const btns = document.getElementsByTagName('button');
  for(let i=0;i<btns.length;i++){
    btns[i].addEventListener('click',function(){
      console.log('第'+i +'个按钮被点击');
    })
  }//这个括号有作用域了,相当于整个大括号执行了5次

//ES5(回调之后i已经被后面的改变了) 
//  ES6(回调之后还未改变)
  {
    i=0;
    btns[i].addEventListener('click',function(){
      console.log('第'+i +'个按钮被点击');
    })
  }
  {
    i=1;
    btns[i].addEventListener('click',function(){
      console.log('第'+i +'个按钮被点击');
    })
  }
  {
    i=2;
    btns[i].addEventListener('click',function(){
      console.log('第'+i +'个按钮被点击');
    })
  }
  {
    i=3
    btns[i].addEventListener('click',function(){
      console.log('第'+i +'个按钮被点击');
    })
  }
  {
    i=4;
    btns[i].addEventListener('click',function(){
      console.log('第'+i +'个按钮被点击');
    })
  }


script>
html>

const

主要作用就是将某个变量修饰为常量,不可以再次赋值,可以使用其来保证数据的安全性。在ES6开发中,优先使用const,只有需要改变某一个标识符的时候才使用let()

//注意1:一旦给const修饰的标识符被赋值之后不能修改
const name="why";
name="xiix";   //会报错

//注意2:在使用const定义标识符,必须先赋值
const name; //报错

//注意点3:常量的含义是指指向的对象不能修改,但是可以改变对象的内部属性
const obj = {
    name:'why',
    age:'18',
    height:'180',
}
obj={};//报错
obj.name = 'red';
obj.age = '19'; //正常,内部属性被修改

ES6对象增强语法

//属性的增强写法
const name='why';
const age=18;
const height=1.88;
const obj={
name,age,height}   //会把变量名作为key 具体的值作为value
//函数的增强写法
//ES5
const obj={
run:function(){},
eat:function(){},
}
//ES6
const obj={
run(){},
eat(){}}

你可能感兴趣的:(vue,vue)