es6新增的声明方法有什么-LMLPHP

本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。

es6新增的声明方法有什么

声明变量在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新增的声明方法有什么的详细内容,更多请关注Work网其它相关文章!

09-05 13:09