ES6变量声明（一）

ES6

代码在浏览器环境运行！代码在浏览器环境运行！代码在浏览器环境运行！

我用的google！！！

变量声明 let

最最最基本用法

1
2
let a = 11;
alert(a);  // 11

let与var的区别 

1
2
3
4
5
//声明后未初始化,输出相同.
var a;
let b;
console.log(a); // undefined
console.log(b); // undefined

使用在声明前的异同

1
2
3
4
5
console.log(a); //输出undefined  ==> 变量提升
var a= 'test var';

console.log(b); //直接报错：ReferenceError: b is not defined
let b = 'test let';

重复声明问题 在相同的函数或块作用域内重新声明同一个变量会引发SyntaxError

1
2
3
4
5
6
7
var a =5;
var a =12;
console.log(a);//必须注释下面的其中一个let声明 

let b = 3;
let b = 666;  //报错 Identifier 'b' has already been declared 
console.log(b)

作用域问题

除了全局作用域和函数作用域,es6新增了块级作用域，即用{ }包裹的代码块。

块级作用域

内层变量和外层变量的值互不影响。内层无法读取外层，外层无法读取内层。

作用域问题

问题1： 如果是let声明的初始化表达式 在for循环外 访问i会报错 如果var声明的就不会报错

1
2
3
4
5
for(let i=0; i<10; i++){

}
//报错
alert(i);

问题2： 如果是let声明的初始化表达式 在for循环外 访问i会报错 如果var声明的就不会报错

1
2
3
4
5
6
7
{
  console.log(a); //报错
    
  {let a=12;}
    
  console.log(a) //报错
}

问题3： 事件中的索引问题 ==>简化内部函数代码

工作原理是因为（匿名）内部函数的3个实例引用了变量i的3个不同实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <script>
            var aBtn=document.querySelectorAll('input');
            for(let i=0; i<aBtn.length; i++){
                aBtn[i].onclick=function(){
                    alert(i);  //弹出对应的  索引   
                    //如果换成var声明  就会弹出 aBtn.length ==> 3
                };
            }
    </script>
</head>
<body>
    <input type="button" value="aaa">
    <input type="button" value="bbb">
    <input type="button" value="ccc">
</body>

问题4：在程序或者函数的顶层，let并不会像var一样在全局对象上创造一个属性

1
2
3
4
var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

const 常量

特性

  • 声明时就需要赋值，否则报错；一旦声明不可重新赋值，否则报错；
  • 块级作用域
  • 不存在变量提升；
  • 存在暂时性死区；
  • 声明引用类型常量时，const保存的是地址，常量中的属性还是可以变的；

块级作用域

1
2
3
4
5
if(true){
    const a=12;
}
//报错  常量的作用域
alert(a);

重复赋值

1
2
3
const a=12;
a=5;
alert(a); // TypeError:Assignment to constant variable.

未初始化就使用

1
2
const a;
alert(a); // Uncaught SyntaxError: Missing initializer in const declaration