ES6 常用語法
阿新 • • 發佈:2018-09-10
man 頂部 already 解構 ssa ide pre 多個 --
ECMAScript 6 簡稱ES6, 在2015年6月正式發布~ ECMAScript 是JavaScript語言的國際標準。
一, 變量聲明 const let var
ES6以前 var關鍵字來聲明變量,無論聲明在何處都存在變量提升這個事情,會提前創建變量;
作用域也只有全局作用域以及函數作用域~ 所以變量會提升在函數頂部或全局作用域頂部;
let 關鍵字表示變量,const 表示常量。都是塊級作用域,比如一個函數內部,代碼塊{}內部;
// var 變量提升 console.log(age); var age = 18; console.log(age);var let const// 聲明變量 // const let console.log(age); // age is not defined let age = 18; console.log(age); const a = 1; const a = 2; // Identifier ‘a‘ has already been declared let a = 1; let a = 2; // Identifier ‘a‘ has already been declared function test() { console.log(age);// age is not defined let age = 18; console.log(age); } test()
二,模板字符串
ES6引入了反引號``,使用 ${} 的方式
// 模板字符串, 可進行簡單的運算 let name = "glh"; let age = 18; let hobby = ["妹子1", "妹子2"]; let html = ` <ul> <li>${name}</li> <li>${age + 2}</li> <li>${hobby}</li> </ul>`; let ele1= document.getElementById("app"); let ele = document.getElementsByClassName("app")[0]; console.log(ele); console.log(ele1); ele.innerHTML = html; ele.innerText = ‘sdfsfss‘
三,箭頭函數
箭頭函數,是函數的快捷寫法,類比Python的匿名函數 lambda。
最直觀的三個特點
-- 不需要function關鍵字來創建函數
-- 省略return關鍵字
-- 繼承當前上下文的this關鍵字
// 箭頭函數和this function f(x) { return x+1 } let aa = x => x+1; console.log(aa(2)); // 關於this function f1() { console.log(this) } f1(); //this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} let obj1 = { f1:f1 }; obj1.f1(); //this: {f1: ƒ} let obj2 = { obj: obj1 }; obj2.obj.f1(); // this: {f1: ƒ} // this取決去函數的最近調用著箭頭函數和this
四,數據解構
數據的解構類似於我們python裏面的**解包
// 數據的解構 let arry = [1, 2, 3]; let obj = {name: ‘glh‘, age: 18}; let objArry = [ {name: ‘glh‘, age: 18}, {name1: ‘hudapao‘, age1: 28} ]; let [a, b, c] = arry; console.log(a); console.log(b); console.log(c); let {name, age} = obj; // 解構取對象的鍵對應的值 console.log(name); console.log(age); let [{name, age}, {name1, age1}] = objArry; console.log(name); console.log(name1); console.log(age); console.log(age1);數據的解構
五,類
// 類 類的繼承 class Foo{ // 類的構造方法 constructor(){ this.name = "glh"; this.gender = " man " } says(say){ console.log(this.name + this.gender + "說" + say) } } foo = new Foo(); foo.says(6666)
類的繼承
// 類的繼承 class Son extends Foo{ constructor(name, gender){ super(); this.name = name; this.gender = gender; } } son = new Son("兒子", "man man"); son.says(7777)
六, import 和 export
import 導入模塊、export導出模塊
// main.js // 導出多個聲明 export var name = "ggg" export var age = "18" export function aa() { return 1 } // 批量導出 export {name, age, aa} // test.js import {name, age, aa} from "./main" console.log(name) console.log(age) console.log(aa()) // 整個模塊導入 把模塊當做一個對象 // 該模塊下所有的導出都會作為對象的屬性存在 import * as obj from "./main" console.log(obj.name) console.log(obj.age) console.log(obj.aa())名字導出
// 一個模塊只能有一個默認導出 // 對於默認導出 導入的時候名字可以不一樣 // main.js var app = new Vue({ }); export default app // test.js // import app from "./main" import my_app from "./main"默認導出
ES6 常用語法