ES6 Day01

绝地灬酷狼 2023-10-13 17:07 12阅读 0赞

## 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月 (变化不大)
> 
> f 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.存在暂时性死区