搜索
首页web前端前端问答es6能用var声明变量吗

es6能用var声明变量吗

Apr 11, 2022 pm 04:07 PM
es6var声明变量

es6能用var声明变量。var是声明变量的一个关键字,使用var关键字声明的变量,其作用域有两种:全局作用域和函数作用域;由于var支持变量提升,所以用var声明的全局变量在整个脚本代码中有效,使用var声明的局部变量在整个函数中有效。

es6能用var声明变量吗

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

ES5 只有两种声明变量的方法:var命令和function命令。

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

所以,ES6 一共有 6 种声明变量的方法:

  • 用关键字var声明变量

  • 用关键字function声明变量

  • 用关键字const声明变量

  • 用关键字let声明变量

  • 用关键字class声明变量

  • 用关键字import声明变量

用关键字var声明变量

var是声明变量的一个关键字,声明方法:

var 变量名;

举几个例子:

var str;  //用来存储字符串
var age;  //用来存储年龄
var prePage;  //用来存储上一页

定义变量时,可以一次定义一个或多个变量,若定义多个变量,则需要在变量名之间使用逗号,分隔开,如下例所示:

var a, b, c;    // 同时声明多个变量

变量定义后,如果没有为变量赋值,那么这些变量会被赋予一个初始值——undefined(未定义)。

变量定义后,可以使用等于号=来为变量赋值,等号左边的为变量的名称,等号右边为要赋予变量的值,如下例所示:

var num;    // 定义一个变量 num
num = 1;    // 将变量 num 赋值为 1

此外,也可以在定义变量的同时为变量赋值,如下例所示:

var num = 1;                // 定义一个变量 num 并将其赋值为 1
var a = 2, b = 3, c = 4;    // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4
// var a = 2,               // 为了让代码看起来更工整,上一行代码也可以写成这样
//     b = 3,
//     c = 4;

说明:

  • var定义的变量可以修改,如果不初始化会输出undefined,不会报错

  • var 声明的变量在window上,用let或者const去声明变量,这个变量不会被放到window上

  • 很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域,因此用var声明的变量具有变量提升的效果

  • var 声明的变量作用域是全局的或者是函数级的

扩展知识:

let 和 const 关键字声明变量

2015 年以前,JavaScript 只能通过 var 关键字来声明变量,在 ECMAScript6(ES6)发布之后,新增了 let 和 const 两个关键字来声明变量,其中:

  • 使用 let 关键字声明的变量只在其所在的代码块中有效(类似于局部变量),并且在这个代码块中,同名的变量不能重复声明;

  • const 关键字的功能和 let 相同,但使用 const 关键字声明的变量还具备另外一个特点,那就是 const 关键字定义的变量,一旦定义,就不能修改(即使用 const 关键字定义的为常量)。

注意:IE10 及以下的版本不支持 let 和 const 关键字。

示例代码如下:

let name = "小明";      // 声明一个变量 name 并赋值为“小明”
let age  = 11;          // 声明一个变量 age
let age  = 13;          // 报错:变量 age 不能重复定义
const PI = 3.1415       // 声明一个常量 PI,并赋值为 3.1415
console.log(PI)         // 在控制台打印 PI

var、let和const的作用域

使用 var 声明的变量的作用域有全局作用域和函数作用域;使用 let 和 const 声明的变量有全局作用域、局部作用域和块级作用域。

由于 var 支持变量提升,所以 var 变量的全局作用域是对整个页面的脚本代码有效;而 let 和 const 不支持变量提升,所以 let 和 const 变量的全局作用域指的是从声明语句开始到整个页面的脚本代码结束之间的整个区域,而声明语句之前的区域是没有效的。

同样,因为 var 支持变量提升,而 let 和 const 不支持变量提升,所以使用 var 声明的局部变量在整个函数中有效,而使用 let 和 const 声明的局部变量从声明语句开始到函数结束之间的区域有效。需要注意的是,如果局部变量和全局变量同名,则在函数作用域中,局部变量会履盖全局变量,即在函数体中起作用的是局部变量;在函数体外,全局变量起作用,局部变量无效,此时引用局部变量将出现语法错误。

用关键字function声明变量

function add(a) {
  var sum = a + 1;
  return sum;
}
  • 声明了一个名为 add的新变量,并为其分配了一个函数定义

  • {}之间的内容被分配给了 add

  • 函数内部的代码不会被执行,只是存储在变量中以备将来使用

用关键字class声明变量

关于class,后期我会单独写一篇文章,详细的介绍一下,这里就简单说一下: 首先通过看ES5中的构造函数,然后再用ES6的class去实现:

// ES5写法 :
  function fun ( x, y ){
    this.x = x;
    this.y = y;
  };
  fun.prototype.GetHair = function(){
    return `${this.x}掉了两根头发,${this.y}说俺也一样!`;
  };
  let setHair = new fun('小明','老王');
  console.log(setHair.GetHair()); // 小明掉了两根头发,老王说俺也一样!

再来看一下ES6的class写法:

 class Interest {
    constructor( x, y, e, z ){
      this.x = x;
      this.y = y;
      this.e = e;
      this.z = z;
    }
    MyInterest(){
      let arr = [];
      console.log(`我会${[...arr,this.x,this.y,this.e,this.z]}!`);
    }
  }
  let GetInterest = new Interest('唱','跳','rap','篮球');
  console.log(GetInterest.MyInterest());  //我会唱,跳,rap,篮球!

ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已,constructor方法就是构造方法,而this关键字则代表实例对象。也就是ES5 的构造函数Point,对应 ES6 的Point类的构造方法。

用关键字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

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

以上是es6能用var声明变量吗的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
了解usestate():综合反应国家管理指南了解usestate():综合反应国家管理指南Apr 25, 2025 am 12:21 AM

useState()isaReacthookusedtomanagestateinfunctionalcomponents.1)Itinitializesandupdatesstate,2)shouldbecalledatthetoplevelofcomponents,3)canleadto'stalestate'ifnotusedcorrectly,and4)performancecanbeoptimizedusinguseCallbackandproperstateupdates.

使用React的优点是什么?使用React的优点是什么?Apr 25, 2025 am 12:16 AM

ReactispupularduetoItsComponent基于结构结构,虚拟,Richecosystem和declarativentation.1)基于组件的harchitectureallowslowsforreusableuipieces。

在React中调试:识别和解决共同问题在React中调试:识别和解决共同问题Apr 25, 2025 am 12:09 AM

todebugreactapplicationsefectefectionfection,usethestertate:1)proppropdrillingwithcontextapiorredux.2)使用babortControllerToptopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRaceeDitions.3)intleleassynChronOusOperations.3)

反应中的usestate()是什么?反应中的usestate()是什么?Apr 25, 2025 am 12:08 AM

usestate()inrectallowsStateMangementInfunctionalComponents.1)ITSimplifiestTateMempement,MakecodeMoreConcise.2)usetheprevcountfunctionToupdateStateBasedonitspReviousViousViousviousviousVious.3)

usestate()与用户ducer():为您的状态需求选择正确的挂钩usestate()与用户ducer():为您的状态需求选择正确的挂钩Apr 24, 2025 pm 05:13 PM

selectUsestate()forsimple,独立的StateVariables; useusereducer()forcomplexstateLogicorWhenStatedIppedsonPreviousState.1)usestate()isidealForsImpleUpdatesLikeTogGlikeTogGlikGlingaBglingAboolAboolAupDatingAcount.2)

使用usestate()管理状态:实用教程使用usestate()管理状态:实用教程Apr 24, 2025 pm 05:05 PM

useState优于类组件和其它状态管理方案,因为它简化了状态管理,使代码更清晰、更易读,并与React的声明性本质一致。1)useState允许在函数组件中直接声明状态变量,2)它通过钩子机制在重新渲染间记住状态,3)使用useState可以利用React的优化如备忘录化,提升性能,4)但需注意只能在组件顶层或自定义钩子中调用,避免在循环、条件或嵌套函数中使用。

何时使用usestate()以及何时考虑替代状态管理解决方案何时使用usestate()以及何时考虑替代状态管理解决方案Apr 24, 2025 pm 04:49 PM

useUsestate()forlocalComponentStateMangementighatighation; 1)usestate()isidealforsimple,localforsimple.2)useglobalstate.2)useglobalstateSolutionsLikErcontExtforsharedState.3)

React的可重复使用的组件:增强代码可维护性和效率React的可重复使用的组件:增强代码可维护性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionComponcontRossDifferentPartsofanApplicationorprojects.1)heSredunceReDunceNundSimplifyUpdates.2)yessistensistencyInusErexperience.3)

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器