重点密中密--es6的知识点笔记

最新推荐文章于 2024-08-21 14:09:37 发布
最新推荐文章于 2024-08-21 14:09:37 发布
阅读量83 收藏
点赞数
文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wafer_biscuit/article/details/118084090
版权

(发现上机实习课最好的打开方式就是不做课设)
这次的知识点挺多的,按照时间顺序上传下。
1-ES7部分新特性

<!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 a1=[1,2,'UMP45','HK416']
        console.log(a1.includes('HK416'));
        //判断参数是否存在于其中，返回布尔值
        //**求幂运算符
    </script>
</body>
</html>

2-ES8

<!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>
        //大的来了，async+await
        //async函数   (返回结果一定为promise对象<无论你怎么写 return >)
        async function fn1() {
            //返回结果不是promise，则结果是成功的promise，值为实际return 的对象
            //使用 throw new err() 抛出错误，返回一个失败的promise
            //返回结果为promise对象，则看return 的promise结果是什么
            return new Promise((res, rej) => {
                res('Success!')
            })
        }

        const r1 = fn1();
        console.log(r1);//像一个语法糖
        r1.then((value) => {
            console.log(value);
        }, (reason) => {
            console.log(reason);
        })
    </script>
</body>

</html>

es8-await

<!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((res, rej) => {
            res('im robot')
            rej('失败了')
        })

        // await 必须放在 async 里面!!!
        // await右面是一个promise对象
        // await 接受 Promise 对象成功的值(resolve)!!!!!
        // 完整形式应该使用try...catch进行捕获错误❌
        async function fn() {
            try {
                let result = await p;
                console.log(result);
            }catch(e){
                console.log(e);
            }
        }
        fn()
    </script>
</body>

</html>

案例

<!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 then 实现 Ajax接受返回参数
        //发送Ajax，返回Promise对象
        function sendAjax(url) {

            //0->返回promise对象
            return new Promise((res, rej) => {
                //1-创建对象
                const x = new XMLHttpRequest();
                //2-初始化
                x.open('GET', url);
                //3-发送
                x.send();
                //4-事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState === 4)
                        if (x.status >= 200 && x.status < 300) {
                            //成功时
                            res(x.response);
                        }else{
                            rej(x.status)
                        }
                }
            })
        }



        // //promise + then 核心部分
        // const result = sendAjax('https://api.apiopen.top/getJoke').then((value)=>{
        //     console.log(value);
        // })
        // // console.log(result);



        //使用async+await实现
        async function doit(){
            let result = await sendAjax('https://api.apiopen.top/getJoke');
            console.log(result);
        }
        
        doit()
    </script>
</body>

</html>

async + await js文件

const fs = require('fs')

//读取
function Readn1() {
    return new Promise((res, rej) => {
        fs.readFile('./note.txt', (err, data) => {
            if (err) rej(err)
            res(data)
        })
    })
}

function Readn2(){
    return new Promise((res,rej)=>{
        fs.readFile('./note2.txt',(err,data)=>{
            if(err) rej(err)
            res(data)
        })
    })
}

function Readn3(){
    return new Promise((res,rej)=>{
        fs.readFile('./note3.txt',(err,data)=>{
            if(err) rej(err)
            res(data)
        })
    })
}//这三个函数的返回结果都是promise对象

async function core(){
    try{//完整写法，需要捕获错误
        let n1 = await Readn1();//await返回的结果是promise成功的值
        let n2 = await Readn2();
        let n3 = await Readn3();
        //结果都获取过来了
        console.log((n1+n2+n3).toString());
    }catch(e){
        console.log(e);//一旦出现错误便会捕获
    }
}

core();
//这样书写代码，会和同步调用非常相似，只是前面多了一个async 或者 await

导入导出

<!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 type="module">
        //注意script 里面有 type='module' 这一段，使其确定为module模块引入
        import * as m1 from './m1.js'//导入m1中所有暴露的值和函数到m1变量中
        console.log(m1);

        import * as m2 from './m2.js'
        console.log(m2);

        import * as m3 from'./m3.js'
        console.log(m3);//这样导入会和前俩种的结构有所不同

        //以上为通用导入方式

        //2-解构赋值方式
        import {name,kill} from './m1.js'
        console.log(name,kill);

        //<别名的使用>
        import {name as name1,goaway} from './m2.js'
        console.log(name1,goaway);

        //3-导入以默认方式暴露的一种导入方式
        import{default as m33} from './m3.js'
        console.log(m33);

        //简便形式---只支持默认暴露
        import m333 from './m3.js'
        console.log(m333);
    </script>
</body>
</html>

相应js

export let name='Ellie'

export function kill(){
    console.log('Press X to kill');
}
//此方法为分别暴露

//此方法为统一暴露

let name='Elizabeth'

function goaway() {
    console.log('im out');
}

export {name,goaway}

//默认暴露
export default{
    name:'UMP45',
    attack() {
        console.log('open fire');
    }
}
//这样导出会和前俩中有所不同

入口文件
js->

//入口文件

import * as m1 from './m1.js'
import * as m3 from './m3.js'
console.log(m1,m3);

<!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 src="./app.js" type="module"></script>
    <!-- 同样注意script 里面有 type='module' 这一段，使其确定为module模块引入 -->
    这个只是理想状态下的引入(可能会有兼容性等问题 fxxk IE)
    实际上一般采用babel对此进行处理
    而babel是一个JavaScript编译器，可以使新的js语法编译为旧版本的
</body>
</html>

babel的使用

<!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>
    <!-- 1-安装工具 babel-cli babel-preset-env browserify(webpack在项目中)-->
    <!-- 2-通过babel进行转换 -->
    <!-- 3-打包处理  npx browserify dist/js/app.js -o dist/bundle.js  -->
    <!-- 只有在打包以后才可以进行引入等操作 -->

    <!-- 改动文件后运行上面那条语句就可以做到更新 -->

    <script src="./dist/bundle.js"></script>

    <!-- 详细安装步骤
    1- npm init
    2-  npm i babel-cli babel-preset-env browserify -D 安装包并使用 -D 开发依赖
    3-  npx babel ./ -d dist --presets=babel-preset-env
        npx命令 (要改动的js) -d (改后存储的位置) --~默认设置 
    4- npx browserify dist/js/app.js -o dist/bundle.js  进行对目标js打包
-->
</body>
</html>
my威化饼干
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
es6超全学习笔记-思维导图
flyf123的博客
09-12 202
ES6常见知识点总结
果冻
11-25 1120
目录 前言 1.1块级作用域 1.1.1 什么是变量作用域 1.1.2 没有块级作用域造成的问题 1.2 const的使用 1.3 ES6的增强写法 1.3.1 ES6的对象属性增强型写法 1.3.2 ES6对象的函数增强型写法 1.4 箭头函数 1.4.1 认识箭头函数 1.4.2 箭头函数的参数和返回值 1.4.3 箭头函数的this使用 1.5高阶函数 1.5.1 filter过滤函数 1.5.2 map高阶函数 1.5.3 reduce高阶函数 1.5.4综合使用
js高级--ES6知识点小计
2401_84435138的博客
04-28 399
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-9JNtMvRr-1714311147124)][外链图片转存中…(img-5vFCVjcm-1714311147125)][外链图片转存中…(img-i1sx3PMq-1714311147125)]
js高级--ES6知识点小计(1)
2401_84435138的博客
04-28 395
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**[外链图片转存中…(img-fpUsjjMu-1714311121364)][外链图片转存中…(img-6haIuIql-1714311121365)]
class --- ES6知识点记录
huangbx_tx的博客
07-26 485
以下是来自阮一峰ES6教程的笔记记录。主要是一些个人认为在实际开发中会频繁用到的知识点的摘要。（用不到的一般记不住） 文章目录定义方法方法的位置getter && setter立即执行classstatic方法static属性this的问题解决方案1：在构造函数中将方法绑定类解决方案2：使用箭头函数（强推，又优雅又有用）解决方案3：Proxy属性定义私有属性或私有方法 定义方法 ...
谷粒商城实战笔记-29~34-前端基础 - ES6
epitomizelu的专栏
07-12 1087
通常被称为ES6，是JavaScript的一种规范，于2015年发布，因此有时也被称为ES2015。它是JavaScript语言的一次重大升级，引入了一系列新特性和语法糖，旨在提高语言的性能、可读性和功能丰富度。ES6 的目标之一是让JavaScript更接近其他成熟的编程语言，同时也保持其原有的灵活性和动态性。
js高级--ES6知识点小计，深度解析，值得收藏
Python毕设源码程序王哥
04-04 940
、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**暂时性死区：在一个代码块内，如果有某个变量，会绑定该区域，不再受外界的影响。：声明的是常量，值是不可以改变的(不能重新赋值)，其余语法和let一样。缩小变量作用域，防止变量污染。
js高级--ES6知识点小计，前端高分面试指南
03-20 306
数组解构中，变量的值由所处的位置决定。对象的属性没有次序，变量必须与属性同名才可以，才可以取到正确的值。标签模板 ``：可以跟在一个函数后面，该函数将被调用来处理这个模板字符串。暂时性死区：在一个代码块内，如果有某个变量，会绑定该区域，不再受外界的影响。：声明的是常量，值是不可以改变的(不能重新赋值)，其余语法和let一样。对象的解构与数组的解构有一个重要的不同，数组的元素是按次序排列的；向上寻找距离该变量最近的开始的函数的作用范围，就是该{}之内。对象的解构赋值 使用的是{}；let没有变量提升的概念。
【前端开发----ES6++】前端开发之ES6（ECMAscript6）语法以及ES6++快速学习入门（前端必备了解知识）
m0_67844671的博客
09-22 655
ES6以及ES7,8,9,新增知识点讲解，包括新增数据类型symbol,map,set，解构赋值，promise对象，async，await相关知识点，一些数组和对象新增方法，class类的定义实例化等内容
ES6常用知识点梳理（常用）
君子-如兰的博客
06-10 1729
ES6
es6笔记---学习这些就够了
04-29
"ES6笔记---学习这些就够了" ES6是一种JavaScript语言标准，以下是ES6中的重要知识点： Bootstrap Bootstrap是一个CSS库，提供了现成的样式，通过使用类名可以快速实现页面布局。Bootstrap栅格系统提供了响应式...
es6-for-everyone
05-02
以下是课程中的关键知识点总结： ### 1. **let 和 const 声明** - `let` 用于块级作用域的变量声明，解决了之前`var`造成的变量提升和作用域混乱问题。 - `const` 声明常量，一旦赋值就不能更改，但需要注意的是，...
java引用传递笔试题abc-ES6-Note:ES6学习笔记
06-20
注：此笔记是我在主要用Swift语言开发，对比整理的一些我感觉常用的功能特性点，匆匆忙忙，粗粗浅浅，以偏概全，仅自以为容易混淆和类比以及不同的知识点。 目 录 var let const var let 区别 var 在以下这样的代码...
es6笔记补充es6笔记补充
04-03
本篇笔记将着重补充关于ES6的知识点，包括数据类型、高级特性以及变量、数据和内存管理。 一、JS 数据类型 在ES6之前，JavaScript有两大类数据类型：基本类型（Primitive Types）和引用类型（Reference Types）。...
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
10-15
在本次的学习笔记中，我们将详细探讨ES6在字符串、数组、对象和函数上的新增知识点，同时通过实例来分析这些新增特性在实际开发中的应用和注意事项。 首先是字符串的处理。在ES6中，引入了模板字符串的概念，它允许...
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 528
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
最新发布
galaxyJING的博客
08-21 253
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 889
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 996
react详细自我学习笔记，内容包括JSX、Redux、Router等
JavaScript ES6 学习笔记：块级作用域、Promise、Class 等核心知识点
ES6 中引入了 Unicode 字符串支持，新增了 Unicode 代码点表示法。同时，正则表达式也获得了增强，引入了粘连标记和模板字符串标记。 **模板字符串** 模板字符串是 ES6 中的一种新的字符串表示法，使得字符串的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值