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

已于 2022-11-04 15:41:44 修改
阅读量707 收藏
点赞数
文章标签： 前端 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绝对全局变量

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

木子与金与玉
关注
尚硅谷Web前端ES6教程，涵盖ES6-ES11（p16-p48）
tudouzibututou的博客
02-06 293
一、再谈symbol 1.使用keyfor获得symbol.for创建的symbol的描述 let test = Symbol.for(“我是描述”) console.log(Symbol.keyFor(test)) 2.获取symbol创建的描述 let test = Symbol(“我是描述”) console.log(test.description); 3.symbol不能使用for…in和for…of来遍历读取 4.symbol用来作为属性具有唯一性 5.symbol的属性 -Object.ge
尚硅谷Web前端ES6教程，涵盖ES6-ES11（p1-p15）
tudouzibututou的博客
01-18 418
尚硅谷Web前端ES6教程，涵盖ES6-ES11 一、let关键字 1.变量不能重复声明 -let star = ‘罗志祥’; let star = ‘小猪’; 2.块级作用域 -let关键字声明的变量，在块级作用域外无法查询到 3.不存在变量提升 -不允许在变量声明前使用变量 4.不影响作用域链 5.可以利用块级作用域隔开其他变量的影响 遍历并绑定事件 for(let i = 0;i<items.length;i++){ items[i].onclick = function(){ //修改当前元
Java开发 - 尚硅谷JavaWeb学习笔记 - Part2_HTML
最新发布
codeLearnerEternally的博客
06-22 773
HTML的学习章节
尚硅谷Web前端ES6教程详细笔记，涵盖ES6-ES11
enjoy_learning的博客
03-13 813
尚硅谷Web前端ES6教程详细笔记，涵盖ES6-ES11
ES6课程笔记——尚硅谷（上）
qq_43248263的博客
03-08 516
1.let和const 1.let let声明变量，没有变量提升。 是一个块级作用域。 在同一个作用域，不能重复声明。 作用1：for循环经典例子 解决var带来的变量提升的问题 作用2：不会污染全局变量 2.const const 声明常量，一旦被声明，无法修改。 const 声明对象，可以修改对象内部的属性，但是不能直接整体改这个常量对象。 建议：在默认情况下用const，而只有在你知道变量值需要被修改的时候，使用let。 3.模板字符串 使用tab键上面的反引号，变量使用${} 3.强大的函数 （
尚硅谷es6新特性笔记
weixin_57599261的博客
08-06 1333
尚硅谷es6新特性的简单总结
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
es6尚硅谷笔记es6尚硅谷笔记
04-03
【ES6】是ECMAScript的第六版，它引入了许多新的特性和语法改进，使得JavaScript编程更加现代化和高效。在JavaScript的世界中，ECMAScript是由Ecma国际制定的...学习和理解ES6的新特性对于现代JavaScript开发至关重要。
ES6-ES10--学习笔记
qq_45728623的博客
08-06 473
一、概述 1、什么是ECMA ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。 2、什么是ECMAScript ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言； 百度百科：https://baike.baidu.com/history/ECMAScript/1889420/144946978 3、什么是
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月发布。它的目标...
尚硅谷笔记
04-25
尚硅谷老师的se笔记总结。很详细的版本，详情视频在尚硅谷的官网中有
尚硅谷ES6学习笔记
胡西风的博客
04-04 281
介绍模块化是指将一个大的程序文件, 拆分成许多小的文件，然后将小文件组合起来。防止命名冲突代码复用高维护性模块化规范产品语法模块功能主要有两个命令构成：export 和 inportexport 命令用于规定模块的对外接口inport 命令用于输入其他模块提供的功能export let school = '尚硅谷'console.log('教技能')
尚硅谷Web前端ES6教程，涵盖ES6-ES11
WENSHIKADA的博客
08-08 846
一、ES6新特性（重点） 1.let声明变量 ES6新增加了两个重要的 JavaScript 关键字: let 和 const。 书写格式： let a; let b,c,d; let e = 100; let f = 521, g = 'KAN', h = []; 注意事项： 1.变量不能重复声明 let star = 'KOBE'; let star = 'KOBE'; 运行结果： 2.只在块级作用域
前端系列 - ES6
知行
04-17 562
第 2 章 ECMASript 6 新特性 2.1. let 关键字 let 关键字用来声明变量，使用 let 声明的变量有几个特点： 1) 不允许重复声明 2) 块儿级作用域 3) 不存在变量提升 4) 不影响作用域链 应用场景：以后声明变量使用 let 就对了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor.
ES6、7学习笔记（尚硅谷）-1-ES5的一些
weixin_42349568的博客
08-05 221
1. 严格模式 运行模式: 正常(混杂)模式与严格模式 应用上严格式: ‘strict mode’;写在script的第一行 作用: 使得Javascript在更严格的条件下运行 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为 消除代码运行的一些不安全之处，保证代码运行的安全 需要记住的几个变化 声明定义变量必须用var 禁止自定义的函数中的this关键字指向全局对象 创建eval作用域, 更安全 对象不能重名 <script type="text/javasc
尚硅谷---ES6
Father_Of_Soft的博客
01-25 568
尚硅谷ES6同步笔记。万字长文，精心笔记，方便您预习复习~
尚硅谷 ES6-12 笔记
LiuKairui的博客
06-18 1586
文章目录ES介绍ES6新特性eval函数(ES3函数补充)let关键字const关键字变量解构赋值模板字符串简化对象写法箭头函数函数默认参数REST参数...Spread扩展运算符Symbol 数据类型迭代器生成器PromiseSetMapclass 类数值扩展对象方法的扩展模块化ES7新特性Array的includes**运算符ES8新特性async & await对象方法的扩展ES9新特性REST参数与Spread扩展正则扩展ES10新特性Object.fromEntries方法trimStar
ES6、7学习笔记（尚硅谷）-8-三点运算符
weixin_42349568的博客
08-05 157
一，可变参数 用来取代arguments,但是它比arguments更加灵活，只能放在形参列表最后，来取代对应位置的最后部分形参。 对于arguments的使用：因为arguments是伪数组！ function foo(a,b){ console.log(arguments) arguments.forEach(function(item,index){ console.log(item,index) }) } foo(2,6) //报错，因为fo
尚硅谷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、付费专栏及课程。

余额充值