es6新增的声明方法有什么

es6新增的声明方法有什么

浏览次数:2180次
信息来源: 银河系资源网
更新日期: 2022-05-13
文章简介

新增声明方法:1、let,用于声明变量,语法“let 变量名=值”;2、const,用于声明常量,语法“const 常量名=值”;3、class,用于声明类,语法“class 类名{...}”;4、import,用于声明静态加载的输入变量。本文操...

新增声明方法:1、let,用于声明变量,语法“let 变量名=值”;2、const,用于声明常量,语法“const 常量名=值”;3、class,用于声明类,语法“class 类名{...}”;4、import,用于声明静态加载的输入变量。

本文操作环境: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新增的声明方法有什么的详细内容

标签: 暂无标签
jquery怎么设置文本框只读
« 上一篇
jquery怎么去掉元素
下一篇 »
  • jquery怎么在元素内部增加元素
    594710阅读
    方法:1、用“$(指定元素).prepend(新元素)”或“$(新元素).prependTo(指定元素)”,可在开头增加元素;2、用“$(指定元素).append(新元素)”或“$(新元素).appendTo(指定元素)”,在末尾增加元素。本教程操作环境:...
  • css怎么去除a标签鼠标样式
    296035阅读
    在css中,可用cursor属性去除a标签的鼠标样式,该属性用于定义鼠标指针在一个元素边界范围内所用的鼠标样式,属性值设置为none时,会去除元素的鼠标样式,设置为default时,显示默认箭头样式,语法为“a{cursor:none...
  • react的脚手架是什么意思
    39954阅读
    在react中,脚手架是快速生成项目工程化结构工具的意思;React脚手架能够快速开始一个React的项目,生成一个通用的目录结构,并配置所需环境,其中包含基础的依赖库,只需要利用“npm install”就能够安装,节省了项...
  • 浅析Bootstrap中列表组、分页和进度条组件的用法
    39545阅读
    Bootstrap中怎么实现列表组、分页和进度条?下面本篇文章给大家介绍一下Bootstrap中列表组、分页和进度条组件的用法,希望对大家有所帮助!列表组使用.list-group选择列表组添加.active到 a.list-group-item以指示当...
  • JavaScript有没有stl库
    10026阅读
    JavaScript没有stl库。stl库是标准模板库,是一个具有工业强度的高效的“C++”程序库,用于提供基本的语言本身的数据结构等扩展支持,stl库被容纳与“C++”标准程序库中,因此在JavaScript中没有stl库。本教程操作环...
  • es6的模块导出使用什么方法
    5519阅读
    es6的模块导出使用的方法:1、导出默认模块,一个模块文件只能有一个默认模块,语法为“export default 需要导出的成员”;2、导出普通模块,一个模块文件可以有多个普通模块,语法为“export 按需导出的成员”。本教...
  • css3新增长度单位的使用方法是什么
    4261阅读
    使用方法:1、em表示相对于当前对象内文本的字体大小;2、rem表示相对于根元素的字体大小;3、ch表示数字0的大小;4、vh表示百分比视口的高度;5、vw表示百分比视口的宽度;6、ex表示当前字体的小写x字母的的高度或者...
  • 在css3中可实现缩放效果的是什么属性
    4224阅读
    在css3中可实现缩放效果的是transform属性。transform属性可以和scaleX()函数实现水平方向的缩放效果、可以和scaleY()函数实现垂直方向的缩放效果、可和“scale(x,y)”函数实现水平方向和垂直方向同时缩放。本教程操...
  • 使用javascript:void(0)的原因是什么
    4171阅读
    使用“javascript:void(0)”的原因是:可以防止链接跳转到其他页面,保留链接的样式,并且不让链接执行实际操作。void关键字用于指定要计算一个表达式但是不返回值,“void(0)”也就表示不进行任何操作。本教程操作环...
  • jquery怎么设置文本框只读
    4071阅读
    方法:1、利用“$(input元素)”语句获取文本框元素对象;2、利用attr()方法设置文本框只读,将readonly属性值设置为readonly即可,语法为“文本框元素对象.attr("readonly","readonly")”。本教程操作环境:windows1...

如本文对您有帮助,随意赞赏一下!