首頁  >  文章  >  web前端  >  es6是不是框架

es6是不是框架

青灯夜游
青灯夜游原創
2022-11-16 19:03:091263瀏覽

es6不是框架,而是一種JavaScript語言的標準。 es6是ECMAScript的第6版,是一種由Ecma國際(國際性會員制度的資訊和電信標準組織)透過ECMA-262標準化的腳本程式設計語言;它是腳本語言JavaScript的核心,提供語言的語法和基本對象。

es6是不是框架

本教學操作環境: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 中絕大多數的特性。 【推薦學習:

javascript高階教學

為什麼要學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: &#39;qc&#39;},{}]];
    const [aa,bb,cc,dd,ee,ff]="hello";

    let {name="replaceName",age,id}={name:&#39;cursor&#39;,age:19,id:&#39;vc6dfuoc91vpdfoi87s&#39;};
    let {type:tipType,min:minNumber}={type:&#39;message&#39;,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)
	}
}

【相关推荐:javascript视频教程编程视频

以上是es6是不是框架的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn