尚硅谷Web前端ES6教程，涵盖ES6-ES11的学习笔记

已于 2022-11-04 15:41:44 修改
阅读量724 收藏
点赞数
文章标签： 前端 es6 学习
于 2022-11-04 15:21:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62516225/article/details/127661788
版权

前言

各位读者好，我正在努力学习前端中，这里是我的学习笔记分享，希望能够对大家有用。
我学习的视频链接是尚硅谷ES6
此外，我还有其它前端内容的笔记，大家有需要的可以自行查找。

文章目录

ES6

let关键字

在这里插入图片描述
特点

  • let变量不能重复声明，var可以重复声明
  • 作用域为块级
  • 不能变量提升
  • 不影响作用域链的效果

const 定义常量

在这里插入图片描述

注意：数组内容可以改变，但数组的地址不可以改变

变量的解构赋值

在这里插入图片描述

模板字符串

在这里插入图片描述

简化对象

在这里插入图片描述

箭头函数

在这里插入图片描述
特点：

  • this是静态的.this始终指向函数声明时所在的作用域下的this的值
  • 不能作为构造实例化的对象
  • 不能使用arguments变量
  • 可以简写
    在这里插入图片描述

注意：箭头函数适合与this 无关的回调、定时器、数组的方法的回调函数，不适合与 this 有关的回调、事件回调、对象的方法。

函数参数默认值

在这里插入图片描述

rest参数

在这里插入图片描述

扩展运算符

在这里插入图片描述
扩展运算符的运用
在这里插入图片描述

Symbol的使用

ES6引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol特点

  • Symbol的值是唯一的，用来解决命名冲突的问题
  • Symbol值不能与其他数据进行运算
  • Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用
    Reflect.ownKeys来获取对象的所有键名

在这里插入图片描述
在这里插入图片描述

Symbil创建对象属性

在这里插入图片描述
在这里插入图片描述

Symbol的内置属性

共有11个内置属性，这里是详细介绍

迭代器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

生成器函数

在这里插入图片描述

生成器的函数参数

在这里插入图片描述
生成器函数例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //异步编程
        //1s 后控制台输出111   2s后输出222  3s后输出333
        /*回调地狱，慢
        setTimeout(()=>{
            console.log(111);
            setTimeout(()=>{
                console.log(222);
                setTimeout(()=>{
                    console.log(333)
                },3000)
            },2000)
        },1000)*/

        //生成器函数
        function one(){
            setTimeout(()=>{
                console.log(111);

            },1000)
        }
        function two(){
            setTimeout(()=>{
                console.log(222);

            },2000)
        }
        function three(){
            setTimeout(()=>{
                console.log(333);

            },3000)
        }

        //生成器函数
        function * gen(){
            yield one();
            yield two();
            yield three();
        }
        //调用生成器函数
        let iterator = gen();
        iterator.next();
        iterator.next();
        iterator.next();
        iterator.next();

        //模拟获取 用户数据 商品数据 订单数据
        function getUsers(){
            setTimeout(()=>{
                let data = '用户数据'
                //调用next方法，并且将数据传入
                iterator1.next(data)
            },1000)
        }
        function getOrders(){
            setTimeout(()=>{
                let data = '订单数据'
                iterator1.next(data)
            },1000)
        }
        function getGoods(){
            setTimeout(()=>{
                let data = '商品数据'
                // iterator1.next(data)
            },1000)
        }
        

        function * ma(){

            let users =yield getUsers();
            console.log(users);
            let orders = yield getOrders();
            console.log(orders);
            yield getGoods();
        }
        //调用生成器函数
        let iterator1=ma();
       iterator1.next();
    </script>
</body>
</html>

Promise

在这里插入图片描述
基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //实例化Promise对象
        const p = new Promise(function(resolve,reject){
            setTimeout(function(){
                //正确读取
                let data = '数据库中的用户数据'
                resolve(data)
                //失败读取
                let  err = '数据读取失败'
                reject(err)
            },1000);
        });
        //调用Promis对象的then方法，成功调用前一个函数，失败调用后一个函数
        p.then(function(value){
           console.log(value); 
        },function(reason){
            console.log(reason)

        })
    </script>
</body>
</html>

用Promise封装

//导入fs模块
const fs = require('fs')

//使用Promise 封装
const p =new Promise(function(resolve,reject){
    fs.readFile('./文件1.md',(err,data)=>{
        //如果失败
        if(err) reject(err);
        //成功
        resolve(data);
    })
});

p.then(function(value){
    console.log(value.toString());
},function(reason){
    console.log("读取失败");
});

用Promise对AJAX的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //接口地址：https://api.apiopen.top/getJpke
        const p = new Promise((resolve,reject)=>{

        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化
        xhr.open("GET","https://api.apiopen.top/getJpke")
        //3.发送
        xhr.send();
        //4.绑定事件，处理响应结果
        xhr.onreadystatechange = function(){
            //判断
            if(xhr.readyState === 4)
                //判断响应状态码200-299
                if(xhr.status>=200&&xhr.status<=299)
                    //成功
                    resolve(xhr.response);
                    else
                        //失败
                        reject(xhr.status);
        }
    });

        p.then(function(value){
            console.log(value);
        },function(reason){
            console.log(reject);
        });
    
    </script>
</body>
</html>

Promise的then属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建Promise对象
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('用户数据')
                reject('发生错误')
            },1000)
        });

        //调用then方法  then返回的结果是Promise对象，对象状态有回调函数执行结果决定
        //1.返回结果是非Promise类型的属性，状态成功，返回值为对象成功的值
        // const result =p.then(value=>{
        //     console.log(value);
        //     // //1.非promise类型的属性
        //     // // return '123';
        //     // //2.是promise对象 , 返回值为then方法返回的值
        //     // return new Promise((resolve,reject)=>{
        //     //     // resolve('ok');
        //     //     reject('error')
        //     // });
        //     //3.抛出错误
        //         // throw new Error('错误');

        // },function(reason){
        //     console.warn(reason);
        // });

        //链式调用改变回调地狱的问题
        p.then(value=>{

        }).then(value=>{

        })
        console.log(result);
    </script>
</body>
</html>

promise的catch对象的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //设置p对象为失败，并设置失败值
                reject('失败')
            },1000);
        })
        //不用第一个参数
        p.catch(function(reason){
            console.warn(reason);
        })
    </script>
</body>
</html>

set集合

在这里插入图片描述
在这里插入图片描述

用集合实现数组去重、交并补

在这里插入图片描述
在这里插入图片描述

map

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

class类

在这里插入图片描述
在这里插入图片描述
class类中的静态成员
在这里插入图片描述

继承与class继承

继承
在这里插入图片描述
class继承
在这里插入图片描述

get与set

在这里插入图片描述

数值扩展

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

对象扩展的方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

模块化

暴露汇总

在这里插入图片描述
分别暴露
在这里插入图片描述
统一暴露
在这里插入图片描述
默认暴露
在这里插入图片描述

引用汇总

在这里插入图片描述
在这里插入图片描述
模块化建议单独设置一个js文件，作为引入文件的集合
在这里插入图片描述

在这里插入图片描述

模块化兼容

在这里插入图片描述
在这里插入图片描述

ES7

include

在这里插入图片描述

**

在这里插入图片描述

ES8

async函数

在这里插入图片描述

await表达

在这里插入图片描述
async函数与await表达的结合，是异步看样子是同步一样，处理速度加快
在这里插入图片描述

扩展对象的方法

在这里插入图片描述
在这里插入图片描述

ES9

rest 运算符

在这里插入图片描述
在这里插入图片描述

正则扩展

命名捕获分组

命名捕获分组自身的语法是 (?…)，比普通的分组多了一个 ? 字样，其中 name 的起法就和你平时起变量名一样即可（不过在这里关键字也可用）。反向引用一个命名分组的语法是 \k，注意命名分组同样可以通过数字索引来反向引用

反向断言

在这里插入图片描述

dotALL模式

在这里插入图片描述

ES10

对象扩展

在这里插入图片描述

字符串扩展 trimSta与trimEnd

在这里插入图片描述

数组扩展 flat 与flatMap

在这里插入图片描述

ES11

私有属性

私有属性只能出现在类内部，不能出现下类外面，即便是类外引用也不行
在这里插入图片描述

promise.allSettled

在这里插入图片描述

string.prototype.matchAll

这是为了批量匹配正则表达式
在这里插入图片描述

可选链操作

在这里插入图片描述

动态import函数引用

在这里插入图片描述

BigInt属性

在这里插入图片描述

gobalThis绝对全局变量

改变量字如其名，无论在什么情况下，都是指向全局变量。

木子与金与玉
关注
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
尚硅谷---ES6
Father_Of_Soft的博客
01-25 595
尚硅谷ES6同步笔记。万字长文，精心笔记，方便您预习复习~
【ES6】尚硅谷学习总结
老陈的博客
09-22 398
ES 的全称是 ECMAScript ,是JavaScript语言的增强；它是由 Ecma国际 通过 ECMA-262标准化的脚本程序设计语言；ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。
尚硅谷前端 ES6 笔记
最新发布
胡西风的博客
09-04 1869
ECMA（European Computer Manufacturers Association）是欧洲计算机制造商协会，目标是评估、开发和认可电信和计算机标准。1994年后改名为Ecma国际。ECMA-262 是Ecma国际制定的一个标准，专门描述了ECMAScript语言的行为。
尚硅谷Web前端ES6教程详细笔记，涵盖ES6-ES11
enjoy_learning的博客
03-13 871
尚硅谷Web前端ES6教程详细笔记，涵盖ES6-ES11
尚硅谷es6新特性笔记
weixin_57599261的博客
08-06 1356
尚硅谷es6新特性的简单总结
尚硅谷ES6学习笔记
胡西风的博客
04-04 312
介绍模块化是指将一个大的程序文件, 拆分成许多小的文件，然后将小文件组合起来。防止命名冲突代码复用高维护性模块化规范产品语法模块功能主要有两个命令构成：export 和 inportexport 命令用于规定模块的对外接口inport 命令用于输入其他模块提供的功能export let school = '尚硅谷'console.log('教技能')
ES6-ES11学习指南.zip
08-27
内容涵盖ES6-ES11，一份超详细的学习指南/笔记，能帮助初学者快速有效的掌握ES6体系知识点，帮助开发者快速查阅需要的知识点，内容全面
web前端开发工程师 ECMAScript 6.0 简称ES6 Typora学习笔记
08-16
### ES6 (ECMAScript 2015) 前端开发基础知识详解 #### 一、ES6简介 - **定义与历史**: ECMAScript 6 (简称ES6) 是JavaScript语言的一个新版本，正式名称为ECMAScript 2015（ES2015），于2015年6月发布。它的目标...
es6-notes:ES6+ 学习笔记 https
05-07
ES下一个学习笔记 数字 大批 目的 功能 班级 象征 放 地图 正则表达式 代理人 反映 承诺 发电机 迭代器 模块 ES2016（ES7） Array.prototype.includes（） 求幂运算符 ES2017（ES8） 细绳 目的 异步等待 尾随...
es6尚硅谷笔记es6尚硅谷笔记
04-03
【ES6】是ECMAScript的第六版，它引入了许多新的特性和语法改进，使得JavaScript编程更加现代化和高效。在JavaScript的世界中，ECMAScript是由Ecma国际制定的...学习和理解ES6的新特性对于现代JavaScript开发至关重要。
尚硅谷前端笔记
qq_46539281的博客
05-21 7405
前端笔记 0. html/css html/css基础笔记 1. html/css进阶 未写 – – 2.js 未写 – – 3.node.js 未写 – – 4.vue 未写 – – 5.react 未写 – – 6.小程序 未写 – – 7.微信公众号 未写 – – 8.uniapp 未写 – – 9.webpack4 未写 目标：全栈。 想要直接是实现一个app,或者是一个软件，不得不需要用到...
VUE 尚硅谷 学习内容详解
starry-sea1412的弃坑之路
05-18 924
Vue.js 是一款渐进式前端框架，采用了 MVVM 架构模式，实现了高效、灵活、易用的前端开发。它具有组件化开发、双向数据绑定、模块化开发、插件系统和易于学习等特点，是目前最为流行的前端 JavaScript 框架之一。
尚硅谷前端ES6-ES11
m0_61927991的博客
01-23 1494
ES6-ES11知识点
Elasticsearch7学习笔记(尚硅谷)
Shawn的个人博客
02-18 6282
Elasticsearch是一个实时的分布式搜索和分析引擎。它可以帮助你用前所未有的速度去处理大规模数据。它可以用于全文搜索，结构化搜索以及分析，当然你也可以将这三者进行组合。Elasticsearch是一个建立在全文搜索引擎 Apache Lucene™ 基础上的搜索引擎，可以说Lucene是当今最先进，最高效的全功能开源搜索引擎框架。但是Lucene只是一个框架，要充分利用它的功能，需要使用JAVA，并且在程序中集成Lucene。当然Elasticsearch并不仅仅是Lucene这么简单，它不但包括了
Java开发 - 尚硅谷JavaWeb学习笔记 - Part2_HTML
codeLearnerEternally的博客
06-22 812
HTML的学习章节
前端开发简介
一叶之秋的博客
12-16 1600
一、前端开发 前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。 最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。 由于互联网行业的急速发展，导致了在不同的国家，有着截然不同的分工体制。 在日本和一些人口比较稀疏的国家，例如加拿大、澳洲等，流行“Full-Stack
尚硅谷全新JavaWeb教程，企业主流javaweb技术栈【学习笔记】二
qq_43668996的博客
03-21 2151
1.创建SAXReader对象2.解析XML获取Document对象：需要传入要解析的XML文件的字节输入流3.获取文档的根标签4.获取标签的子标签//获取所有子标签//获取指定标签名的子标签ListsonElementList = rootElement.elements("标签名");
尚硅谷es6-es11笔记
09-10
尚硅谷ES6-ES11笔记是关于ES6到ES11版本的学习笔记。其中包括了ES6引入的类的写法，实际上ES6的Class是一个语法糖，让我们写起来更像传统的类。 此外，ES6还引入了Symbol值，除了可以定义自己使用的Symbol值，还有11...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木子与金与玉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值