ECMAScript 6学习笔记

于 2024-10-27 10:42:46 发布
阅读量873 收藏 14
点赞数 20
文章标签： es6 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_67226963/article/details/143264945
版权

1. 简介

        ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
    ① ECMAScript 和 JavaScript 的关系
        1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
        因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。
    ② ES6 与 ECMAScript 2015 的关系
        2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。
        ES6 的第一个版本，在 2015 年 6 月发布，正式名称是《ECMAScript 2015 标准》（简称 ES2015）。
        2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小，基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。
        因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

2. 基本语法

    ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

（1）let声明变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECMAScript 6简介以及let声明变量</title>
</head>
<body>
    <!-- var和let的区别
            var声明的变量为全局变量
            let声明的变量为局部变量
            
            var可以声明多次
            let只能声明一次
            
            var会变量提升
            let不会变量提升-->
    <script>
        {
            var a=0;
            let b=1;
        }
        console.log(a);     //0
        //console.log(b);     //b is not defined

        var m=1;
        var m=2;
        let n=1;
        //let n=2;  直接报错
        console.log(m);     //2

        console.log(x);
        var x = 3;
        
        console.log(y);     //undefined
        var y = 3;


    </script>
    
</body>
</html>

（2）const声明常量

1、声明之后不允许改变    
2、一但声明必须初始化，否则会报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>const声明变量</title>
</head>
<body>
    <script>
        //1、声明变量后不允许改变
        const pi = "3.1415926535";
        pi = 3;      //Assignment to constant variable

        //2、变量一但声明必须初始化，否则会报错
        //const name;   直接报错
    </script>    
</body>
</html>
（3）解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

1、数组解构
2、对象解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值</title>
    <!--
    解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。 
     -->
</head>
<body>
    <script>
        //1、数组解构
            //传统
            let a =1,b=2,c=3;
            console.log(a,b,c);
            //es6
            let[x,y,z]=[1,2,3];
            console.log(x,y,z);

        
        //2、对象解构
            let user = {name:"Tom",age:18};
            //传统
            let name1 = user.name;
            let age1 = user.age;
            console.log(name1,age1);

            //es6
            let {name,age} = user;
            console.log(name,age);

    </script>
</body>
</html>

（4）模板字符串

    模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

1、多行字符串
2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
3、字符串中调用函数
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>
    <!--模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。 
     -->
</head>
<body>
    <script>
        //1、多行字符串
        let String1 = `Hello,
        What Is Wrong With You?`; 
        console.log(String1);

        
        //2、字符串插入变量和表达式。变量名写在${}中，${}中可以放入JavaScript表达式
        let name = "Mike";
        let age = 27;
        let info = `My name is ${name},I am ${age+1} years old next year.`;
        console.log(info);

        //3、字符串中调用函数
        function f(){
            return "Deam!";
        }
        let String2 = `Its beaning a long day,${f()}`;
        console.log(String2);

    </script>
</body>
</html>

（5）声明对象简写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声明对象简介</title>
</head>
<body>
    <script>
        const age =12;
        const name = "Amy";

        //传统
        const person ={username:name,age:age};
        console.log(person);

        //es6
        const persons ={age,name};
        console.log(persons);
    </script>
    
</body>
</html>

（6）定义方法简写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义方法简介</title>
</head>
<body>
    <script>
        //传统
         const person1={
            speak:function(){
                console.log("Let Us Speak Chinese");
            }
        }
        person1.speak();

        //es6
        const person2 ={
            speak(){
                console.log("Let Us Speak Chinese");
            }
        }
        person2.speak();

    </script>
    
</body>
</html>

（7）对象拓展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

1、拷贝对象
2、合并对象
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象拓展运算符</title>
</head>
<body>
    <script>
        //1、拷贝对象
        let person1 = {name:"Amy",age:18};
        let someone = {...person1};
        console.log(someone);

        //2、合并对象
        let age ={age:15};
        let name ={name:"Tom"};
        let person2 = {...age,...name};
        console.log(person2);
    </script>
    
</body>
</html>

（8）函数的默认参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function showInfo(name,age=17){
            console.log(name,age);
        }

        showInfo("root",18);    //root 18
        showInfo("root");       //root 17
        showInfo("root",null);  //root null
        showInfo("root","");    //root
        showInfo("root",undefined);    //root 17
        showInfo();    //undefind  17
    </script>
    
</body>
</html>

（9）不定参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不定参数</title>

    <!-- 不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。 -->
</head>
<body>
    <script>
        //1、声明函数
        function fun(...args){
            console.log(args.length);
            
        }
        fun(1,2);
        fun(1,2,3,4);
    </script>

</body>
</html>

（10）箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体
 当箭头函数没有参数或者有多个参数，要用 () 括起来。
当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
    <!-- 
    箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体
        当箭头函数没有参数或者有多个参数，要用 () 括起来。
        当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
        当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
      -->
</head>
<body>
    <script>
        //1、传统方式
        function func01(a){
            console.log(a);
        }
        func01(1);  //1

        //2、es6箭头函数
       var func02 = (a)=>{console.log(a)};
       func02(2);   //2

       function func03(b){
        return b;
       }
       var func04 = b=>b;
       console.log(func04(3));

    </script>
</body>
</html>

（11）Promise

    在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。
 1、timeout的定时器功能使用了回调函数
2、ajax功能使用了回调函数
1、timeout的定时器功能使用了回调函数
1、1秒后获取用户数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise</title>
    <script src="../JQuery/jquery-3.3.1.js"></script>
    <!-- 在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。 -->
</head>
<body>
    <script>
        //案例1：定时器     timeout的定时器实现函数回调功能
        console.log(`Before setTimeout()`);
        setTimeout(() =>{
            console.log('done');
        },1000)
        console.log("After setTimeout");

        //案例2：1秒后执行ajax操作
        console.log(`Before setTimeout()`);
        setTimeout(() =>{
            console.log('Done');
            //ajax功能使用了回调函数
            $.get('name.id',(data) => {
                console.log(data);
            })
        },1000)
        console.log("After setTimeout");

        
        //回调函数嵌套的噩梦，1秒后获取用户的数据
        console.log(`Before setTimeout()`);
        setTimeout(() =>{
            console.log('Done');
            //2、获取用户数据
            $.get('name.id',(data) =>{
                console.log(data);
                //3、获取当前用户登录的日志
                $.get(`data${data.id}`,(data) =>{
                    console.log(data);
                })
            });
        },1000)
        console.log("After setTimeout");




        //Promise是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的响应消息。古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。
        var p = new Promise((resolve,reject) =>{        //成功后交给resolve来执行回调的内容
            setTimeout(()=>{
                resolve();
            },1000)
        })
        p.then(() =>{   //成功
            console.log("Done");
            //还有后续操作，可以接着返回promise
            return new Promise((resolve,reject)=>{
                $.get(`name.id`,data=>{
                    resolve(data);
                })
            })
        })
        .then((data)=>{
                $.get(`data${name.id}`,(data)=>{
                    console.log(data);
                })
            })
        .catch(()=>{    //处理失败：then方法的第二个参数是失败的回调
            console.log("出错了！");

        })


    </script>
    
</body>
</html>

 以下是模仿获取后台数据而出现的错误

 

    Promise是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的响应消息。
古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

【Java前端技术栈】ES6-ECMAScript6.0
qq_41891655的博客
02-18 1424
1. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布。2. ES6 设计目标：达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语 言3. ECMAScript 和 JavaScript 的关系：ECMAScript是JavaScript的规范/规则，JavaScript 是ECMAScript的一种实现1. 箭头函数提供更加简洁的函数书写方式。2. 基本语法是：(参数列表) => { 函数体 }
ECMAscript 6.0
01-06
ECMAscript 6.0PDF,先说清楚，这是一个需要对js 5.0和用过模块化框架的有一些基础的人，更容易理解
ECMAScript 6学习总结（1）——ECMAScript 6入门简介
科技D人生
05-26 1713
ECMAScript 6简介 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系 一个常见的问题是，ECMAScript 和 JavaScript 到底是什
ECMAScript 6.0
Al_tair的博客
06-29 680
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布ECMAScript 和 JavaScript 的关系（类似接口和类的关系）：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是 ECMAScript 的一种实现 const 声明常量/只读变量 解构赋值 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值（解构赋值是对赋值运算符的扩展 ）主要有两种形式： 数组解构和......
ECMAScript6.0（ES6）
Joyechen1的博客
11-12 196
ES6
超详细ES6变动，ES6学习笔记，JavaScriptES6学习笔记
09-16
本学习笔记将聚焦于与ES5的区别，帮助初学者快速掌握ES6的核心概念。** 1. **变量声明：let和const** - `let`替代了`var`进行块级作用域的变量声明，解决了`var`的变量提升和函数作用域问题。 - `const`用于声明...
ECMAScript-notes:ECMAScript中文笔记
05-24
很高兴您打开了这篇学习笔记，在此希望您花费10分钟的时间详细阅读说明，对它有个初步认识，再决定是否阅读（有能力可以去阅读英文文档）。 之所以称它为学习笔记主要有3点： 记录这篇笔记的时候我还没有成为一名...
web前端开发工程师 ECMAScript 6.0 简称ES6 Typora学习笔记
最新发布
08-16
- **定义与历史**: ECMAScript 6 (简称ES6) 是JavaScript语言的一个新版本，正式名称为ECMAScript 2015（ES2015），于2015年6月发布。它的目标是为了提高JavaScript的能力，使之能够更好地服务于大型复杂应用的开发...
JavaScript高级程序设计（第3版）学习笔记13 ECMAScript5新特性
01-19
接下来应该是BOM和HTML5了，但是鉴于ECMAScript5相对于ECMAScript3的新变化比较多，而且这些变化也非常的有意思，因此在这篇文章中再将我认为的有意思的变化（并非全部变化）集中整理一下，但这里只是列举，不具体...
ECMAScript学习笔记：前端工程师进阶必备
资源摘要信息:"ECMAScript-...压缩包子文件的文件名称列表中只有一个"ECMAScript-notes-main"，这表明学习笔记可能只有一个主要文件，文件名暗示这是笔记的核心部分，包含了ECMAScript学习的主要内容和作者的学习心得。
ECMAScript 6入门 高清版.pdf
03-26
编辑推荐 √ 横跨ES2015/2016/2017新标，抢占JavaScript制高点 √ 由千万级名博、布道引领无数前端入行的阮一峰执笔 √ 来自BAT一线实践，精彩案例透彻解读新标|保留语法 √ 新标首著，凝结多年研究心得，剖析ES理解应用难题
ECMAScript6.0（一）
小知的博客
03-06 380
一、变量let和const： var： 可以重复声明 无法限制修改无法限制修改 没有块级作用域没有块级作用域 let：不能重复声明，变量~可以修改，块级作用域 const：不能重复声明，常量~不可以修改，块级作用域 &amp;lt;script&amp;gt; window.onload = function() { var aBtn = document.getElementsByT...
Vue语言基础——ECMAScript 6.0
qq_55227591的博客
07-25 1238
1.ECMAScript6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。2.一个完整的JavaScript实现由三部分组成文档对象模型（DOM）、浏览器对象模型（BOM）、核心（ECMAScript）3.总的来说，ES就是在设计实现JavaScript脚本语言的语法和基本对象的核心内容时所遵循的标准规范。①{......
ECMAScript_6.0—[概念普及]
Yam的博客
11-03 1959
一、ECMAScript的历史 ES6是ECMAScript标准十余年来变动最大的一个版本，为其 添加了许多新的语法特性。 •1997年ECMAScript1.0诞生。 •1998年6月ECMAScript2.0诞生，包含一些小的更改，用 于同步独立的ISO国际标准。 •1999年12月ECMAScript3.0诞生，它是一个巨大的成功， 在业界得到了广泛的支持，它奠定了JS的基本语法，被其后版 本完全继承。直到今天，我们一开始学习JS，其实就是在学
ECMAscript 6.0 学习笔记
Eva_大黎的博客
12-13 333
兼容性 兼容IE10+,chrome,fireFox,移动端，nodeJs 不兼容解决方案： 1、线上转换 2、提前编译：引入browser.js 新特性-变量-函数-数组-字符串-面向对象-Promise-generator-模块化变量 var 的一些弊端 1、可以重复声明 2、无法限制修改 3、没有块级作用域 es6新增变量 let 、const let ：不能重复修改，是变量—可
ECMAScript 6.0 知识点汇总(一)
XIPIKER的博客
08-16 298
简介 ECMAScript 6.0(一下简称ES6)是Javascript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得Javascript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ES6既是一个历史名词，也是一个泛指，含义5.1版以后的Javascript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。 babel介绍 被称为下一代的Javascript编译器。可以将es6的代码转换成
ES6基础学习
weixin_47918681的博客
10-12 262
1.1什么是ES6 ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 1.2ES6和JavaScript关系 该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScri
ECMAScript6.0简介
weixin_51359716的博客
01-03 443
什么是ECMAScript ECMAScript 是一种由 ECMA国际（前身为欧洲计算机制造商协会）通过 ECMA-262 标准化的脚本程序设计语言。 Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织。1994年之前，名为欧洲计算机制造商协会（European Computer Manufacturers Association）。因为计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。现名称已不属于首字母缩略字。 与国家政府标准机
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值