ES 6 概述

var 定义变量

let 定义变量

常规使用

暂时性死区

不允许重复声明

const 定义变量

ES 6 概述

1、ECMA Script 6（简称ES6）是JavaScript语言的最新一代标准。因为 ES6 是在2015年发布的，所以又称ECMAScript 2015。

2、ECMAScript 是由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过 ECMA-262 标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。

3、最常用的ES6特性：let, const,class, extends, super, arrow functions, template string, destructuring, default, rest arguments

4、Java定义变量有三种方式，最传统古老的 var、以及 ES 6 新增的 let、const

5、var定义变量的方式现在慢慢的开始舍弃

var 定义变量

1、var 变量无块范围，最小可见范围是函数级。

2、var 变量申明被提升至函数顶部。

3、var 定义的变量可以修改，如果不初始化会输出 undefined，不会报错。

示例 1：var 定义的是全局变量或函数变量，没有let块区域变量的概念，var可以越过块区域

<script type="text/javascript">/**var没有块区域，仅为全局或函数区域，可以越过块区域*/if (true) {var flag = true;}/**上面的if、以及while、for等都属于块区域，var是可以无视的* 所以这里会输出"true"*/console.log(flag);//输出true
</script>

<script type="text/javascript">$(function () {for (var i = 0; i < 5; i++) {console.log("inner："+i);}/**var定义的全局变量，此时照样能读到for中的i值*/console.log("outer："+i);//输出"outer：5"});
</script>

<script type="text/javascript">function show(){var userName = "芷若";//这个userName属于函数级别变量console.log(userName);}/**上面方法中定义的变量，只会在方法中有效，此时下面报错：* letAndVar.html:13 Uncaught ReferenceError: userName is not defined*/console.log(userName);
</script>

示例2 ：var定义的变量可以先使用，再声明，但不建议这么做，实际开发中应该先声明再使用

<script type="text/javascript">/**输出变量在声明变量之前，结果为undefined，等价于下面三句* var age;* console.log(age);* age = 13;* */console.log(age);//输出undefinedvar age = 13;/**如果输出的变量前后都未使用var声明，则运行时报错：* Uncaught ReferenceError: userName is not defined*/console.log(userName);
</script>

let 定义变量

1、let 声明的变量，只在 let 命令所在的代码块内有效，即只在 {} 内有效，它的粒度比 var 更细腻

2、let 用法与 var 相同，区别主要在于作用范围不一样，性能上 let 比 var 更强

3、let 是块级作用域，函数内部使用 let 定义后，对函数外部无影响。

常规使用

示例 1：let 声明的变量只在局部的{}中有效，所以不会和外面的发生冲突，如果换成var定义显然里面的会覆盖外面的，更容易出错

<script type="text/javascript">$(function () {for (let i = 0; i < 3; i++) {console.log("outer:"+i);/**let定义的变量只在局部的{}中有效，所以下面并不会和外面的i冲突* 如果换成var定义显然里面的会覆盖外面的，更容易出错*/for (let i = 0; i < 3; i++) {console.log("innner:"+i);}}});
</script>

for 循环的计数器，就很合适使用 let 命令，计数器 i 只在 for 循环体内有效。

示例2：let 声明的变量未赋值时，默认为 undefined，不存在像 var 一样的变量提升

<script type="text/javascript">/**声明了userName，但未赋值时，输出undefined*/let userName;console.log(userName);//输出undefined/**直接使用未声明的变量时，直接报错：* Uncaught ReferenceError: age is not defined*/console.log(age);
</script>

示例3：for 循环有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

    <script type="text/javascript">for (let i = 0; i < 3; i++) {/**此时输出 1,2,3*/console.log(i);}for (let i = 0; i < 3; i++) {/*** for( 中的 i 作用域为父作用域* 下面的 let i 为循环体内部的作用域，想着互不干扰* @type {string}*/let i = "China";console.log(i);//会输出 三次 China}</script>

表明函数内部的变量 i 与循环变量 i 不在同一个作用域，有各自单独的作用域。

暂时性死区

只要块级作用域内存在 let 命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

    <script type="text/javascript">let id = 9527;function show() {console.log(id);//输出 9527}/*** 只要块级作用域内存在 let命令，它所声明的变量就"绑定"（binding）这个区域，不再受外部的影响。* 所以里面的 id = 110 这一行会报错：ReferenceError: id is not defined*/function active() {id = 110; //报错：ReferenceError: id is not definedlet id = "3A";console.log(id);//不会输出}show();active();</script>

上面代码中，存在全局变量 id=9527，但是块级作用域内 let 又声明了一个局部变量 id，导致后者绑定这个块级作用域，所以在 let 声明变量前，对 id 赋值会报错。

ES6 明确规定，如果区块中{}存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

    <script type="text/javascript">if (true) {console.log(typeof id);//输出：undefinedconsole.log(typeof name);//报错：ReferenceError: name is not definedlet name;}</script>

上面代码中，变量 name 使用 let 命令声明，所以在声明之前，都属于 name 的“死区”，只要用到该变量就会报错。因此，typeof 运行时就会抛出一个ReferenceError。而变量 id 根本没有被声明，使用 typeof 反而不会报错。

不允许重复声明

let 不允许在相同作用域内，重复声明同一个变量。

    <script type="text/javascript">let show1 = function () {let id = 110;var id = 120;};let show2 = function () {var isMarry = false;let isMarry = true;};let show3 = function () {let name = "3A";let name = "3C";};//show1();//报错：SyntaxError: Identifier 'id' has already been declared(语法错误：标识符 id 已经声明)//show2();//报错：SyntaxError: Identifier 'isMarry' has already been declaredshow3();//报错：// SyntaxError: Identifier 'name' has already been declared</script>

不能在函数内部重新声明参数。

 <script type="text/javascript">/*** var 无影响* @param name*/let show1 = function (name) {var name = "3C";console.log(name);//输出 3C};/*** 属于重复声明 let 变量，会报错* @param id*/let show2 = function (id) {let id = 110;console.log(id);};/*** 如下所示在函数体内部的块级作用域内部不会报错* @param name*/let show3 = function (name) {console.log(name);//输出 狮子骢if (true) {let name = "哮天犬";console.log(name);//输出：哮天犬}};show1("3A");//show2(120);//报错：// SyntaxError: Identifier 'id' has already been declaredshow3("狮子骢");</script>

const 定义变量

1、const用来声明常量，声明的同时必须初始化值，否则运行时浏览器报错；

2、const 声明且初始化值之后，常量的值就不能改变，否则直接编译不通过

<script type="text/javascript">$(function () {/**声明常量的时候必须初始化值*/const PI = Math.PI;console.log(PI);//输出:3.141592653589793/**如果常量E声明的同时没有初始化值，则运行时浏览器报错：* Uncaught SyntaxError: Missing initializer in const declaration*/const E;});
</script>

ES6 let 与 const 与 var 的区别与使用相关推荐

uniapp 获取到js文件var一个变量怎么获取到这个变量值_浅析Js中const,let,var的区别及作用域...
理解:let变量的作用域只能在当前函数中 js中const,let,var的区别及作用域_lianzhang861的博客-CSDN博客blog.csdn.net 全局作用域中,用 const 和 l ...
let、const和var的区别（涉及块级作用域）
let .const和var的区别 let.const.var在js中都是用于声明变量的,在没有进行ES6的学习前,我基本只会使用到var关键字进行变量的声明,但在了解了ES6之后就涉及到了块级作用域 ...
JavaScript let、const与var的区别
ES5中的var是没有块级作用域的(if/for) ES5中的let是有块级作用域的(if/for) ES5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须借助于function ...
ES6——let、const和var的用法和区别
ES6 新增了let命令,用来声明变量,新增了const命令,用来声明常量,它们的用法类似于var. let a = 1; var b = 2; const PI = 3.14; 主要区别块级作用域 ...
let和const与var的区别
目录一.定义二.let 三.const 四.代码演示四.循环中let和var声明的循环变量的区别 4.1 事件的绑定 4.2 循环变量存储的数据数值 4.2.1 var声明的循环变量 4. ...
let、const、var的区别
var是ES5提出的,let和const是ES6提出的. const声明的是常量,必须赋值 1)一旦声明必须赋值,不能使用null占位. 2)声明后不能再修改 3)如果声明的是复合类型数据,可以修改其 ...
js const 和 var 的区别
const 其作用域和let一样,都是块作用域的,并且呢,如果const变量是基本类型值,则值不可变,如果值为引用类型数据结构,那么其引用的变量不可变,当然啦,const初始化的时候必须要赋值.不允许 ...
ES6新特性 - const let var
var var生命的是函数作用域,没带var声明的变量是全局作用域,: 存在预解析,变量提升可以对同一个变量声明多次 console.log(a); // undefined var a = 10; ...
var let const声明变量的区别
在js中定义变量的方式有三种,其中let和const关键字是来自ES6中的,下面将逐一介绍各个关键字声明变量的特点. var声明变量 var 是一个 JS关键字,用来声明变量( variable 变量 ...
前端进阶之 let、const、var
作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S- 背景:最近高级前端工程师刘小夕在 github 上开了个每个工作日布一个前端相关题的 re ...

ES6 let 与 const 与 var 的区别与使用

ES 6 概述

var 定义变量

let 定义变量

常规使用

暂时性死区

不允许重复声明

const 定义变量

ES6 let 与 const 与 var 的区别与使用相关推荐

最新文章

热门文章