ecmascript_ecmascript6 - CSDN
  • 1、ECMAScript的简介 ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它...

    1、ECMAScript的简介

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

    1.1 ECMA International

    ECMA International是一家国际性会员制度的信息和电信标准组织,它和企业密切相连的组织,所以 Ecma国际制定的规范标准都是由各类企业来做主要的制定和推广。1997年该组织发布了MCMA-262的标准,该标准制定了ECMAScript语言规范。ECMAScript就是从这里来的。

    1.2 ECMA-262标准(ES标准)

    ECMA-262是ECMA TC39小组制定的关于脚本语言的规范标准。TC39成员由来自一些对脚本编程感兴趣的公司的程序员组成的。

    ECMA-262标准定义了ECMAScript语言规范。这个标准也叫成为ECMAScript语言规范(ECMAScript Language Specification),简称ES规范。

    ES规范从1997发布到现在为止是第八个版本。ECMAScript是基于几种原始技术,最著名的是JavaScript(Netscape Navigator 2.0)和JScript(Microsoft IE3)。

    1.3 JavaScript标准化的历程

    1995年前后:互联网爆发,Web应用层出不穷,那时候只要有注册一个.com的域名,基本就能暴富,就如同现在的区块链和人工智能。就在那时候JavaScript有三个主流版本:

    (1)Netscape Navigator 3.0 中的 JavaScript。

    (2)IE 中的 JScript。

    (3)CEnvi 中的ScriptEase。

    与和其它编程语言不同的是,JavaScript 并没有一个标准来统一其语法或特性,而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加,这个语言的标准化显然已经势在必行。

    1997年:JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA)。第 39 技术委员会(TC39)被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”。 锤炼出了 ECMA-262第一版,该标准定义了名为 ECMAScript 的全新脚本语言。

    1998年:国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准(ISO/IEC-16262)。同年发布了ECMA-262第二个版(ES2).第二个版本基本没有加新功能。

    2002年:ECMA-262第三版(ES3),新增引入了强大的正则表达式,更好的字符串处理,新的控制语句,try / catch异常处理,更严格的错误定义,数字输出的格式化以及预期未来语言增长的微小变化。第三版在当时应用非常广泛,几乎所有的浏览器都支持ES3的标准。

    ECMA-262第4版本(ES4)夭折,部分功能被迁移到ES6中。

    2009年:ECMA-262第五版(ES5)发布。在ES3的基础上增加了很多功能:包括访问器属性,对象的反射创建和检查,属性的程序控制,附加的数组操作函数,对JSON对象编码格式的支持以及提供增强的错误检查和程序安全性的严格模式。

    2011年:被批准为国际标准ISO/IEC 16262:2011。同年发布ES5.1版本(对ES5做一些升级优化)同时被MCMA-262和ISO/IEC批准。

    2015年:ECMA-262第六版(ES6或者叫ES 2015语言规范),ES6可以说从2000年,ES3发布之后就开始沉淀,由于ES4的夭折,ES4中的一些功能特性一直等到ES6才发布,所以第六版的完全是十五年的努力的结果。

    ES6为大型应用程序提供更好的支持,创建Lib库,以及使用ECMAScript作为其它语言的编译目标。ES6主要新增了如下功能:主要增强包括模块,类声明,词法块范围,迭代器和生成器,异步编程的承诺,解构模式和适当的尾部调用。内置的ECMAScript库被扩展为支持额外的数据抽象,包括映射,集合和二进制数值数组,以及对字符串和正则表达式的使用。

     

    2、JavaScript的简介

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

    JavaScript是通用的跨平台脚本语言,遵守ECMA-262标准(ES标准),换句话说就是ECMAScript的方言。为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

    JavasSript商标属于Oracle公司,因为Sun公司被Oracle收购。JavaScript早年被Sun公司注册,代表JavaScript这门语言。但是最早发明JavaScript是网景公司。在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

    2.1 JavaScript基本特点

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

    (1)一种解释性脚本语言(代码不进行预编译)。

    (2)主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

    (3)可以直接嵌入HTML页面,但写成单独的JS文件有利于结构和行为的分离。

    (4)跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

    Javascript脚本语言同其它语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

    2.2 JavaScript组成部分

    JavaScript由ECMAScript、DOM、BOM三部分组成,如下图。

    JavaScript组成部分

    (1)ECMAScript:描述了该语言的语法和基本对象。

    (2)DOM:文档对象模型(DOM),描述处理网页内容的方法和接口。

    (3)BOM:浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

    2.2.1 DOM 文档对象模型

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

    2.2.2 BOM 浏览器对象模型

    BOM(Browser Object Model)即浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象;由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。

    浏览器窗口交互的一些对象,例如可以移动、调整浏览器大小的window对象,可以用于导航的location对象与history对象,可以获取浏览器、操作系统与用户屏幕信息的navigator与screen对象,可以使用document作为访问HTML文档的入口,管理框架的frames对象等。

    2.3 JavaScript处理引擎

    JavaScript处理引擎是能解析并且运行JavaScript代码的解释器。浏览器通常会有JavaScript引擎,JavaScript刚出来时就是运行在浏览器中,作为客户端语言使用。

    常见的JavaScript引擎:

    (1)Chrome V8

    (2)Firefox SpiderMonkey

    (3)Microsoft Edge Chakra

    提一下Node.js是基于Chrome V8引擎。上文提到V8引擎是用来解析执行JS,并且V8是基于ECMAScript标准实现的。换个角度说,Node.js里头没有DOM和BOM的操作,只保留的JavaScript的语法核心(ES),并且增加了事件驱动的非阻塞 I/O 模型,使其轻量级和高效。Node.js作为服务运行在Windows、Linux、Mac,把JavaScript的角色从前台开发,转移到了后台开发。

    还有当前有点过时的用于Flash编程的ActionScript也是ECMAScript的具体实现。

    学习资料来源:

    (1)链接:https://www.jianshu.com/p/10cfcb536d4a

    (2)链接:http://www.softwhy.com/article-9807-1.html

    (3)链接:https://baike.baidu.com/item/javascript/321142

    展开全文
  • 李游Leo - 10节课带你玩转ECMAScript 7 + ECMAScript 8 学会并掌握ECMAScript 7 + ECMAScript 8知识内容
  • 本课程包含了几乎所有的ECMAScript6核心内容,包括let、const、变量的解构赋值,字符串扩展、正则扩展、数值扩展、数组扩展、函数扩展、对象扩展、Symbol、Proxy和Reflect、二进制数组、Set和Map数据解构、Generator...
  • ECMAScript 6 基础教程

    2018-10-22 21:38:07
    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或...
  • ECMAScript ® 2017 Language Specification JavaScript官方文档第8版,文字版
  • Ecma & ECMAScript

    2020-03-10 17:48:38
    Ecma International是一个成立于1961年的行业协会,致力于信息和通信系统的标准化。 自1961年至今,Ecma International®一直有效,为及时制定各种全球信息和通信技术(ICT)和消费电子(CE...ECMAScript的®是Ecm...

    Ecma International 是一个成立于1961年的行业协会,致力于信息和通信系统的标准化。

    自1961年至今,Ecma International®一直有效,为及时制定各种全球信息和通信技术(ICT)和消费电子(CE)标准提供了便利。

    TC39 - ECMAScript的®

    通用,跨平台,与供应商无关的编程语言ECMAScript™的标准化。

    ECMAScript的® 是Ecma国际组织的注册商标。

    JavaScript TM是Oracle的商标。

    展开全文
  • 原文:ECMAScript regular expressions are getting better! 作者: Mathias Bynens: Google V8引擎开发者 译者:Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 ...
    
    
    

    为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

    1999年,ECMAScript 3添加了对正则表达式的支持。

    16年之后,ECMAScript 6(即ECMAScript 2015或者ES6)引入了Unicode模式(u选项), sticky模式(y选项)以及RegExp.prototype.flags的getter方法

    这篇博客将介绍ECMAScript正则表达式的最新特性

    1. dotAll模式(s选项)

    这个特性已经在ECMAScript 2018正式发布了。

    默认情况下,.可以匹配任意字符,除了换行符:

    /foo.bar/u.test('foo\nbar'); // false
    

    另外,.不能匹配Unicode字符,需要使用u选项启用Unicode模式才行。

    ES2018引入了dotAll模式,通过s选项可以启用,这样,.就可以匹配换行符了。

    /foo.bar/su.test('foo\nbar'); // true
    

    2. Lookbehind断言

    这个特性已经在ECMAScript 2018正式发布了。

    ECMAScript目前仅支持lookahead断言。

    下面示例是Positive lookahead,匹配字符串“42 dollars”中紧跟着是”dollars”的数字:

    const pattern = /\d+(?= dollars)/u;
    const result = pattern.exec('42 dollars');
    console.log(result[0]); // 打印42
    

    下面示例是Negative lookahead,匹配字符串“42 pesos”中紧跟着的不是”dollars”的数字:

    const pattern = /\d+(?! dollars)/u;
    const result = pattern.exec('42 pesos');
    console.log(result[0]); // 打印42
    

    ES2018添加了lookbehind断言

    下面示例是Positive lookbehind,匹配字符串“42"”的数字:

    const pattern = /(?<=\$)\d+/u;
    const result = pattern.exec('$42');
    console.log(result[0]); // 打印42
    

    下面示例是Negative lookbehind,匹配字符串“42"”的数字:

    const pattern = /(?<!\$)\d+/u;
    const result = pattern.exec('€42');
    console.log(result[0]); // 打印42
    

    Fundebug专注于网页、微信小程序、微信小游戏,支付宝小程序,React Native,Node.js和Java线上BUG实时监控,欢迎免费试用

    3. Named capture groups

    这个特性已经在ECMAScript 2018正式发布了。

    目前,正则表达式中小括号匹配的分组是通过数字编号的:

    const pattern = /(\d{4})-(\d{2})-(\d{2})/u;
    const result = pattern.exec('2017-01-25');
    console.log(result[0]); // 打印"2017-01-25"
    console.log(result[1]); // 打印"2017"
    console.log(result[2]); // 打印"01"
    console.log(result[3]); // 打印"25"
    

    这样很方便,但是可读性很差,且不易维护。一旦正则表达式中小括号的顺序有变化时,我们就需要更新对应的数字编号。

    ES2018添加named capture groups, 可以指定小括号中匹配内容的名称,这样可以提高代码的可读性,也便于维护。

    const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
    const result = pattern.exec('2017-01-25');
    console.log(result.groups.year); // 打印"2017"
    console.log(result.groups.month); // 打印"01"
    console.log(result.groups.day); // 打印"25"
    

    4. Unicode property escapes

    这个特性已经在ECMAScript 2018正式发布了。

    Unicode标准为每一个字符分配了多个属性。比如,当你要匹配希腊语字符时,则可以搜索Script_Extensions属性为Greek的字符。

    Unicode property escapes使得我们可以使用ECMAScript正则表达式直接匹配Unicode字符的属性:

    const regexGreekSymbol = /\p{Script_Extensions=Greek}/u;
    console.log(regexGreekSymbol.test('π')); // 打印true
    

    5. String.prototype.matchAll

    这个特性还处在Stage 3 Draft

    g和y选项通常用于匹配一个字符串,然后遍历所有匹配的子串,包括小括号匹配的分组。String.prototype.matchAll让这个操作变得更加简单了。

    const string = 'Magic hex numbers: DEADBEEF CAFE 8BADF00D';
    const regex = /\b[0-9a-fA-F]+\b/g;
    for (const match of string.matchAll(regex)) {
        console.log(match);
    }
    

    每一个迭代所返回的match对象与regex.exec(string)所返回的结果相同:

    // Iteration 1:
    [
        'DEADBEEF',
        index: 19,
        input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
    ]
    
    // Iteration 2:
    [
        'CAFE',
        index: 28,
        input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
    ]
    
    // Iteration 3:
    [
        '8BADF00D',
        index: 33,
        input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
    ]
    

    注意,这个特性还处在Stage 3 Draft,因此还存在变化的可能性,示例代码是根据最新的提案写的。另外,浏览器也还没有支持这个特性。String.prototype.matchAll最快可以被加入到ECMAScript 2019中。

    6. 规范RegExp遗留特性

    这个提案还处在Stage 3 Draft

    这个提案规范了RegExp的遗留特性,比如RegExp.prototype.compile方法以及它的静态属性从RegExp.$1RegExp.$9。虽然这些特性已经弃用(deprecated)了,但是为了兼容性我们不能将他们去。因此,规范这些RegExp遗留特性是最好的方法。因此,这个提案有助于保证兼容性。
    翻译原文

    展开全文
  • ECMAScript

    2019-01-04 09:18:37
    一、ECMAScript和JavaScript ECMA是标准,JS是实现 简称为ECMA或ES 二、兼容性 ES6(ES2015)–IE10+、Chrome、FireFox、移动端、NodeJs 编译、转换 1.在线转换 2.提前编译 babel==brower.js ==&amp;gt;...

    一、ECMAScript和JavaScript

    ECMA是标准,JS是实现
    简称为ECMA或ES

    二、兼容性

    ES6(ES2015)–IE10+、Chrome、FireFox、移动端、NodeJs

    编译、转换
    1.在线转换
    2.提前编译

    babel==brower.js ==>具体见面向对象的应用React

    三、内容大纲

    1.变量
    2.函数
    3.数组
    4.字符串
    5.面向对象
    6.Promise
    7.generator
    8.模块化


    一.变量

    1.问题:ES5只有全局作用域和函数作用域,没有块级作用域,会带来以下问题:
    a.变量提升导致内层变量可能会覆盖外层变量
    b.用来计数的循环变量泄露为全局变量
    所以ES5中采用闭包解决这个问题

    2.var的作用域是函数
    a.可以重复声明
    b.无法限制修改
    c.没有块级作用域:{}块级作用域

    3.ES6中:
    let 不能重复声明 变量-可以修改 块级作用域
    const 不能重复声明 常量-不可以修改 块级作用域

    二.函数

    1.箭头函数:()=>{} 可以里写为是function的简写
    a.如果只有一个参数,()可以省
    b.如果只有一个return,{}可以省

    2. 函数的参数
    a.数组的展开/参数的扩展
    (1).收集剩余参数
    function show (a,b,…args){}
    注意:rest parameter必须是最后一个
    (2).展开数组
    …arr => 1,2,3
    三个点加数组,结果和直接展开数组一样,取代了逗号
    b.默认参数

        //默认参数
        function show(a,b=5,c=10) {
            console.log(a,b,c)
        }
        show(99,10);
       // 传进新参数是按照新参数,否则按照之前的默认值
    

    3.解构赋值:
    a.左右两边结构必须一样:可以是不同粒度
    b.右边必须是个东西:右边的声明必须合法
    c.声明和赋值不能分开(必须在同一句话里完成)

    三.数组

    1.map 映射 一个对一个

    let result=score.map(item=>item>=60?'及格':'不及格');
    //映射的例子:三目运算符+箭头函数使代码简洁
    

    2.reduce 汇总 一堆出来一个

    //汇总
        let arr=[12.,996,85,45,62];
        let  result=arr.reduce(function (tmp,item,index) {
            //tmp表示前一次求和的值,即初始值,或者计算结束后的返回值。
            // item表示当前数组中的值,
            // index表示当前数组数的下标
            if (index!=arr.length-1){
                return tmp+item;           //求和
            } else {
                return (tmp+item)/arr.length;   //求平均值
            }
        })
        alert(result)
    

    3.filter 过滤

    //过滤对象
        let arr=[
            {title:'kouhong',price:89},
            {title:'kouhong',price:189},
            {title:'kouhong',price:489},
            {title:'kouhong',price:859},
        ];
        let result=arr.filter(json=>json.price>=100);
     console.log(result)
    

    4.forEach 循环迭代

     //迭代
        let arr=[12,56,89,54];
        let result=arr.forEach((item,index)=>{
            alert(index+':'+item)
        });
        alert(result)
    

    四.字符串

    1.多了两个新方法
    startsWith、endsWith:返回值为布尔值,用来查找开头/结尾
    2.字符串模板
    字符串连接:返单引号 ``
    3.应用
    a.直接把东西带到字符串里面 ${东西}
    b.可以折行

    //字符串拼接
        let title='标题';
        let content='内容';
        let str1='<div>\
        <h1>'+title+'</h1>\
        <p>'+content+'</p>\>' +
            '</div>'
        let str2=`<div>
            <h1>${title}</h1>
            <p>${content}</p>
             </div>`
        alert(str1)
    

    五.面向对象

    1.面向对象:可以继承
    面向过程:自己重新写

    2.ES6中提供了新方法
    a.class关键字、构造器和类分开了
    b.class里面直接加方法
    c.继承:
    super-超类==父类

    3.语法:

    //父类
        class User{
            constructor(name,pass){   
                // constructor为构造器
                this.name=name;
                this.pass=pass;
            }
            showName(){
                alert(this.name);
            }
            showPass(){
                alert(this.pass);
            }
        }
        // var ul=new User('blue','123456');
    
        //继承
        class VipUser extends User{     //extends表示子类对父类的扩展和继承
            constructor(name,pass,level){
                super (name,pass);       //super表示继承
                this.level=level;
            }
            showLevel(){
                alert(this.level);
            }
        }
        var vl=new VipUser('blue','123455',3);
    

    六.面向对象的应用React

    1.React:
    (1).组件化–class
    (2).JSX
    JSX=babel=browser.js
    JSX是JS扩展版

    2.语法

    <script src="react.js" charset="utf-8"></script>
    <script src="react-dom.js" charset="utf-8"></script>
    <script src="browser.min.js" charset="utf-8"></script>
    <script type="text/babel">             //默认为type/JavaScript,此时需要强调
    

    七.json

    1.json对象
    JSON.stringify
    JSON.parse

    2.简写
    名字(key和value)一样
    方法

    3.json的标准写法
    (1).只能用双引号,不能出现单引号
    (2).所有的名字都必须用引号包起来
    {a:12,b:5} 错误
    {“a”:12,“b”:5} 正确

    4.代码

             // 将json解析成一个字符串
             let json={a:5,b:40};
             let str='http://www.bai.com'+encodeURI(JSON.stringify(json));
             alert(str);
    
            //将一个字符串解析成json
            let str='{"a":12,"b":5,"c":"abdc"}';
            let json=JSON.parse(str);
            console.log(json);
    
            //简写:名字和值一样时可以简写
                let a=12;
                let b=10;
                let json={a,b,c:55};
                console.log(json);
    
                //简写:函数名称
                let json={
                    a:12,
                    show () {
                   // show:function () {       可以简写
                        alert(this.a);
                    }
                }
    

    八.promise

    1.Promise:承诺
    异步:操作之间没啥关系,同时进行多个操作
    同步:同时只能做一件事

    异步:代码更复杂
    同步:代码简单
    

    2.有了promise之后的异步(jQuery中封装了promise的用法):
    Promise.all([.ajax(),.ajax(),.ajax()]).then(results=>{
    对了
    },err=>{
    错了} )

    3.Promise.all
    Promise.race 竞速:谁先返回就读谁

    4.语法:
    Promise.race([
    $.ajax({url:…}),
    $.ajax({url:…}),
    $.ajax({url:…}),
    ])

    5.代码

    //一个完整的promise操作
    Promise.all([
        $.ajax({url:'arr.txt',dataType:'json'}),
        $.ajax({url:'arr1.txt',dataType:'json'}),
        $.ajax({url:'arr2.txt',dataType:'json'}),
    ]).then(results=>{
        let [arr,json,num]=results
        alert('成功了');
        console.log(arr,json,num);
    },err=>{
        alert('失败了');
    } )
    

    九.generator 生成器

    1.generator:生成器
    区别:
    (1)普通函数:一口气执行到底
    generator函数:可以暂停,走走停停,不能写成箭头函数
    (2)普通函数需要请求时,采取异步加载等待数据
    generator函数可以暂停下来,等数据返回
    本质上:*show函数 被拆分成show1、show2,每next一次执行一个函数
    2.yield传参

     //传参
        function *show(num1,num2) {
            alert(`${num1},${num2}`)
            alert('a');
    
            let a=yield;   //=左边是第二个过程,右边是第一个过程
    
            alert('b');
            alert(a);
    
            return
        }
    
        let gen=show(99,56);
        gen.next(12);         //没办法给yield传参
        gen.next(5);               //a接到的是第二个过程的5
    
    1. yield返回
     //返回
        function *show() {
            alert('a');
    
           yield 12;           //12是一个中间的返回值
    
            alert('b');
    
          return 55;
        }
    
        let gen=show();
    
        let res1=gen.next();
        console.log(res1);                    //{value:12,done:false}false表示函数还没有走到终点
        let res2=gen.next();
        console.log(res2);                    //{value:55,done:true}表示函数走到终点
    

    4.异步操作的三种形式:

    a.回调的叠加
    $.ajax({
    url:xxx,
    dataType:‘json’
    success(data1){
    $.ajax({
    url:xxx,
    dataType:‘json’
    success(data1){
    $.ajax({
    url:xxx,
    dataType:‘json’
    success(data1){
    }
    } )

    b.Promise
    Promise.all([.ajax(),.ajax(),.ajax()]).then(results=>{
    对了
    },err=>{
    错了} )

    c.generator
    runner(function *(){
    let data1=yield $.ajax({url:xxx,dataType:‘json’});
    let data2=yield $.ajax({url:xxx,dataType:‘json’});
    let data3=yield $.ajax({url:xxx,dataType:‘json’});
    })

    5.当出现带逻辑的读取时

    注意:Promise适合一次读一堆,generator适合有逻辑的读取

    a.promise带逻辑读取:很复杂

     Promise.all([
        $ajax.({url:'getUserData',dataType:'json'})
            ]).then(result=>{
            let userData=result[0];
    
     if (userData.type=='VIP'){
                Promise.all([
                    $.ajax({url:'vipData',dataType:'json'})
                ]).then(result=>{
                //生成列表、、、、、
                },err=>{
                alert ('错误')
                });
            }else{
                Promise.all([
                    $.ajax({url:'commonData',dataType:'json'})
                ]).then(result=>{},err=>{
                alert ('错误')
                });
       },err=>{
        alert('失败');
       })
    

    b.generator带逻辑读取

    > runner(function *() {               
          //runner是一个自己写的框架,后面被标准框架取代
    	  let userData=yield $.ajax({url:xxx,dataType:'json'});
    >     if (userData.type=='VIP'){
    >         let items=yield $.ajax({url:xxxx,dataType:'json'});
    >     } else {
    >         let items=yield $.ajax({url:xxxx,dataType:'json'});
    >     }
    >     //生成、、、、、 })
    

    6.KOA的实例:KOA是nodejs中的一个框架,已被async await取代

        const KOA=require('KOA');
        const mysql=require('koa-mysql');
    
        let db=mysql.createPool({host:'localhost',user:'root',password:'122455'});
    
        let server=new koa();
    
        server.user(function *() {
            let data=yield db.query(`SELECT *FROM user_tavle`);
            this.body=data;
        });
        //generator使原本异步的数据库操作可以写成同步
    
        server.listen(8080);
    

    十. ES7&ES8

    1.数组 includes 判断数组是否包含某含东西 返回值为布尔值
    2.数组 keys/values/entries

                                 数组                  json
        for...in...             key下标           key
        for...of...             value值           不可用(没有迭代器)
    
    keys表示所有key的值:下标
    values表示所有的value值
    entries表示所有的key-value键值对   entry称为实体
    

    3.求幂
    math.power(2,8) 可以写为 2**8

    4.padStart 和padEnd补位

     //补位,左边补0补成10位
        console.log('('+'abc'.padStat(10,'0')+')');
    

    5.语法容忍度
    [12,54,12] => [12,54,12,]
    function show(a,d,b){} =>function show(a,d,b,){}

    6.generator yield

    ========>

    重点:async await 已经在用了

    优点: 1.不依赖于外部的runnner,统一性能
    2.可以用箭头函数

    代码:

    // async await 已经在用了
        let readData=async()=>{
            let data1=await $.ajax({url:xxxx,dataType:'json'});
            let data2=await $.ajax({url:xxxx,dataType:'json'});
            let data3=await $.ajax({url:xxxx,dataType:'json'});
    
            console.log(data1,data2,data3);
        }
    
        readData();
    
    展开全文
  • ECMAScript 语法 . DOM 事件驱动 . BOM 浏览器对象模型 日常用途 嵌入动态文本于HTML页面。 对浏览器事件做出响应。 读写HTML元素。 在数据被提交到服务器之前验证数据。 检测访客的浏览器信息。 控制cookies,...

    1.JS概述

    JS—JavaScript
    核心内容:

    . ECMAScript 语法
    . DOM  事件驱动
    . BOM  浏览器对象模型
    
    • 日常用途
      • 嵌入动态文本于HTML页面。
      • 对浏览器事件做出响应。
      • 读写HTML元素。
      • 在数据被提交到服务器之前验证数据。
      • 检测访客的浏览器信息。
      • 控制cookies,包括创建和修改等。

    2.引入js

    1.在标签中,任何地方添加标签.标签中内容就是js代码. 虽然可以放在页面的任何地方,但是规范放在标签中.

    <script type="text/javascript">
    
    </script>
    

    建议放到最下面,浏览器加载是从上往下加载元素到内存的。

    2.方式2:单独使用一个文件来编写javascript代码,在需要使用的页面中引入该文件.

    <!-- 引入外部js文件 -->
    <script type="text/javascript" src="./index.jsp"></script>
    

    3.在标签元素中嵌套js代码

    <a href="javascript:alert('hello world')">点击我</a>
    

    3.JavaScript变量和打印

    • 使用var 定义变量。在javaScript中变量的类型是由值来决定的。

    • 打印一般使用console在浏览器控制台上进行调制打印显示

    • JavaScript程序代码的格式
      每条功能执行语句的最后必须用分号(;)结束,每个词之间用空格、制表符、换行符或大括号、小括号这样

    • JavaScript严格区分大小写
      usernameuserName是两个完全不同的符号

    • javaScript中的命名规范和java中命名规范一致


    <script>
        var a = "hello world";
        alert(typeof a);//string类型
    </script>
    

    4.JS基本类型

    • Number 数字类型

      • 整数常量
      • 小数常量
        • 特殊数值:NaN(不是一个数)、Infinity(除数为零),所对应的判断函数isNaN()、isFinite()
    • String

      • 在js中没有字符的概念,单引号 双引号都表示字符串
      • 字符串中的特殊字符,需要以反斜杠(\)后跟一个普通字符来表示
    • Boolean

    • null

    • underfind

    5.JS运算符

    JS中的运算符基本上和Java都相同:

    • 算术运算符,赋值运算符,比较运算符,逻辑运算符,位运算符,三元运算符
      • JS中特殊的运算符:

        • 1):比较运算符:
          =和以及=符号.不要将比较运算符“==”误写成“=” ; ==忽略类型,只比较内容,===先比较类型,如果类型不同,返回false,否则再比较内容.

        • 2):逻辑运算符:
          在逻辑运算中: 0、""、false、null、undefined、NaN均表示false。 // 比如5 表示true

    (1)a && b : 将a, b转换为Boolean类型, 再执行逻辑与, 若表达式结果为true返回b, false返回a
    
    (2)a  || b :  将a, b转换为Boolean类型, 再执行逻辑或, 若表达式结果为true返回a, false返回b
    
    && 和|| 运算符的区别(开关):
        &&操作: 返回最后一个为true的值,或者第一个为false的值.
        ||操作:   返回第一个为true的值,或则最后一个为false的值.
    

    5.js函数

    使用函数的目的:

    • 重复使用
    • 将脚本编写为函数,就可以避免页面载入时执行该脚本。
    //函数顶定义
    function 函数名(形参名,[...]){
        //函数体
        [return 值]
    }
    
    
    function add(x,y){
        return x+y;
    }
    
    console.info(add(3,4));
    

    匿名函数:

    //把函数看做一个变量值,赋值给add。
    var add = function(x,y){
        return x+y;
    }
    
    
    console.info(add(x,y));
    
    var add2 = add;
    console.info(add2);
    

    全局 变量和局部变量

    全局变量:function外部定义的变量称为全局变量
    局部变量:function内部定义的变量称为局部变量
    
    访问变量原则:就近原则,谁离我最近我就使用谁。
    
    
    var msg = "全局变量";
    function show(){
        msg = "局部变量"
    }
    show()
    alert(msg);//局部变量
    
    var msg = "全局变量";
    function show(){
        var msg;
        msg = "局部变量"
    }
    show()
    alert(msg);//全局变量
    

    js全局函数

    参见与:W3C javascript.chm —> JavaScript 全局对象参考手册(系统函数/全局函数)

    • encodeURI及encodeURIComponent方法。
      返回对一个URI字符串编码后的结果。

    • decodeURI及decodeURIComponent()方法。
      将一个已编码的URI字符串解码成最初始的字符串并返回。

    • parseInt方法
      将一个字符串按指定的进制转换成一个整数,语法格式为:parseInt(numString, [radix])。如果没有指定第二个参数,则前缀为 ‘0x’ 的字符串被视为十六进制,前缀为 ‘0’ 的字符串被视为八进制,所有其他字符串都被视为是十进制。

    • parseFloat方法
      将一个字符串转换成对应的小数。

    • isNaN方法
      检查一个值是否为NaN。 如果是一个非数字的值,返回true。

    • escape方法(不推荐使用,改为encodeURIComponent)
      返回对一个字符串进行编码后的结果字符串。所有空格、标点、重音符号以及任何其他非 ASCII 字符都用 %xx 编码替换,其中xx等于表示该字符的Unicode编码的十六进制数,字符值大于255的字符以%uxxxx格式存储。

    • unescape 方法(不推荐使用,改为decodeURIComponent)
      将一个用escape方法编码的结果字符串解码成原始字符串并返回。

    • eval 方法 *
      将参数字符串作为一个JavaScript表达式执行。

    eval("alert("hello world ")");//执行里面的js代码弹出hello world
    

    JS面向对象

    1.定义类

    //在外面定义类的属性和方法
    
    //定义一个user类,严格上说是一个构造函数
    function User (){//如果user表示一个方法
        
    }
    
    //创建对象
    var u = new User();
    console.info(u);
    
    //给user对象设置属性
    u.username = "zk";
    u.age = 17;
    
    //给user对象设置函数
    function sayHello(){
        console.debug("aaaa");
    }
    u.xxx = sayHello;//不能写成u.xxx = syaHello();这个是错误的写法
    //可以使用匿名函数形式设置r对象函数。
    u.say = function(){
        console.debug(“bbbb");
    }
    
    
    consle.debug(u);
    console.debug(u.name)
    u.say();
    
    /*
    什么是this:当前对象.
       当this在构造器中:表示当前创建的这个对象.
       当this在方法中:哪一个对象调用该方法,this就是哪一个对象.
    
    u.say = function(){
        console.info(this.name+this.age)
    }
    
    u.say();//u来调用,this表示u对象.
    
    
    */
    
    //===================================================
    //在里面定义类的属性.和方法.
    
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.study = function(){
            console.info(age+"--"+name+"study");
        }
    }
    
    var p = new Person("zk",18);
    console.info(p);
    
    p.study();
    
    
    //========================================================
    
    
    

    2.JS中值传递问题.

    function changeValue(x){
        x = 6; //---改变的是副本。
    }
    var x = 3;
    changValue(x);//---基本类型的传递是值的副本,引用数据类型传递的是地址值
    alert(x);//3  -------根据就近原则,
    
    

    引用数据类型共享堆内存.

    function Person(name,age){
        this.name = name;
        this.age = age;
        this.say = sayFunc;
    }
    
    function sayFunc(){
        alert(this.name+this.age)
    }
    
    function change(p){
        p.name = "lisi";
    }
    var person = new Person("zhangsan",18);
    
    change(person);
    person.say();
    
    
    

    3.js内置对象

    参见与:W3C javascript.chm —> ECMAScript 引用类型.

    • Object: 类似于java中的Object一样是所有对象的父类。
    创建对象,并设置属性和方法
    var obj = new Object();
    obj.name = "will";
    obj.age = 17;
    obj.sayHello = function() {
    };
    // 对象的构造函数
    alert(obj.constructor);
    // 是否有指定的属性
    console.debug(obj.hasOwnProperty("name1"));
    
    // 迭代对象所有的属性+方法:for...in
    for (attr in obj) {
    	alert(attr+"----"+obj[attr])//属性名
    }
    
    • Date:
    打印当前系统时间:
    var d = new Date();
    var day = d.getDate();
    day = day<10?"0"+day:day;
    var time = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + day + " "
    		+ d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    console.info(d.getTime());//获取当前的毫秒数。
    
    • Math:
    var num = Math.random();
    
    • String:
    // 随机生成A到Z之间的字母:65+26
    // 随机生成0~25
    var num = parseInt(Math.random() * 26);//
    num = num + 65;
    alert(String.fromCharCode(num));//把数字转换成ASII,对应的字符。
    
    
    
    

    • Array数组
    JS中的数组类:Array,和Java中ArrayList很相似,也体现了栈结构,队列.
    
    数组常用的方法:
    length-获得数组的长度;
    concat-连接数组;
    join-把数组转换成字符串;
    pop-弹出一个元素;
    push-放入一个元素;
    reverse-颠倒数据中的元素顺序;
    shift-移出第一个元素;
    slice-截取数组;
    sort-排序数组;
    unshift-在前面追加元素;
    splice 从数组中添加/删除/替换元素,若是删除操作,则返回被删除的元素。
    
    

    数组的创建:

    js中数字的遍历使用for in来进行遍历

    for(index in arr)
    {
       console.debug(index,arr[index]);
    }
    在js中表示数组中的索引,并不是它里面的元素。
    
    /*
    在java中增强for:for(String str:obj){....}
    
    */
    
    
    

    prototy

    prototy

    展开全文
  • ECMAScript 2016

    2019-07-05 10:32:28
    ECMAScript 2016引进了两个新的特性 - Array.prototype.includes - 幂运算符(**)
  • 文章目录将ECMAScript6语法转换成ECMAScript5语法转换原因所需依赖修改源码运行结果 将ECMAScript6语法转换成ECMAScript5语法 转换原因   由于并不是所有的浏览器都支持es6语法,但是基本上都支持es5语法,因而...
  • ECMAScriptECMAScript2015

    2020-07-22 17:45:03
    ECMAScript 与 JavaScript ECMAScript 也是一种脚本语言,通常缩写为 ES,通常会把它看作是 JavaScript 语言的标准化规范。实际上 JavaScript 是 ECMAScript 的扩展语言,因为在 ECMAScript 只是提供了最基本的语法...
  • ECMAScript 2020 新特性

    2020-05-27 11:05:19
    ECMAScript 2020 新特性 JavaScript 是最流行的编程语言之一,每年都会添加新的特性。本文介绍了添加在 ECMAScript 2020(又称ES11)中的新特性。 在引入 ECMAScript 2015(又称 ES6)之前,JavaScript 发展的...
  • ECMAScript 的发展历史

    2018-01-14 21:07:11
    ECMAScript 的发展历史 ES6 从开始制定到最后发布,整整用了 15 年。 前面提到,ECMAScript 1.0 是 1997 年发布的,接下来的两年,连续发布了 ECMAScript 2.0(1998 年 6 月)和 ECMAScript 3.0(1999 年 12 ...
  • ECMAScript6的使用心得

    2017-11-01 20:15:43
    ECMAScript6是比较新的JavaScript的标准,现在大部分浏览器也都可以兼容它的写法,在我看来它让JS这个弱类型语言有了像Java这种的“类”的概念,可以直接使用class进行初始化类,代码编写方式基本和java没有什么区别...
  • ECMAScript函数的参数与大多数其他语言中函数的参数有所不同。ECMAScript函数不介意传递进来多少个参数,也不在乎传进来参数是什么数据类型。一、ECMAScript传递给函数的参数与定义时的参数可以不一致   原因是...
  • 在javascript中 ,对操作...等,其实这些方法在ECMAScript3中已经引入,这些方法可以在一定程度上简化对数组的操作,但在ECMAScript5中也引入了一些新的方法,包括对数组的遍历,过虑,化简等操作,这些方法都提供...
  • ECMAScript Sun(现在的Oracle)公司持有着“Java”和“JavaScript”的商标。这就让微软不得不把自己的JavaScript方言称之为“JScript”。然后,在这门语言被标准化的时候,就必须使用一个与二者都不同的名字。...
  • ECMAScript 6入门
  • ECMAScript简介: 它是一种由Ecma国际(前身为欧洲计算机制造商协会)制定和发布的脚本语言规范,javascript在它基础上经行了自己的封装。但通常来说,术语ECMAScript和javascript指的是同一个。业界所说的...
1 2 3 4 5 ... 20
收藏数 78,796
精华内容 31,518
关键字:

ecmascript