目录
es6声明变量的6 种方法
首页 web前端 前端问答 es6的6种变量定义方法是什么

es6的6种变量定义方法是什么

Jan 29, 2023 pm 07:10 PM
es6 变量 声明变量

es6的6种变量定义方法:1、用关键字var定义变量,语法“var 变量名=值;”;2、用关键字function定义变量;3、用关键字const定义变量,语法“const 变量名=值;”;4、用关键字let定义变量,语法“let 变量名=值;”;5、用关键字import定义变量;6、用关键字class定义变量。

es6的6种变量定义方法是什么

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

es6声明变量的6 种方法


es5只提供了两种声明变量的方法,即var和function。

ES6 除了添加let和const命令,还有两种声明变量的方法:import命令和class命令。

所以,ES6 一共有 6 种声明变量的方法,即var / function / let / const / import / class

(1) var命令

var a ;  //undefined
var b = 1;
登录后复制
  • var 声明的变量作用域是全局的或者是函数级的。
  • var定义的变量可以修改,如果不初始化会输出undefined,不会报错。
  • var声明的变量在window上,用let或者const去声明变量,这个变量不会被放到window上。
  • 很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function(也可以说用大括号‘{ }’)来划分作用域,但大括号“{ }”却限定不了var的作用域,因此用var声明的变量具有变量提升的效果。

(2)function命令

function add(a) {
  var sum = a + 1;
  return sum;
}
登录后复制
  • 声明了一个名为 add的新变量,并为其分配了一个函数定义。
  • { }之间的内容被分配给了 add。
  • 函数内部的代码在声明是不会被立即执行,只是存储在变量中以备将来使用。

(3) cosnt命令

const a;     //报错,必须初始化
const b = 1; 
b = 2;      //报错,TypeError: Assignment to constant variable.
登录后复制
  • const定义一个常量,且必须初始化。
  • const关键字声明的常量的指针不能发生改变。这里说的是常量的指针不能发生改变,但指针所指向的内存空间的值是可以发生变化的。
    例如:
const obj = {};
obj.n = 123;
obj; // { n: 123 }
obj = { x: 1 }; // TypeError: Assignment to constant variable.
登录后复制

const声明了一个名为obj的对象,obj指针指向一个对象,在对象中添加属性,是在该对象的数据里添加数据,而没有改变obj中存放的指向该对象的地址,所以是可以执行成功的,而对obj重新赋值的操作则改变了obj的指针指向,故而操作失败,抛出错误。
对于基本类型也是同样,因为基本类型的数据直接就存放在栈中,常量名直接指向这个地址上的数据,一旦改变值,就会导致指针地址发生改变,所以造成了无法改变值的假象。

  • 该变量是个全局变量,或者是模块内的全局变量,拥有块级作用域。

  • 如果一个变量只有在声明时才被赋值一次,永远不会在其它的代码行里被重新赋值,那么应该使用const,但是该变量的初始值有可能在未来会被调整(常变量)。

  • const定义的变量,一般在require一个模块的时候用或者定义一些全局常量。

  • 常量不能和它所在作用域内其它变量或者函数拥有相同名称。

(4) let命令

需要”javascript 严格模式”:‘use strict’;

----不存在变量提升

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";
登录后复制

变量 b 用 var 声明存在变量提升,所以当脚本开始运行的时候,b 已经存在了,但是还没有赋值,所以会输出 undefined。
变量 a用 let 声明不存在变量提升,在声明变量 a 之前,a 不存在,所以会报错。

不允许重复声明

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4
登录后复制

let只能声明一次,var可以声明多次

块级作用域(即只在一个{ }中有效)

{
  let a = 0;
  a   // 0
}
a   // 报错 ReferenceError: a is not defined
登录后复制

函数内部使用let定义后,对函数外部无影响

可以在声明变量时为变量赋值,默认值为undefined,也可以稍后在脚本中给变量赋值,在声明前无法使用(暂时死区)

let a;
console.log(a);    //  undefined
console.log(b);   // ReferenceError: b is not defined
let b = 1;
a = 2;
console.log(a);     // 2
登录后复制

注意:ES6 明确规定,代码块内如果存在 let 或者 const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内,在声明变量 PI 之前使用它会报错。

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}
登录后复制

(5) import命令

import用于加载文件,在大括号接收的是一个或多个变量名,这些变量名需要与你想要导入的变量名相同。

举个栗子:你想要导入action.js文件中的某一个变量,这个变量里保存了一段代码块,所以你要写成:import { Button } from 'action',这个时候,你就从action.js中获取到了一个叫 Button 的变量,既然获取到了,你就可以对Button里的代码猥琐欲为了

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名,比如:

import { NewButton as Button } from 'action.js';
登录后复制

上面的代码表示从action.js文件中,获取一个变量名称叫做Button的代码段,然后你又声明了一个变量 NewButton ,将 Button 保存在 NewButton

(6) class命令

在es5中我们是使用构造函数实例化出来一个对象,那么构造函数与普通的函数有什么区别呢?其实没有区别,无非就是函数名称用首字母大写来加以区分,这个不用对说对es5有了解的朋友都应该知道。
但是es5的这种方式给人的感觉还是不够严谨,于是在es6中就换成了class,就是把es5中的function换成了class,有这个单词就代表是个构造函数,然后呢对象还是new出来的,这一点并没有变化。

类的使用

从里面的代码我们可以看到除了function变成了class以外,其它的跟es5一样

class Coder{
    name(val){
        console.log(val);
    }}
 let shuang= new Coder;shuang.name('shuang');
登录后复制

类的传参

在es6中的对象的属性都是写在constructor里面,方法都是在原型身上。在这里面的代码用constructor约定了两个参数,然后用add()方法把参数相加,这个地方跟以前不太一样,所以需要多注意一下。

class Coder{
    name(val){
        console.log(val);
        return val;
    }

    constructor(a,b){
        this.a=a;
        this.b=b;
    }
 
    add(){
        return this.a+this.b;
    }}
 let shuang=new Coder(1,2);console.log(shuang.add());
登录后复制

class的继承

class的继承就是用extends

class shuang extends Coder{
 }
 let shuang=new shuang;shuang.name('Angel爽');
登录后复制

声明一个shuang的新类,用extends继承了Coder,调用里面的name方法,发现也是可以输出的。

学习总结:


一、用关键字var声明变量

1、var声明的全局对象是顶级对象(window)的属性;

2、用var在函数外声明的对象为全局变量,在函数内声明的对象为局部变量;

3、用var可以对同一对象重复声明和赋值;

4、用var声明的对象具有变量提升的作用(声明提前,赋值不提前);

二、用关键字function声明变量

1、用function声明的函数对象具有变量提升的作用(声明提前,赋值不提前);

2、function声明的函数对象是顶级对象(window)的属性;

三、用关键字let声明变量

1、用let声明的变量在块级作用域内有效;

2、let声明的变量不存在变量提升

3、let声明的变量存在暂时性死区(即同一个块级作用域中,在let声明该变量的语句之前,该变量已经存在,但是不能使用);

4、在同一个作用域内,对于let声明的变量不能重复声明。

四、用关键字const声明变量

1、const命令声明的值一旦声明,就不能再次改变;

2、const声明变量时,必须立即初始化,否则会报错(因为值一旦声明不可改变);

3、const声明的变量不存在变量提升

4、const声明的变量存在暂时性死区;

5、const声明的变量只在块级作用域内有效;

6、const变量在同一个作用域内不能重复声明。

五、关于变量提升

1、只有声明本身会被提升,而赋值操作不会被提升。

2、变量会提升到其所在函数的最上面,而不是整个程序的最上面。

3、函数声明会被提升,但函数表达式不会被提升。

4、函数声明的优先级高于普通变量申明的优先级,并且函数声明和函数定义的部分一起被提升。

5、同一个变量只会声明一次,其他的会被忽略掉。

【相关推荐:javascript视频教程web前端

以上是es6的6种变量定义方法是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

使用Windows 11和10环境变量进行配置文件操作指南 使用Windows 11和10环境变量进行配置文件操作指南 Nov 01, 2023 pm 08:13 PM

环境变量是运行应用和程序的位置路径(或环境)。它们可以由用户创建、编辑、管理或删除,并在管理某些进程的行为时派上用场。下面介绍如何创建配置文件以同时管理多个变量,而无需在Windows上单独编辑它们。如何在环境变量中使用配置文件Windows11和10在Windows上,有两组环境变量–用户变量(应用于当前用户)和系统变量(全局应用)。但是,使用像PowerToys这样的工具,您可以创建一个单独的配置文件来添加新的和现有的变量并一次管理它们。方法如下:步骤1:安装PowerToysPowerTo

PHP7中的变量的严格模式:如何减少潜在的错误? PHP7中的变量的严格模式:如何减少潜在的错误? Oct 19, 2023 am 10:01 AM

PHP7中引入了严格模式,该模式可以帮助开发者减少潜在的错误。本文将介绍什么是严格模式以及如何在PHP7中使用严格模式来减少错误。同时,将通过代码示例演示严格模式的应用。一、什么是严格模式?严格模式是PHP7中的一个特性,它可以帮助开发者编写更规范的代码,减少一些常见的错误。在严格模式下,会对变量的声明、类型检查、函数调用等进行严格的限制和检测。通

什么是Java中的实例变量 什么是Java中的实例变量 Feb 19, 2024 pm 07:55 PM

Java中的实例变量是指定义在类中,而不是方法或构造函数中的变量。实例变量也称为成员变量,每个类的实例都有自己的一份实例变量副本。实例变量在创建对象的过程中被初始化,以及在对象的生命周期中保存并保持其状态。实例变量的定义通常放在类的顶部,可以用任何访问修饰符来声明,可以是public、private、protected或默认访问修饰符。这取决于我们希望这个变

PHP函数介绍—is_string(): 检查变量是否为字符串 PHP函数介绍—is_string(): 检查变量是否为字符串 Jul 24, 2023 pm 09:33 PM

PHP函数介绍—strpos():检查变量是否为字符串在PHP中,is_string()是一个非常有用的函数,它用于检查变量是否为字符串。当我们需要确定一个变量是否为字符串时,is_string()函数可以帮助我们轻松实现这个目标。下面我们将学习关于is_string()函数的使用方式以及提供一些相关代码示例。is_string()函数的语法非常简单。它只需

如何使用Ajax从PHP方法中获取变量? 如何使用Ajax从PHP方法中获取变量? Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景,通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中,将介绍如何使用Ajax从PHP方法中获取变量,并提供具体的代码示例。首先,我们需要编写一个PHP文件来处理Ajax请求,并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码:

Python 语法的思维导图:深入理解代码结构 Python 语法的思维导图:深入理解代码结构 Feb 21, 2024 am 09:00 AM

python凭借其简单易读的语法,广泛应用于广泛的领域中。掌握Python语法的基础结构至关重要,既可以提高编程效率,又能深入理解代码的运作方式。为此,本文提供了一个全面的思维导图,详细阐述了Python语法的各个方面。变量和数据类型变量是Python中用于存储数据的容器。思维导图展示了常见的Python数据类型,包括整数、浮点数、字符串、布尔值和列表。每个数据类型都有其自身的特性和操作方法。运算符运算符用于对数据类型执行各种操作。思维导图涵盖了Python中的不同运算符类型,例如算术运算符、比

内部错误:无法创建临时目录 [已解决] 内部错误:无法创建临时目录 [已解决] Apr 17, 2023 pm 03:04 PM

Windows系统允许用户使用可执行/设置文件在您的系统上安装各种类型的应用程序。最近,许多Windows用户开始抱怨他们收到一个名为INTERNALERROR:cannotcreatetemporarydirectory在他们的系统上尝试使用可执行文件安装任何应用程序的错误。问题不仅限于此,而且还阻止用户启动任何现有的应用程序,这些应用程序也安装在Windows系统上。下面列出了一些可能的原因。运行可执行文件进行安装时不授予管理员权限。为TMP变量提供了无效或不同的路径。损坏的系

解释C语言中变量的生命周期 解释C语言中变量的生命周期 Sep 02, 2023 pm 07:37 PM

存储类指定变量的范围、生命周期和绑定。要完整定义变量,不仅需要提及其“类型”,还需要提及其存储类。变量名称标识计算机内存中的某个物理位置,其中分配了一组位来存储变量的值。存储类别告诉我们以下因素-变量存储在哪里(内存或CPU寄存器中)?如果没有初始化,变量的初始值是多少?变量的作用域是什么(可以访问变量的范围)?变量的生命周期是多长?生命周期变量的生命周期定义了计算机为其分配内存的持续时间(内存分配和释放之间的持续时间)。在C语言中,变量可以具有自动、静态或动态生命周期。自动-创建具有自动生命周

See all articles