新增声明方法:1、let,用于声明变量,语法“let 变量名=值”;2、const,用于声明常量,语法“const 常量名=值”;3、class,用于声明类,语法“class 类名{...}”;4、import,用于声明静态加载的输入变量。
本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。
声明变量在ES5之前有两种:第一种是声明变量和常量的 “ var ”。第二种是声明函数的 “ function ”。在ES6中,声明变量的方法一下子扩充了到了 6 种,总结如下:
声明变量或常量:var 、let(ES6新增) 、const (ES6新增);
声明函数变量:function ;
声明类:class(ES6新增);
声明 ‘ 静态加载 ’ 输入变量:import (ES6新增);
在我们学习这几个新增的方法之前,还需要知道几个ES6新定义的概念:
1,let和const
定义:
let: ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的块级作用域内有效。
const:ES6新增了const命令,声明一个只读的常量。一旦声明,常量的值就不能改变。同let一样声明的变量只在块级作用域内有效;
特点差异:
相同:都不存在变量提升,所以只能声明后再使用,不声明使用会报错;
都有暂时性死区(TDZ),这也解释了为什么不声明变量就使用会报错;
都不允许重复声明;
不同:const声明的变量是 “ 不可改变 ” 的变量,所以在声明变量时必须直接赋值,常量赋值后不能改变值,否则报错;
注意:上边我们说的const声明的变量不可改变是针对 “常量” 我理解是“ 基本数据类型 ”,比如字符串,数值,布尔值等等。并不是指的所有数据类型,当我们用const声明的变量是引用数据类型时,是可以改变值的。
这里就说到了const保存的内容的真正含义:const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
用法:
// let 用法 let a = '123'; // const 用法 const b = '456'
2,class
定义:ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
(class定义类,其实是很重要的一个知识,这里只是简单的学习一下它的最最最基本的用法,也是作为一个引子。深入的学习我们会在后续记录)
用法:
// 基本方法定义一个类 class Point{ constructor(x,y){ this.x = x; this.y = y; } toString(){ return '( '+ this.x +','+ this.y +')'; } } var point = new Point(2,3) point.toString(); // (2,3) // 表达式的方法定义一个类 let person = new class { constructor(name) { this.name = name; } sayName() { console.log(this.name); } }('张三'); person.sayName(); // "张三"
3,import
用法:
使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。
// main.js import { firstName, lastName, year } from './profile.js'; function setName(element) { element.textContent = firstName + ' ' + lastName; }
上面代码的import命令,用于加载profile.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。
import { lastName as surname } from './profile.js';
【相关推荐:《vue.js教程》】
以上是es6新增的声明方法有什么的详细内容。更多信息请关注PHP中文网其他相关文章!