ECMAScript6和其常量变量的声明

这篇具有很好参考价值的文章主要介绍了ECMAScript6和其常量变量的声明。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.介绍

2.babel--ES6代码转换为ES5的代码

1.安装转码工具

2.安装转换规则

3.指定转换规则 新建.babelrc

4.也可以将ES6转换为ES5之后的文件输入到另一个文件当中

5.将整个src目录下的es6文件转换成es5文件到dist目录

​3.模块化

1-module1.js

2-module2.js

ES6导出的是一个接口,接口存放的是一个变量

4.CommonJS模块化

ES6模块与CommonJS模块的差异:

1.CommonJS模块化规范 值的拷贝

1.1导出模块  

1.2导入模块

2.ES6模块 值的引用

2.1导出模块  

2.2导入模块

声明

1.let 用于声明一个变量

2.const 用于声明一个常量


1.介绍

ECMAScript(简称ES)的几个重要版本

ES6是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等,ES6 的第一个版本,在 2015 年 6 月发布了正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。

ES6在ES5的基础上拓展了很多新特性。

ES5 : 2009年发布

ES6 2015年发布 ES2015 在ES5基础上拓展了很多新特性

ES7 2016年发布 ES2015年6月 (变化不大)

1.指数 3**3=27

2.数组的原型方法includes()用来判断一个数组是否包含一个指定的值,

var arr=[1,2,3,4,] console.log(arr.includes(2))

[NaN].includes(NaN);  // true
[NaN].indexOf(NaN);   // -1
 
 

ECMAScript 6.0(以下简称 ES6)是 JavaScript语言的下一代标准,在2015年6月正式发布的。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言

2.babel--ES6代码转换为ES5的代码

初始化项目 
npm init 
npm init -y 快速初始化项目

1.安装转码工具

cnpm install -g babel-cli   babel
cnpm install --save -dev babel-cli babel-preset-latest

2.安装转换规则

cnpm install -g babel-preset-latest

3.指定转换规则 新建.babelrc

{
   "presets":["latest"]
}
cnpm install --save-dev babel-cli babel-preset-latest

babel工具在项目中是在开发阶段使用的工具 --save是开发阶段工具安装 局部安装
jquery工具在项目中是在产品阶段使用的工具 -dev是上线阶段工具安装 局部安装

4.也可以将ES6转换为ES5之后的文件输入到另一个文件当中

babel 2-hello.js --out-file 2-helloo.js

5.将整个src目录下的es6文件转换成es5文件到dist目录

babel src --out-dir dist

​3.模块化

模块化机制(commonjs与es6)

包管理机制 (npm、cnpm、yarn)

NPM是Javascript开发者能够更方便的分享和复用以及更新代码的工具,被复用的代码被称为包或者模块,一个模块中包含了一到多个js文件。在模块中一般还会包含一个package.json的文件,该文件中包含了该模块的配置信息。该文件是个json文件,其配置信息如下: name 模块名称 version 模块版本 description 描述信息 main 指定模块入口文件 type 当type值为module的时候,支持es模块化 scripts 脚本,使用' npm run 脚本名'可以调用 dependencies 依赖关系 devDependencies 环境依赖或测试依赖

cnpm 更新 // 初次安装cnpm 直接使用最新域名即可 $ npm config set registry https://registry.npmmirror.com/ $ npm install -g cnpm --registry=https://registry.npmmirror.com

// 项目中配置映射修改规则 npm.taobao.org => npmmirror.com registry.npm.taobao.org => registry.npmmirror.com

# 旧 $ npm config set registry http://registry.npm.taobao.org/ # 新 $ npm config set registry https://registry.npmmirror.com/# 旧

$ npm install -g cnpm --registry=https://registry.npm.taobao.org # 新 $ npm install -g cnpm --registry=https://registry.npmmirror.com

# 旧 $ npm install -g yarn --registry=https://registry.npm.taobao.org # 新 $ npm install -g yarn --registry=https://registry.npmmirror.com

ES6模块化代码  import export
NodeJS内有自己的模块化机制,实现CommonJS模块化规范 require('babel-polyfill')
a.js b.js b.js要使用a.js中的变量
1.html文档引入 a.js b.js --
2.模块化的导入与导出,模块之间就可以通信了
request.js
    export function get(){
    }
Home.vue
    import {get} from '/路径'
a.js将name导出
b.js里将name导入

CommonJs模块化规范(服务器端)

ES6模块化规范
    导入模块 import 'xxx'
导出模块
    export {firstName,lastName};//列表导出
   export {firstName as first,lastName as last};//重命名导出
    export var a=3;导出单个属性;
    export functions(){}//导出单个属性
    默认导出
   一个模块只能有一个默认导出,不能使用 var、let 或 const 用于导出默认值 export default。
       export default{}
        export default function (){}   
错误写法
    var a=1;  
    export a; 没有提供对外的接口 export{a}

1-module1.js

let fristName = 'ren'
let lastName = 'terry';
export { fristName, lastName }
console.log('这是module1模块')

2-module2.js

import './1-module1'
import { fristName, lastName } from './1-module1'
// es6 静态加载  编译时加载
console.log('module2打印', fristName, lastName)
先转码  再运行
babel src --out-dir dist
node dist/module/2-module2.js
ES6导出的是一个接口,接口存放的是一个变量

4.CommonJS模块化

CommonJS 模块就是对象,输入时必须查找对象属性。

模块化对象

Node内部提供一个Module构造函数。所有模块都是Module的实例。每个模块内部,都有一个module对象,代表当前模块。它有以下属性。module.id 模块的识别符,通常是带有绝对路径的模块文件名。 module.filename 模块的文件名,带有绝对路径。 module.loaded 返回一个布尔值,表示模块是否已经完成加载。 module.parent 返回一个对象,表示调用该模块的模块。 module.children 返回一个数组,表示该模块要用到的其他模块。 module.exports 表示模块对外输出的值。

//nodejs模块导出  commonJS规范
let firstname = 'ren';
let lastname = 'terry';
// module.exports.firstname = firstname;
module.exports = {
  firstname: firstname,
  lastname: lastname
};
// Nodejs模块导入
let { firstname, lastname } = require('./module3');
console.log(firstname, lastname);
console.log(module.id);
console.log(module.filename);
console.log(module.loaded);
console.log(module.parent);
console.log(module.children);

ES6模块与CommonJS模块的差异:

1、CommonJS 模块输出的是一个值的拷贝/复制,ES6 模块输出的是值的引用。
2、CommonJS 模块是运行时加载,ES6 模块是编译时输出接口.

1.CommonJS模块化规范 值的拷贝

1.1导出模块
 
  let firstname='ren';
   let lastname='terry';
   setTimeout(()=>{
       firstname:'zhao'
   },2000)
   module.exports={
       firstname,
       lastname
   };
1.2导入模块
 let {firstname,lastname}=require('./module1.js');
   console.log(firstname,lastname);
   setTimeout(()=>{
      console.log(firstname,lastname);//ren terry
   },4000)

2.ES6模块 值的引用

2.1导出模块
 
  let firstname='ren';
   let lastname='terry';
   setTimeout(()=>{
       firstname='zhao'
   },2000)
   export {
       firstname,
       lastname
   };
2.2导入模块
 import {firstname,lastname} from './module3.js';
    console.log(firstname,lastname);
    setTimeout(()=>{
      console.log(firstname,lastname);//zhao terry
   },4000)

声明

1.let 用于声明一个变量

        1 变量不会提升,即在变量声明之前无法使用该变量
        2.不可以重复声明
        3.具有块级作用域,只在当前作用域有效
        4.存在暂时性死区

2.const 用于声明一个常量

        1.变量声明不会被提升,即在变量声明之前无法使用该变量
        2.不允许重复声明。
        3.具有局部作用域,即const声明的变量只能在对应代码块中使用
        4.const声明的变量在声明的时候就需要赋值。
        5.存在暂时性死区文章来源地址https://www.toymoban.com/news/detail-552003.html

到了这里,关于ECMAScript6和其常量变量的声明的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ECMAScript6历史-前端开发+ECMAScript+基础语法+入门教程

    我们首先来看 ECMA 是什么。 ECMA ,读音类似“埃科妈”,是 欧洲计算机制造商协会 (European Computer Manufacturers Association)的简称,是一家国际性会员制度的信息和电信标准组织。1994年之后,由于组织的标准牵涉到很多其他国家,为了体现其国际性,更名为 Ecma 国际 (Ecma In

    2024年01月16日
    浏览(49)
  • 【前端】ECMAScript6从入门到进阶

    1.ES6简介及环境搭建 1.1.ECMAScript 6简介 (1)ECMAScript 6是什么 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 (2)ECMAScript 和 JavaScript 的关系 E

    2024年02月07日
    浏览(42)
  • 【ECMAScript6_3】正则、数值、函数、数组、对象、运算符

    1、如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符。 ES5不允许第二个参数使用修饰符, 2、ES6将字符串中可以使用正则表达式的4个方法全部调用RegExp的

    2024年02月15日
    浏览(39)
  • 【ECMAScript6_6】async 函数、Class、Module、异步遍历器、ArrayBuffer、Decorator装饰器

    1、async 函数 async 函数是什么?一句话,它就是 Generator 函数的语法糖。async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。 async函数自带执行器,只要调用了asyncReadFile函数,它就会自动执行,输出最后结果。不像 Generator 函数,需要调用next方法

    2024年02月16日
    浏览(43)
  • Golang 基本常量声明及 iota 使用

    普通声明时,与局部变量声明的方式一致: 多行常量声明时,如果常量值表达式为空,则会和前一个常量的值表达式相同。 iota 是常量声明时的一个自增的特殊变量; iota 在const 内部的第一行出现时,值为0,后续每新增一行,iota都会自增1。(可以理解为行索引或者行号)

    2024年02月13日
    浏览(45)
  • 【C语言趣味教程】(5) 常量:字面常量 | 类型常量 | const 关键字 | const 的声明 | 程序中的只读概念 | const 保护机制 | 如何巧妙区分 “指针常量“ 和 “常量指针“

        🔗 《C语言趣味教程》👈 猛戳订阅!!! ✨ 专栏介绍 / 总目录: 【C语言趣味教程】(0) 导航篇 ​ —— 热门专栏《维生素C语言》的重制版 —— 💭 写在前面: 这是一套 C 语言趣味教学专栏,目前正在火热连载中,欢迎猛戳订阅!本专栏保证篇篇精品,继续保持本人

    2024年02月15日
    浏览(45)
  • 什么是常量?如何区分常量和变量?

            什么是常量,什么是变量?怎样区分⼆者? 1. 常量与变量         (1)常量即其值在程序运⾏的过程中是不可以改变的,如123,-4567 为数值常量;         (2)变量是在程序运⾏期间其值是可以进⾏变化的量                  如 int a; char b:是整型变

    2024年02月02日
    浏览(39)
  • 指针变量、指针常量与常量指针的区别

    定义 :指针变量是指存放地址的变量,其值是地址。 一般格式 :基类型 指针变量名;(int p) 关键点 : 1、int * 表示一种指针类型(此处指int 类型),p(变量名)即为定义的指针变量名。 2、在定义指针变量时必须指定基本类型,知道数据类型,才能按存储单元的长度以及数据的

    2024年02月11日
    浏览(48)
  • 逗号链式声明-变量声明中使用逗号声明多个变量

    在JavaScript中,使用 逗号, 可以将多个变量声明在同一行中。 使用逗号将多个变量声明在同一行中。这种方式通常被称为“逗号链式声明”。 这种写法相对于分别声明每个变量来说,可以更加简洁和清晰。 不过,需要注意的是,在同一行中声明多个变量时,如果没有使用逗号

    2024年02月03日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包