• 技术文章 >web前端 >前端问答

    es6是不是框架

    青灯夜游青灯夜游2022-11-16 19:03:09原创181

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

    大前端零基础入门到就业:进入学习

    本教程操作环境: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是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.从就业出发,中小型公司,全栈,简历上多一个技能,试用期也能更快的上手。

    变量

    面向对象

      1. {pojo}(实例变量、实例方法、get、set) 
      2. function(实例变量、实例方法、prototype、apply、call) 
      3. class(实例变量、实例方法、prototype、extends、super)

    prototype

    只有函数、class才有原型,意义在于动态添加实例变量和实例方法及实现继承。

    继承

    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)
    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)
    	}
    }

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

    以上就是es6是不是框架的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:javascript ES6
    上一篇:es6怎么替换数组中指定元素 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 使用es6怎么实现两个变量的转换• es6 number对象的新增方法有哪些• es6怎么找出2个数组中不同项• 聊聊JavaScript中实现继承的6种方法• JavaScript详细解析之作用域链• 深入探讨JavaScript中的async函数
    1/1

    PHP中文网