es6是不是框架 - tw511教學網

es6不是框架，而是一種JavaScript語言的標準。es6是ECMAScript的第6版，是一種由Ecma國際（國際性會員制度的資訊和電信標準組織）通過ECMA-262標準化的指令碼程式設計語言；它是指令碼語言JavaScript的核心，提供語言的語法和基本物件。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

es6不是框架，而是一種JavaScript語言的標準。

es6全稱ECMAScript6（ECMAScript的第6個版本），是於2015年6月正式釋出的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。它的目標是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

而ECMAScript是一種由Ecma國際通過ECMA-262標準化的指令碼程式設計語言。這種語言在全球資訊網上應用廣泛，它往往被稱為JavaScript或JScript，所以它可以理解為是JavaScript的一個標準，但實際上後兩者是ECMA-262標準的實現和擴充套件。

JavaScript 與 ECMAScript 的關係

有時人們會將 JavaScript 與 ECMAScript 看作是相同的，其實不然，JavaScript 中所包含的內容遠比 ECMA-262 中規定的多得多，完整的 JavaScript 是由以下三個部分組成：

核心（ECMAScript）：提供語言的語法和基本物件；
檔案物件模型（DOM）：提供處理網頁內容的方法和介面；
瀏覽器物件模型（BOM）：提供與瀏覽器進行互動的方法和介面。

而ECMAScript是JavaScript的核心，描述了語言的基本語法(var、for、if、array等)和資料型別(數位、字串、布林、函數、物件(obj、[]、{})、null、未定義)，ECMAScript是一套標準，定義了一種語言（比如JS）是什麼樣子。

ECMAScript是由ECMA-262定義的ECMAScript是一種在國際認可的標準的指令碼語言規範，與Web瀏覽器沒有依賴關係。ECMA-262標準主要規定了這門語言由以下組成部分：

語法
變數和資料型別
關鍵字和保留字
操作符
控制語句
物件

ECMAScript 6 目前基本成為業界標準，它的普及速度比 ES5 要快很多，主要原因是現代瀏覽器對 ES6 的支援相當迅速，尤其是 Chrome 和 Firefox 瀏覽器，已經支援 ES6 中絕大多數的特性。【推薦學習：】

為什麼要學ES6？ES6的用處是什麼？

ES5不能滿足目前前端越來越複雜，龐大的現狀，可以說已經過時了，ES6是對ES5的增強和升級。

1.主流的瀏覽器都已經全面支援ES6

2.行業內較新的前端框架都已經全面使用ES6的語法

3.微信小程式,uni-app等都是基於ES6的語法

4.從就業出發，中小型公司，全棧，簡歷上多一個技能，試用期也能更快的上手。

變數

let
一個作用域中只能宣告一個let變數，若子作用域中也宣告了let變數，則不影響父作用域中的let變數。
var
一個作用域中可以宣告多個var變數，若子作用域中也宣告了var變數，也在影響父作用域中的var變數。
const
常數，相當於final，不可被修改。
global
不宣告變數型別的變數預設為全域性變數(window屬性)。

物件導向

原理
JavaScript 的物件導向特性是基於原型和建構函式的，與常見的基於類的不同。JavaScript 沒有提供物件繼承的語言級別特性，而是通過原型複製來實現的。
三種建立物件方法

  1. {pojo}（範例變數、實體方法、get、set） 
  2. function（範例變數、實體方法、prototype、apply、call） 
  3. class（範例變數、實體方法、prototype、extends、super）
登入後複製

prototype

只有函數、class才有原型，意義在於動態新增範例變數和實體方法及實現繼承。

繼承

call/apply
應用在繼承關係中，子類向父類別傳參時應用此關鍵字
extends
繼承關係中使用，A extends B，則A是B的父類別
super
在子類中呼叫父類別的方法時應用次關鍵字
ES5繼承方式
接下來我們手寫一套組合繼承（原型鏈繼承（繼承原型） + 構造繼承（繼承屬性））。這種方式即可避免原型鏈繼承中無法實現多繼承，建立子類範例時，無法向父類別建構函式傳參的弊端，也可避免構造繼承中不能繼承原型屬性/方法的弊端。

function Person(name,age){                                             /* 父類別 */
    this.name = name || 'father';                            //範例變數
    this.namesonF = this.nameson;
    this.age = age;
    this.talk = function(){alert("talk");};                 //實體方法
};
function Son(name){                                                     /* 子類 */
    this.nameson = name || 'son';
    // Person.call(this,'name',18);                          //繼承：構造繼承，複製父類別的範例屬性給子類，不能繼承原型屬性/方法
    Person.apply(this,['name',18]);                          //繼承：構造繼承，複製父類別的範例屬性給子類，不能繼承原型屬性/方法
}
// Son.prototype = new Person("zhangsan",19);                   //繼承：原型鏈繼承，父類別的範例作為子類的原型，拷貝屬性兩次，不合理
Son.prototype = Person.prototype;                            //繼承：原型鏈繼承，父類別的範例作為子類的原型

Person.prototype.publicParam="param1";                       //動態新增範例變數
Person.prototype.talk=function(){alert("talk");}            //動態新增實體方法

var son = new Son();                                         //範例化物件，呼叫建構函式(constructor)
登入後複製

ES6繼承方式
ES6的繼承創造了一種新的寫法，與Java、Scala等語言非常類似，預設使用組合繼承（原型鏈繼承（繼承原型） + 構造繼承（繼承屬性））的方式。

class Point {
    constructor(x, y) {
        this.x = x;                                           //範例變數
        this.y = y;
    }
}
class Son extends Point {
    constructor(z, w) {
        super(z,w);
        this.z = z;                                           //範例變數
        this.w = w;
    }
}
var son = new Son(1,2);
登入後複製

arrow functions

箭頭函數，是ES6中新加入的語法，於Java的lambda，scala的函數式語法非常相似

程式碼

var single = a => console.log(a);
var single = (a) => (console.log(a));
var single = (a, b) => {console.log(a + b)};
var single = (a, b) => {return a + b};
登入後複製

template string

模版字串，字串拼接的新語法

程式碼

var templateStr = () => {
    var str1 = "adsf\nsdfa";

    var template1 = `<ul><li>first</li> <li>second</li></ul>`;

    var x = 1;
    var y = 2;
    var template2 = `${x} + ${y} = ${x + y}`;

    var template3 = `${lettest4()}`;
    console.log(str1)
    console.log(template1)
    console.log(template2)
    console.log(template3)
}
登入後複製

destructuring

重構/解構，變數互動的語法

程式碼

var destructuring = () => {
    var [a,b,...c]=[1,2,3,4,5,6,7,8,9,10];
    let [temp="replaceString"] = ["tempString"];
    let [age2, [{name: fname},{age: fname2="replaceString"}]] = [20, [{name: 'qc'},{}]];
    const [aa,bb,cc,dd,ee,ff]="hello";

    let {name="replaceName",age,id}={name:'cursor',age:19,id:'vc6dfuoc91vpdfoi87s'};
    let {type:tipType,min:minNumber}={type:'message',min:20};
    let {sin,cos,tan,log}=Math;

    var fun = function({x,y}={}){return [x,y];}
    fun({x:100,y:2});

    [a,b]=[b,a];                                        //交換

    var map = [1,2,3]
    var map=new Map();
    map.set("id","007");
    map.set("name","cursor");
    for(let [key,value] of map){}
    for(let [key] of map){}
    for(let [,value] of map){}

    var arr = [1,2,3,4]
    for(let val of arr){val}

}
登入後複製

arguments

實參，ES6中加入的直接讀取引數的變數

程式碼

function argumentsTest(a,b) { 
	for(let val of arguments)
		{console.log(val)
	}
}
登入後複製

【相關推薦：、】

以上就是es6是不是框架的詳細內容，更多請關注TW511.COM其它相關文章！