目錄
1.介紹
2.babel--ES6代碼轉換為ES5的代碼
1.安裝轉碼工具
2.安裝轉換規(guī)則
3.指定轉換規(guī)則 新建.babelrc
4.也可以將ES6轉換為ES5之后的文件輸入到另一個文件當中
5.將整個src目錄下的es6文件轉換成es5文件到dist目錄
?3.模塊化
1-module1.js
2-module2.js
ES6導出的是一個接口，接口存放的是一個變量
4.CommonJS模塊化
ES6模塊與CommonJS模塊的差異：
1.CommonJS模塊化規(guī)范 值的拷貝
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 月發(fā)布了正式名稱就是《ECMAScript 2015 標準》（簡稱 ES2015）。
ES6在ES5的基礎上拓展了很多新特性。
ES5 : 2009年發(fā)布
ES6 2015年發(fā)布 ES2015 在ES5基礎上拓展了很多新特性
ES7 2016年發(fā)布 ES2015年6月 (變化不大)
1.指數(shù) 3**3=27
2.數(shù)組的原型方法includes()用來判斷一個數(shù)組是否包含一個指定的值，
var arr=[1,2,3,4,] console.log(arr.includes(2)) [NaN].includes(NaN); ?// true [NaN].indexOf(NaN); ? // -1ECMAScript 6.0（以下簡稱 ES6）是 JavaScript語言的下一代標準，在2015年6月正式發(fā)布的。它的目標，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業(yè)級開發(fā)語言
2.babel--ES6代碼轉換為ES5的代碼
初始化項目
npm init
npm init -y 快速初始化項目1.安裝轉碼工具
cnpm install -g babel-cli ? babel
cnpm install --save -dev babel-cli babel-preset-latest2.安裝轉換規(guī)則
cnpm install -g babel-preset-latest3.指定轉換規(guī)則 新建.babelrc
{
? ?"presets":["latest"]
}
cnpm install --save-dev babel-cli babel-preset-latestbabel工具在項目中是在開發(fā)階段使用的工具 --save是開發(fā)階段工具安裝 局部安裝
jquery工具在項目中是在產(chǎn)品階段使用的工具 -dev是上線階段工具安裝 局部安裝
4.也可以將ES6轉換為ES5之后的文件輸入到另一個文件當中
babel 2-hello.js --out-file 2-helloo.js5.將整個src目錄下的es6文件轉換成es5文件到dist目錄
babel src --out-dir dist?3.模塊化
模塊化機制(commonjs與es6)
包管理機制 (npm、cnpm、yarn)
NPM是Javascript開發(fā)者能夠更方便的分享和復用以及更新代碼的工具，被復用的代碼被稱為包或者模塊，一個模塊中包含了一到多個js文件。在模塊中一般還會包含一個package.json的文件，該文件中包含了該模塊的配置信息。該文件是個json文件，其配置信息如下： name 模塊名稱 version 模塊版本 description 描述信息 main 指定模塊入口文件 type 當type值為module的時候，支持es模塊化 scripts 腳本，使用' npm run 腳本名'可以調(diào)用 dependencies 依賴關系 devDependencies 環(huán)境依賴或測試依賴
cnpm 更新 // 初次安裝cnpm 直接使用最新域名即可 $ npm config set registry https://registry.npmmirror.com/ $ npm install -g cnpm --registry=https://registry.npmmirror.com
// 項目中配置映射修改規(guī)則 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內(nèi)有自己的模塊化機制,實現(xiàn)CommonJS模塊化規(guī)范 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模塊化規(guī)范(服務器端)
ES6模塊化規(guī)范
??? 導入模塊 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 靜態(tài)加載? 編譯時加載
console.log('module2打印', fristName, lastName)
先轉碼 ?再運行
babel src --out-dir dist
node dist/module/2-module2.jsES6導出的是一個接口，接口存放的是一個變量
4.CommonJS模塊化
CommonJS 模塊就是對象，輸入時必須查找對象屬性。
模塊化對象
Node內(nèi)部提供一個Module構造函數(shù)。所有模塊都是Module的實例。每個模塊內(nèi)部，都有一個module對象，代表當前模塊。它有以下屬性。module.id 模塊的識別符，通常是帶有絕對路徑的模塊文件名。 module.filename 模塊的文件名，帶有絕對路徑。 module.loaded 返回一個布爾值，表示模塊是否已經(jīng)完成加載。 module.parent 返回一個對象，表示調(diào)用該模塊的模塊。 module.children 返回一個數(shù)組，表示該模塊要用到的其他模塊。 module.exports 表示模塊對外輸出的值。
//nodejs模塊導出 commonJS規(guī)范
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模塊化規(guī)范 值的拷貝
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.存在暫時性死區(qū)文章來源：http://www.zghlxwxcb.cn/news/detail-552003.html
2.const 用于聲明一個常量
????????1.變量聲明不會被提升，即在變量聲明之前無法使用該變量
????????2.不允許重復聲明。
????????3.具有局部作用域，即const聲明的變量只能在對應代碼塊中使用
????????4.const聲明的變量在聲明的時候就需要賦值。
????????5.存在暫時性死區(qū)文章來源地址http://www.zghlxwxcb.cn/news/detail-552003.html
到了這里，關于ECMAScript6和其常量變量的聲明的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
