ES6 基础知识-----简记 let const

ES5中只有函数作用域和全局作用域,声明变量使用var,在es6中添加声明变量 let const

let 声明块级作用域变量,

let 不存在变量提升

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

var 声明的变量可以在声明之前使用,是undifind,存在变量提升现象,let 声明的变量必须在声明之后使用,否则会报错

let 不允许重复声明变量

let实际上为 JavaScript 新增了块级作用域。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出的值就是10。

ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。

const命令 声明的是一个常量

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

  1. 一旦声明,常量的值就不能改变
  2. const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值
  3. const的作用域与let命令相同:只在声明所在的块级作用域内有效
  4. const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用
  5. const声明的常量,也与let一样不可重复声明。

本质

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量

但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

上面代码中,常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

下面是另一个例子。

const a = [];
a.push(‘Hello‘); // 可执行
a.length = 0;    // 可执行
a = [‘Dave‘];    // 报错

上面代码中,常量a是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给a,就会报错。

如果真的想将对象冻结,应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;

上面代码中,常量foo指向一个冻结的对象,所以添加新属性不起作用,严格模式时还会报错。

除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === ‘object‘ ) {
      constantize( obj[key] );
    }
  });
};

ES6有六种声明变量的方法:

var   function    let    const    class   import

顶层对象的属性

ES6为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;

另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从ES6开始,全局变量将逐步与顶层对象的属性    脱钩

var a = 1;
// 如果在Node的REPL环境,可以写成global.a
// 或者采用通用方法,写成this.a
window.a // 1

let b = 1;
window.b // undefined

上面代码中,全局变量avar命令声明,所以它是顶层对象的属性;全局变量blet命令声明,所以它不是顶层对象的属性,返回undefined

时间: 2024-10-11 04:39:37

ES6 基础知识-----简记 let const的相关文章

ES6基础知识(Reflect)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

ES6基础之let、const

es6的块级作用域通俗的讲就是一对花括号中的区域(声明对象的花括号不是块级作用域),块级作用域可以嵌套. let: 1.le声明的变量只在当前(块级)作用域内有效. 2.let声明的变量不能被重复声明.否则同一作用域下会报错,不同块级作用域可以定义同名变量. 3.let不存在变量提升.先打印再声明会报错. 关于暂存死区(了解即可): 1.用var时会从上到下按顺序打印. 2.一般会往上级作用域去找,但用 let 时在es6中向上找到了同一个变量也是拿不到的.因为es6规定如果块级作用域中存在le

C#基础知识七之const和readonly关键字

前言 不知道大家对const和readonly关键字两者的区别了解多少,之前真不是很清楚,如果你也不是很清楚的话,那就一起来探讨吧!探讨之前我们先来了解静态变量和动态变量. 静态变量 所谓静态变量就是在编译期间会对变量进行解析,再讲常量的值替换成初始化的值.定义时必须初始化. 动态变量 所谓动态变量就是编译期间会将变量标示只读常量,而不用常量的值代替,定义时可以不初始化,可以延迟到构造函数. const和readonly

ES6基础知识汇总

1.如何理解ECMAScript6? ECMAScript是什么.ECMASCript的作用 2.新增let关键字 let的用途 3.关键字const const作用.传址赋值 4.解构赋值 解构赋值是什么,解构赋值方式 5.字符串新特性 模板字符串.标签模板

ES6基础知识(async 函数)

1.async 函数是什么?一句话,它就是 Generator 函数的语法糖. const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error, data) { if (error) return reject(error); resolve(data); });

es6基础知识

1.超引用:(...) 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 function fun(...args){ console.log(args); //[1,2,3,4,5,6] args.push(7); console.log(args); //[1,2,3,4,5,6,7] }fun(1,2,3,4,5,6) 2.解构赋值: 赋值: var a = 10,b = 20,c = 30; console.log(a,b,c) //10 20 30 解构: //数组的格式 var

ES6基础知识(Generator 函数应用)

1.Ajax 是典型的异步操作,通过 Generator 函数部署 Ajax 操作,可以用同步的方式表达 function* main() { var result = yield request("http://some.url"); var resp = JSON.parse(result); console.log(resp.value); } function request(url) { makeAjaxCall(url, function(response){ it.nex

vue准备知识-es6基础

目录 知识 let和const 模板字符串 箭头函数 对象的单体模式 面向对象 一.知识 http://www.cnblogs.com/majj/https://www.cnblogs.com/majj/category/1216624.html 阮一峰 es6 http://es6.ruanyifeng.com/ https://www.bootcdn.cn/ http://www.cnblogs.com/majj/ 前端 VUE 博客每个人都要去写! html(语义化,除了语义,其他得都没什

const基础知识、const在C++和C中的异同、const与#define宏定义的异同

1.const基础知识 (1)用const定义常量 const int a = 5;   //定义了一个int型常量a,其值为5 (注:在C++中将其存储在符号表中(key,value),并不分配内存空间,只有在取地址或者定义为全局变量在其他文件中使用时才分配内存空间) (2)const与指针 1 const int* p1 = &a; //p1是指向常量a的指针,a的值不能通过指针p1改变 2 3 int* const p2 =&b; //p2是只能指向b的指针,b的值可以通过p2改变