所属分类:web前端开发
es6的6种变量定义方法:1、用关键字var定义变量,语法“var 变量名=值;”;2、用关键字function定义变量;3、用关键字const定义变量,语法“const 变量名=值;”;4、用关键字let定义变量,语法“let 变量名=值;”;5、用关键字import定义变量;6、用关键字class定义变量。
本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。
es5只提供了两种声明变量的方法,即var和function。
ES6 除了添加let和const命令,还有两种声明变量的方法:import命令和class命令。
所以,ES6 一共有 6 种声明变量的方法,即var / function / let / const / import / class
(1) var命令
var a ; //undefined
var b = 1;
登录后复制
(2)function命令
function add(a) {
var sum = a + 1;
return sum;
}
登录后复制
(3) cosnt命令
const a; //报错,必须初始化
const b = 1;
b = 2; //报错,TypeError: Assignment to constant variable.
登录后复制
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种变量定义方法是什么的详细内容,更多请关注zzsucai.com其它相关文章!