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.存在暂时性死区