前端知識整理 ES6

2021-08-16 20:58:51 字數 1722 閱讀 4856

es6

(1)  模組化:

export default

export function fn1() 

export function fn2()

import util from './util1.js'

import from './util2.js'

(2) 使用babel:

npm install babel-core babel-preset-es2015 babel-preset-latest

建立.babelrc檔案

npm intall -g babel-cli  安裝babel的命令列工具

babel --version

babel myfile.js  直接輸出到終端

babel myfile.js -o upfile.js 將結果寫到新的檔案

babel src -d build: src目錄對應build目錄的輸出

babel是外掛程式機制,只安裝babel-core不能將es5進行轉換,必須要按照相應的外掛程式

乙個外掛程式只能做一件事情,可以使用預設(一堆外掛程式)

npm install babel-preset-es2015

在.babelrc中寫

babel-preset-latest: 是乙個特殊的presets,總是包括最新的編譯外掛程式

babel-preset-env: 只編譯所編譯環境所缺少的**,比較推薦

如使用webpack,需要安裝babel-loader

module: ,

"modules": false,

"loose": true

}],'stage-2',

'react'],}

}]}

如使用gulp,需要安裝gulp-babel

babel幾乎可以編譯所有的新的js語法,但是對於api來說並非如此,新增的物件如promise和array.find()等方法,並沒有轉換。

這時需要用到babel-polyfill或者babel-runtime

(3) promise

new promise例項,而且要return

new promise時要傳入函式,函式有resolve和reject兩個引數

成功時執行resolve(),失敗時執行reject()

then監聽結果

function loadimg(src)

img.οnerrοr=function()

})return promise

}var src=''

var result=loadimg(src)

result.then(function(img),function())

(4)其他

let/const:

多行字串/模板變數:

const html = `$

`

解構賦值

const obj=

const =obj

console.log(a) //10

console.log(c) //40

函式預設引數

function(a, b=0){}

可以用來代替:

function(a,b)

}

箭頭函式

前端 ES6總結

1 arr.push 在陣列末尾新增元素,返回陣列長度 let arr 1,2,3 let length arr.push 4 console.log length 4console.log arr 1,2,3,4 2 arr.unshift 在陣列首位新增元素,返回陣列長度 let arr 1,2...

前端學習筆記 ES6

1 塊級作用域 任何一對花括號 中的語句集都屬於乙個塊,在塊中宣告的變數在 塊外都是不可訪問的,稱之為塊級作用域,es5以前沒有塊級作用域 2 let 關鍵字 let用於宣告變數 類似於var 其宣告的變數只在當前 塊內有效,實際上是建立了塊級作用域 1 建立塊級作用域 if true consol...

前端ES6簡單總結

首先是es6當中新增了 let有以下2個特點 1.作用域嚴格 2.不允許重名和重複賦值 console.log a console.log b 這樣的話執行時會報a沒賦值的錯誤 let a 123 var b 456 var b 789 這樣執行之後b是789,a是123 let a 123 let...