es6(一):es6介绍以及let,const

es是js的规范,而js是具体实现

将es6转化为es5代码工具:运用的多的是babel

在线转换地址:babeltraceur(属于谷歌)

1.let申明变量:let其实可以完全取代var,并且没有var这么多副作用

1 {
2       var a = 10;
3       let b = 10;//let申明的变量是块级作用域
4     }
5     console.log(a)//10
6     // console.log(b)//b is not defined

let很适合的一种场景是:for

1 for (let i = 0; i < 3; i++) {
2       console.log(i)
3     }
4     for (var j = 0; j < 3; j++) {
5       console.log(j)
6     }
7     // console.log(i)//i is not defined
8     console.log(j)//3

看下面这种情况:

 1 var k = []
 2     for (var i1 = 0; i1 < 5; i1++) {//var i1,申明了全局变量i1,只存在一个i1;即每次循环的i1指向的都是同一个i1
 3       k[i1] = function () {
 4         console.log(i1);
 5       }
 6     }
 7     k[3]();//5
 8
 9     var p = []
10     for (let i2 = 0; i2 < 5; i2++) {//let i2,申明变量i2,只在块级作用域有效;即每次循环的i2都是新的、重新申明的变量(同时js引擎内部可以记住上一次循环的值)
11       p[i2] = function () {
12         console.log(i2)
13       }
14     }
15     p[3]()//3

注意下面这种情况:

1 for(let i3=0;i3<3;i3++){//圆括号里面是一个作用域
2       let i3=10//花括号里面又是一个作用域
3       console.log(i3)
4     }
5     //输出:10 10 10 

let不存在变量提升(对比var变量提升)

1 console.log(i4)//i4 is not defined
2   let i4=10
3 console.log(i5) //undefined 未赋值
4     var i5=100

暂时性死区:在es6中,如果区块中存在let和const命令申明的变量,这个区块就对变量形成封闭作用域。即暂时性死区(temporal dead zone,简称TDZ)

1 var people=100
2     if(true){
3       //TDZ开始
4       // console.log(people)//people is not defined
5       let people=1000//TDZ结束
6       console.log(people)
7     }

暂时性死区本质:进入区块,只有let申明变量后,才能进行访问

let不允许在相同作用域下重复申明变量

1 function test(){
2       let a=10;
3       // var a=100
4       let a=1000
5     }
6     test()//报错,a已被申明

块级作用域的出现使得IIFE不再必要了;块级作用域外部不能访问块级作用域中的let申明的变量;借助花括号(可以嵌套多个),块级作用域的写法:

1 {
2   let a100=100
3  }
4  console.log(a100)//报错

const:const申明只读的常量;申明时必须同时赋值,否则报错;同理,const与let一样都是块级作用域范围

实质上:const是保证变量指向的内存地址不得改动。对于简单类型(数值,字符串,布尔值),表现为值不能改变;而对于复合类型(数组,对象),不变的是内存地址,指向的数据结构可能会变动

 1 const PI=3.14
 2     console.log(PI)
 3
 4     // const AB//报错,必须申明时同时赋值
 5     // AB=1
 6
 7     const ABC=[]
 8     ABC[0]=‘hello‘
 9     ABC[1]=‘hi‘
10     console.log(ABC)
11     // ABC={}//这时报错

同时:ES6中,let,const,class申明的变量不再是顶层对象的属性;而var ,function申明的依然是顶层对象的属性(为了保持兼容性)

1 console.log(window.PI)//undefined;PI是上面代码中由const申明的常量

参考:更多详情请点击阮一峰前辈的ECMAScript 6 入门

时间: 2024-08-03 00:26:23

es6(一):es6介绍以及let,const的相关文章

ES6新特性:let和const的使用

(声明, 本文的所有代码均在node的最新稳定版本v4.4.3中执行的, 如果在浏览器中执行请把JS的运行环境提升为ES6) 以前一直用var定义变量, 现在有了两种新的定义变量的方式, 1: let, 2: const:本文大概概括下使用let和const定义变量有哪些好处: let: 1:声明提前 使用var声明变量,存在声明提前的问题, 输出的tmp为"undefined": { var tmp = new Date(); let f = function (){ console

ES6学习笔记之let/const

在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量. 函数级作用域会导致一些问题就是某些代码块内的变量会在全局范围内有效,这我们是非常熟悉的: 1 for (var i = 0; i < 10; i++) { 2 console.log(i); // 0,1,2...,9 3 } 4 console.log(i); //10 5 6 if(true){ 7 var s = 20; 8 } 9 con

ES6(一) let和const

随着前端技术的逐渐强大,JavaScript从一个简单的脚本语言,迅速的伸出了它的触角,一直延伸到了后端.于是原有的ES3/ES5的语法与规范已经不能适应它的发展了,因此w3c就在2015年推出了js新的语法规范,也就是ECMAScript6,也叫ECMAScript2015,一般简称为ES6. 一.let 在ES3和ES5中,JS只有全局作用域和函数作用域,它是没有块级作用域的.任何时候声明变量都是使用var关键字. 在ES6支持了块级作用域的概念,支撑这个块级作用域的新语法就是新增了let关

es6学习笔记1 --let以及const

let语句的基本用法:  1.let声明的变量为块级作用域,只在最近的{}里面有效,如果在外部引用就会报错. { let a = 10; var b = "hello" } alert( a ) //报错 alert( b ) // "hello" 正是由于该特性,所以let语句十分适合用于循环语句中,用于定义局部变量. 2.不会进行变量定义提前处理.在js语句中,通过var定义的变量存在变量声明提前的情况.就是在变量声明之前可以进行使用,但是这时该提前使用的变量值

es6读书笔记(三)——const

const声明一个只读的常量.一旦声明,常量的值就不能改变.这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值. const PI = 3.1415; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable. const foo; // SyntaxError: Missing initializer in const declaration const的作用域与let命令相同:只在声明所在的块级作用

ES6 promise 常用方法介绍

一:promise 知识点:.then() catch() resolve()返回成功的值 reject()返回失败的值 用法:连续调用上次请求值做下一步操作 写法: 在第一步方法里面new 一个Promsie方法 用变量接收 传入值 function(resolve, reject){} 在传值函数里面执行请求或者得值操作,然后用相应的方法返回值 //resolve()返回成功的值 reject()返回失败的值 在第一步方法最后返回定义的变量 用法: 利用第一步方法.then 并传值funct

es6 之class介绍

class ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖.类语法不会为JavaScript引入新的面向对象的继承模型. 类声明:定义一个类的一种方法是使用一个类声明.要声明一个类,你可以使用带有class关键字的类名 class food { constructor(price) { this.price = price }} 类表达式:与函数声明不同的是,类声明不会出现类提升,而函数声明会提升,所以在使用过程中要

react案例-&gt;新闻移动客户端--(react+redux+es6+webpack+es6的spa应用)

今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写pc端的,但是比较懒,而且因为主要是react的项目,关于css和布局的细节就是糊弄人的了.T.T,这里只说关于这个项目的js部分. 这里的功能很简单,有一下几点: 1,按”心“排序 当比上一个多了,就会排到前面. 2.评论部分 新闻的评论部分类似qq空间的评论 当然,也可以点击新闻回复的哦. ===

Mz学院ES6视频教程 ES6基础教程 共27课包含源码课件

1.ES6简介.mp42.let基本用法.mp43.let不存在变量提升.mp44.let暂时性死区.mp45.let不允许重复声明.mp46.为什么需要块级作用域.mp47.块级作用域.mp48.const命令.mp49.const对象.mp410.const对象冻结.mp411.跨模块常量.mp412.全局对象属性.mp413.Destructuring.mp414.不完全解构.mp415.制定默认值.mp416.let和const命令.mp417.对象的解构赋值.mp418.对象解构赋值的