平武建站

es6是框架吗

本文小编为大家详细介绍“es6是框架吗”，内容详细，步骤清晰，细节处理妥当，希望这篇“es6是框架吗”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联专业为企业提供佛山网站建设、佛山做网站、佛山网站设计、佛山网站制作等企业网站建设、网页设计与制作、佛山企业网站模板建站服务，十载佛山做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

es6不是框架，而是一种JavaScript语言的标准。es6是ECMAScript的第6版，是一种由Ecma国际（国际性会员制度的信息和电信标准组织）通过ECMA-262标准化的脚本程序设计语言；它是脚本语言JavaScript的核心，提供语言的语法和基本对象。

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 = `
  • first
    •  
  • second
`;

    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是框架吗”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。


名称栏目：es6是框架吗
路径分享：http://pwwzsj.com/article/jpphhp.html

其他资讯