[ES6语法1]let和const

最新推荐文章于 2023-08-13 12:11:40 发布
灵眼儿上方
最新推荐文章于 2023-08-13 12:11:40 发布
阅读量283
点赞数
分类专栏： WEB 文章标签： es6
WEB 专栏收录该内容
38 篇文章 0 订阅
订阅专栏
/**学习es6第一篇:let和const命令
 * Created by liyanq on 17/6/5.
 * http://es6.ruanyifeng.com/#docs/let
 */
/*summary
 * 1,let是用来声明变量,不是常量(swift是常量),但是所声明的变量,只在let命令所在的代码块内有效。
 * 2,不存在变量提升
 * */

for (let i = 0; i < 3; i++) {//块级的i
}
//console.log(i);//ReferenceError: i is not defined;//和以前不一样了哦～

var a = [];
for (var i = 0; i < 10; i++) {//全局的i
  a[i] = function () {
    console.log(i);
  }
}
a[6]();//10
for (let i = 0; i < 10; i++) {//块级的i,覆盖了全局的i
  a[i] = function () {
    console.log(i);
  }
}
a[6]();//6
for (let i = 0; i < 1; i++) {
  let i = "abc";
  console.log(i);//abc
}
//-----let不存在变量提升--------//
/*可放开
 console.log(foo);//undefined
 var foo = "123";

 console.log(bar);
 let bar = "bar";//ReferenceError: bar is not defined*/
//-----暂时性死区----------//
/*只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
 即使是在后面let声明,ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,
 从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。*/

/*可放开
 var tmp = 123;
 {
 tmp = "abc";//ReferenceError: tmp is not defined
 let tmp = 456;
 }
 */

/*可放开
 function bar(x = y, y = 2) {//ReferenceError: y is not defined
 return [x, y]
 }
 console.log(bar());
 */
//-------不允许重复声明------//
//-------为什么需要块级作用域？---------//

/*场景1，利用了var变量的提升，导致内层的tmp覆盖了外层的tmp*/

/*可放开
 var tmp = "hello";
 function show() {
 console.log(tmp);//undefined
 if (tmp == "hello"){
 var tmp = "world";
 }
 }
 show();
 */

/*场景2，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量*/

/*可放开
 var s = 'hello';
 for (var ii = 0; ii < s.length; ii++) {

 }
 console.log(ii); // 5
 */

//------------ES6 的块级作用域----------//
/*1,外层代码块不受内层代码块的影响
 * 2,内层作用域可以定义外层作用域的同名变量。
 * 3,ES5 只有全局作用域和函数作用域
 * 4,块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。*/

/*可放开
 function show() {
 let tmp = "123";
 {
 let tmp = 456;//如果改成var声明的话，会提示声明冲突。var在函数里面声明就是函数级别的变量
 }
 console.log(tmp);
 }
 show();
 */
//-----块级作用域与函数声明------//
/*1,ES6 引入了块级作用域，明确允许在块级作用域之中声明函数
 * 2,ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。*/


/*可放开
function fa() {
  console.log('I am outside!');
}
(function () {
  if (false) {//因为false，声明了函数，没定义
    // 重复声明一次函数f
    function fa() {
      console.log('I am inside!');
    }
  }
  fa();//TypeError: fa is not a function
})();*/

/*ES6在附录B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。
  1,允许在块级作用域内声明函数。
  2,函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
  3,同时，函数声明还会提升到所在的块级作用域的头部。
  上面里层的fa明显提升了了作用域,看来node环境就是浏览器的环境
  */

/*function fa1() {
  console.log('I am outside!');
}
(function () {
  if (false) {
    // 重复声明一次函数f
    let fa1 = function () {
      console.log('I am inside!');
    }
  }
  fa1();//I am outside!
})();
*/

//------const----------//
/*1,const的作用域与let命令相同：只在声明所在的块级作用域内有效。
* 2,const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
* 3,const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。*/
const foo = {};
foo.prop = 123;
console.log(foo.prop);//成功
// 不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。
// 如果真的想将对象冻结，应该使用Object.freeze方法。
const foo2 = Object.freeze({});
foo2.prop = 123;
console.log(foo2.prop);//undefined

/*ES6 声明变量的六种方法
  ES5 只有两种声明变量的方法：var命令和function命令。
  ES6除了添加let和const命令，后面章节还会提到，
  另外两种声明变量的方法：import命令和class命令。
  所以，ES6 一共有6种声明变量的方法。*/

//-------顶层对象的属性--------//
/*1,顶层对象，在浏览器环境指的是window对象，在Node指的是global对象。
  2,ES5之中，顶层对象的属性与全局变量是等价的。

 ES6一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；
 另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。
 也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。*/