ES6基础（JavaScript基础）

本文用于检验学习效果，忘记知识就去文末的链接复习

1. ECMAScript介绍

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。它是JavaScript或JScript的一个标准，后两者是ECMA-262标准的实现和扩展。ECMAScript最初由网景的布兰登·艾奇开发，经过多次命名变更后，最终确定为当前的名称。

ECMAScript，ES6与JavaScript的区别

JavaScript是符合ECMAScript规范的语言。
ES6是JavaScript的一个版本更新

2. 环境搭建

  1. 安装VS Code
  2. 安装插件JavaScript Extensions Pack - Quokka, Tabnine, ESLint, LiveServer, Prettier

自动补全

  • html:5

3. 数据类型

  • 变量（let）：可以被修改
  • 常量（const）：不可被修改

输出

  • console.log()

数据类型

  • 得到变量a的数据类型：typeof a
  • 数值number（小数，整数）
  • 字符串string（"这是字符串"）
    • '姓名:${this.name} 个人网站:${this.web}' 模板字符串
    • .length 长度
    • .toLowerCase() 转小写
    • .toUpperCase() 转大写
    • [] 索引
    • let strArr = [...str] 字符串转字符数组
    • parseInt 字符串转int
    • .replace 替换1个字符串
    • .replaceAll 替换全部字符串
    • .trim() 删除两边指定字符
    • .includes() 是否包含某字符串
    • .indexOf() 某字符串第一次出现的位置
    • .startsWith() 判断字符串是否以指定字符串开头
    • .endsWith() 判断字符串是否以指定字符串结尾
    • .split() 按指定分隔符分割字符串
    • .subStr() 字串[起点，长度)
    • .repeat(x) 复制3份字符串
    • .padStart() 在字符串前填充
    • .padEnd() 在字符串后填充
  • 布尔boolean
  • 数组array
    • .push 在末尾添加元素
    • .pop 在末尾删除元素
    • .unshift 在头部添加元素
    • .shift 在头部删除元素
    • .splice 切片（头，长度）
    • .reverse 倒着排序
    • .sort 排序
    • .filter 筛选
    • .concat 拼接
    • for(let item of arr){} 高级for循环遍历
    • .foreach 对每一个元素都执行一个方法
    • 箭头函数中，用value，index，可得到值和下标
  • 类class
    • 构造函数：constructor
    • #pper 私有属性pper
    • get``set 存取器
    • class Bob extends Man {} 继承
  • 对象object【可动态添加属性】
    • 添加属性
    • 删除属性
    • let ans = property in obj1 对象中是否有某属性
    • Object.keys().length 对象中属性数量
    • Object.entries(obj1) 将对象转换为数组
    • for(let key in obj1){} 高级for
    • obj1 = {} 清空对象
  • map（[key , value]）（键唯一）
    • let a=new Map([ ["1","hh"] , ["2","tt] ])
    • .set 添加新元素
    • .delete 删除元素
    • .clear 清空集合
    • .has 某元素是否在集合中
    • .size 集合大小
    • let arr = Array.from(map1) 将集合转换为数组
    • let arr = [...map1]将集合转换为数组
    • for(let [key,value] of person){} 高级for
    • .foreach 对每个元素执行相同操作
  • set：集合（无序，唯一）
    • let a = new Set([1,2,3,"2",1)
    • .add 添加一个元素，不会重复添加
    • .delete 删除一个元素
    • .clear 清空集合
    • .has 某元素是否在集合中
    • .size 集合大小
    • arr = Array.from(set1) 将集合set1转化为数组
    • arr = [...set1] 将集合set1转化为数组
    • arr = [...string1] 将字符串string1转化为数组
    • for(let item of arr){} 高级for循环遍历
    • .foreach 对每一个元素都执行一个方法

3.1 函数function

普通函数

function fun1(a){a++return a+1 //返回值
}

匿名函数

let ff=function(a){a++return a+1 //返回值
}
//之后ff可当作函数使用
console.log(ff(2))

回调函数

箭头函数

let plus = (a) => {return a + 1; //返回值
};

隐式返回

let plus = (a) => a + 1;

4. 特性

4.1 解构

  • 解构：从数组/对象中提取值，之后赋给变量（很多语法）
    • 数组解构
    • 对象解构

4.2 Promise

一个 Promise 对象代表了一个可能现在、将来或永远不会有的值。这个值可能是成功的结果，也可能是失败的原因。Promise 有三种状态：

  • Pending（进行中）：初始状态，既不是成功，也不是失败状态。
  • Fulfilled（已成功）：意味着操作成功完成。
  • Rejected（已失败）：意味着操作失败。

Promise 对象一旦从 Pending 状态变为 Fulfilled 或 Rejected 状态，就不会再改变。

以下是Promise的一些常见应用场景：

4.2.1 网络请求

当进行网络请求，如从服务器获取数据时，由于网络请求的响应时间不确定，因此这是一个典型的异步操作。使用Promise可以优雅地处理网络请求的响应和错误。

function fetchData() {return new Promise((resolve, reject) => {fetch('https://api.example.com/data').then(response => response.json()).then(data => resolve(data)).catch(error => reject(error));});
}fetchData().then(data => {console.log(data);
}).catch(error => {console.error('Fetch failed:', error);
});

4.2.2 定时任务

在JavaScript中，setTimeout 和 setInterval 也是异步操作。使用Promise可以封装这些操作，使其更加易于管理和组合。

function delay(ms) {return new Promise(resolve => setTimeout(resolve, ms));
}delay(1000).then(() => {console.log('One second has passed.');
});

4.2.3 文件读写

在Node.js环境中，文件读写也是异步操作。Promise可以简化文件读写的错误处理和结果处理。

const fs = require('fs').promises;fs.readFile('example.txt', 'utf8').then(data => {console.log(data);}).catch(error => {console.error('Error reading file:', error);});

4.2.4 依赖异步操作的流程控制

当有一系列异步操作需要按照特定顺序执行时，Promise的链式调用和async/await语法可以使得代码结构更加清晰。

async function processData() {try {const data1 = await fetchData1();const data2 = await processData1(data1);const result = await finalizeData(data2);return result;} catch (error) {console.error('Processing failed:', error);}
}

4.2.5 并行异步操作

当需要同时执行多个异步操作，并等待所有操作完成后进行处理时，可以使用Promise.all。

Promise.all([fetchData1(), fetchData2()]).then(([data1, data2]) => {console.log(data1, data2);}).catch(error => {console.error('One of the fetches failed:', error);});

4.2.6 竞争条件

当多个异步操作可能几乎同时完成，并且只关心第一个完成的结果时，可以使用Promise.race。

Promise.race([fetchSlowData(), fetchFastData()]).then(data => {console.log(data); // 可能是fastData或slowData的结果，取决于哪个先完成}).catch(error => {console.error('Both fetches failed:', error);});

4.2.7 事件监听与异步操作结合

在某些应用中，可能需要将事件监听与异步操作结合使用。Promise提供了一种机制来等待某个事件触发，然后继续执行后续操作。

Promise的这些应用场景使得异步编程更加直观、可预测和易于维护。随着async/await语法的引入，Promise的使用变得更加简洁和方便，进一步推动了异步编程在JavaScript中的普及。

4.3 Fetch

Fetch是一个现代的、基于Promise的API，用于在浏览器和服务器之间进行网络请求。

【发送http请求，之后接收服务器的响应数据】

4.3.1 get请求

fetch('http://0.0.0.0/get').then(response => {return response.json() //将响应数据解析为json格式的数据
}).then(data => { //data解析后的json数据（上面return传过来的）console.log(data)
}).catch(error => {console.log(error.message)
}).finally(() => {console.log("get.finally")
})

4.3.2 post请求

  • 请求方法
  • 请求头
  • 请求体
  1. 表单
  2. JSON

5. Node.js

5.1 Node.js下载安装

Node.js官方下载地址

#查看node版本
node -v
#查看npm版本
npm -v

#查看当前使用的镜像源，https://registry.npmjs.org/为npm默认镜像源
npm get registry
#设置淘宝镜像源
npm config set registry https://registry.npm.taobao.org

5.2 axios下载安装

Axios VS Fetch
相同：
Axios是基于Promise的网络请求库，可发送http请求并接收服务器的响应数据
Fetch也是基于Promise的，也可发送http请求并接收服务器的响应数据
区别：
Fetch主要用于浏览器（浏览器原生）
Axios主要用于Node.js，也可应用于浏览器

在对应文件目录执行npm install axios

会得到这三个文件
在这里插入图片描述
查看CDN，找到node_modules\axios\dist\axios.min.js

在这里插入图片描述

5.3 axios使用

5.3.1 get请求

axios.get('http://127.0.0.1/get').then(response => {console.log(response.data)
}).catch(error => {console.log(error)
}).finally(() => {console.log("finally")
})

5.3.2 post请求

let data = {name: '小明',sex: '男',
}axios.post('http://127.0.0.1/post', data, {headers: {'Content-Type': 'application/Content-Type1'}
}).then(response => {console.log(response.data)
}).catch(error => {console.log(error)
}).finally(() => {console.log("finally")
})

5.3.3 postJson请求

let data = {name: '小明',sex: '男',
}axios.post('http://127.0.0.1/postJson', data).then(response => {console.log(response.data)
}).catch(error => {console.log(error)
}).finally(() => {console.log("finally")
})

6. 模块化开发

模块

  • 变量
  • 函数

导出模块：export

  • 导出全部模块：
  • 导出指定模块：
    • export { name , sex , class}
    • 导出为整体：export default { name , sex , class}

导入模块：import

  • 导入全部模块：import * as obj1 from './index.js'
  • 导入指定模块：
    • import {name as stuName,sex,class} from './index.js'（name用了别名stuName）
    • 导入为整体： import allModule from './index.js'（用allModule.访问指定的东西）

7. 同步/异步

  • 同步：不同代码段，执行有严格的顺序要求
  • 异步：有耗时较长的代码段1，主线程不会等待代码段1完成才执行代码段1（程序运行进度不可预知）

关键字

  • async
  • await：暂停，等待Promise接收或拒绝，才进行下一步

作用

  • 处理多个异步操作时，可使代码更简洁易读
async function fetchData() {  try {  const response = await fetch('https://api.example.com/data');  if (!response.ok) {  throw new Error('Network response was not ok');  }  const data = await response.json();  return data;  } catch (error) {  console.error('There has been a problem with your fetch operation:', error);  }  
}  // 使用 fetchData 函数  
fetchData().then(data => {  console.log(data);  
});

在这个例子中，fetchData函数是一个异步函数，它使用await来等待fetch操作和response.json()操作的完成。如果在等待过程中发生错误，catch块会捕获该错误并进行处理。最后，通过调用fetchData().then(data => {...})，我们可以获取异步操作的结果。

需要注意的是，await只能在async函数内部使用。如果尝试在非异步函数中使用await，JavaScript会抛出语法错误。此外，虽然await看起来像是阻塞了代码的执行，但实际上它并没有阻塞主线程；它只是让出了控制权，使得其他任务可以继续执行。当Promise解决时，控制权会返回给await表达式后面的代码。

参考

https://www.dengruicode.com/classes?uuid=04682448c47b45e980e57d476918d740

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/803906.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于拉格朗日分布算法的电动汽车充放电调度MATLAB程序

基于拉格朗日分布算法的电动汽车充放电调度MATLAB程序

微❤关注“电气仔推送”获得资料（专享优惠） 程序简介 该模型主要做的是基于拉格朗日分布算法的电动汽车充放电调度模型。利用蒙特卡洛模拟法模拟出电动汽车负荷曲线，并求解出无序充电功率曲线和有序充电曲线，该模型在电动汽车个…
阅读更多...
逆向案例十六——简单webpack逆向，财联社信息

逆向案例十六——简单webpack逆向，财联社信息

网址链接：财联社A股24小时电报-上市公司动态-今日股市行情报道 数据包sign参数为加密，可以直接搜索找参数的位置，搜索不到的情况下，在断点跟栈： 确定js文件所在位置，并打上断点。 点击加载刷新页面。可以发…
阅读更多...
REST API实战演练之JavaScript使用Rest API

REST API实战演练之JavaScript使用Rest API

咱们前面讲了一下如何创建REST API 假期别闲着：REST API实战演练之创建Rest API-CSDN博客 又讲了java客户端如何使用REST API 假期别闲着：REST API实战演练之客户端使用Rest API-CSDN博客 接下来咱们看看JavaScript怎么使用REST API。 一、新建一个…
阅读更多...
Log4J2漏洞（CVE-2024-44228）原理_log4j2漏洞原理，网络安全面试项目

Log4J2漏洞（CVE-2024-44228）原理_log4j2漏洞原理，网络安全面试项目

Apache log4j2-RCE 漏洞 一、漏洞简介 二、漏洞原理 三、靶场漏洞复现 四、总结 Apache log4j2-RCE 漏洞 一、漏洞简介 Apache Log4j2是一个基于Java的日志记录工具，当前被广泛应用于业务系统开发，开发 者可以利用该工具将程序的输入输出信息进行日…
阅读更多...
Feature Pyramid Networks for object detection

Feature Pyramid Networks for object detection

FPN 总述1.引言2.相关工作3. Feature Pyramid NetworksBottom-up pathwayTop-down pathway and lateral connections 4. 应用用于 RPN用于 Fast R-CNN 核心代码复现FPN网络结构ResNet Bottleneck完整代码 总述 下图中，蓝色边框表示的是特征图，边框越粗表…
阅读更多...
在Ubuntu Linux中安装boost库详细步骤

在Ubuntu Linux中安装boost库详细步骤

下载boost安装包 在Linux浏览器 Boost C Libraries 下载boost的最新版安装包 安装包解压缩 在安装目录中找到压缩包，右键点击压缩包，点击Extract to...解压缩至选择的目录 设置编译器 在解压缩后的目录中进入终端，运行命令： 如…
阅读更多...
LeetCode 2529. 正整数和负整数的最大计数——每日一题

LeetCode 2529. 正整数和负整数的最大计数——每日一题

上一篇博客：LeetCode 993. 二叉树的堂兄弟节点——每日一题 写在前面：大家好！我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正，感谢大家的不吝赐教。我的唯一博客更新地址是：https://ac-fun.…
阅读更多...
力扣121. 买卖股票的最佳时机

力扣121. 买卖股票的最佳时机

Problem: 121. 买卖股票的最佳时机 文章目录 题目描述思路复杂度Code 题目描述 思路 1.定义一个int数组max大小同prices；定义int变量curMax初始化为0； 2.从后往前遍历数组，若当前元素prices[i] > curMax时，则使将其赋值给curMa…
阅读更多...
43.基于SpringBoot + Vue实现的前后端分离-疫苗发布和接种预约系统（项目 + 论文）

43.基于SpringBoot + Vue实现的前后端分离-疫苗发布和接种预约系统（项目 + 论文）

项目介绍 本次使用Java技术开发的疫苗发布和接种预约系统，就是运用计算机来管理疫苗接种预约信息，该系统是可以实现论坛管理，公告信息管理，疫苗信息管理，医生管理，医院信息管理，用户管理&#x…
阅读更多...
【ensp】VLAN间通信的解决办法

【ensp】VLAN间通信的解决办法

目录 VLAN间通信简介 VLAN间通信的两种方式 借助三层设备路由器进行VLAN间的通信（也就是单臂路由） 在端口上创建子接口之后为什么需要开启arp广播，是因为他是子接口吗? 拓扑图 交换机配置 路由器配置 查看路由器配置 测试能否实现…
阅读更多...
python统计分析——线性相关

python统计分析——线性相关

参考资料：python统计分析【托马斯】 对于两个相关的变量，相关性度量的是两个变量之间的关联程度。相反，线性回归是用一个变量的值来预测另一个变量的值。 1、相关系数 两个变量之间的相关系数回答了这个问题：“这两个变量有关系吗…
阅读更多...
Windows系统上运行appium连接iOS真机自动化测试

Windows系统上运行appium连接iOS真机自动化测试

步骤： 1、windows安装tidevice工具 2、Mac系统打包安装WebDriverAgent（WDA）工具 3、安装Appium 4、连接iOS手机 iOS自动化的实现和执行都依赖Mac系统，因为需要通过Xcodebuild编译安装WDA (WebDriverAgent)到iOS设备中，通过WDA实现对被测应用进行操作。而Windows系统无…
阅读更多...
LINUX系统触摸工业显示器芯片应用方案--Model4（简称M4芯片）

LINUX系统触摸工业显示器芯片应用方案--Model4（简称M4芯片）

背景介绍： 触摸工业显示器传统的还是以WINDOWS为主，但近年来，安卓紧随其后，但一直市场应用情况不够理想，反而是LINUX系统的触摸工业显示器大受追捧呢？ 触摸工业显示器传统是以Windows系统为主&#xff0c…
阅读更多...
电脑更新到win11后不能上网,更新win11后无法上网

电脑更新到win11后不能上网,更新win11后无法上网

越来越多的用户升级了win11系统使用，然而有些用户发现电脑更新到win11后不能上网了，这是怎么回事呢?而且奇怪的是，网络状态显示已连接，但就是无法上网，原本以为重置网络就能搞定，但结果相反。针对这一情况…
阅读更多...
如何在前后端一体的项目中引入element-ui，即引入index.js、index.css等文件。

如何在前后端一体的项目中引入element-ui，即引入index.js、index.css等文件。

24年接手了一个18年的项目&#xff0c;想使用el-ui的组件库&#xff0c;得自己手动引入。 通过官网可以知道&#xff0c;首先得准备以下文件 <!-- 引入样式 --> <link rel"stylesheet" href"https://unpkg.com/element-ui/lib/theme-chalk/index.css…
阅读更多...
计算机视觉——Python OpenCV BGR转HSV

计算机视觉——Python OpenCV BGR转HSV

这里将介绍如何使用 OpenCV 与 Python 来作彩色影像转HSV(RGB to HSV 或 BGR to HSV)&#xff0c;在写 Python 影像处理程序时常会用到 OpenCV cvtColor 作颜色空间转换的功能&#xff0c;接下来介绍怎么使用 Python 搭配 OpenCV 模块来进行 RGB/BGR 转 HSV 彩色转HSV空间。 H…
阅读更多...
第6章 6.1.1 文本格式化 sprintf函数（MATLAB入门课程）

第6章 6.1.1 文本格式化 sprintf函数（MATLAB入门课程）

sprintf函数源自 C 语言标准库中的同名函数&#xff0c;这个函数在 C 语言中用于创建格式化的字符串&#xff0c;且使用频率非常高。作为一门高级编程语言&#xff0c;MATLAB借鉴了 C 语言和其他编程语言中的许多特性和命名惯例。在MATLAB中&#xff0c;sprintf函数主要有两种用…
阅读更多...
Redis系列之主从复制集群搭建

Redis系列之主从复制集群搭建

在上一篇博客&#xff0c;我们已经知道怎么搭建一个redis单机版&#xff0c;这篇博客基于之前的基础&#xff0c;来搭建一个redis主从同步&#xff0c;本博客框架是一主二从&#xff0c;一个主节点&#xff0c;其它两个从节点 实验环境 CentOS7Xshell6XFtp6Redis6.2.2 主从关…
阅读更多...
Redis中的集群(二)

Redis中的集群(二)

节点 集群数据结构 redisClient结构和clusterLink结构的相同和不同之处 redisClient结构和clusterLink结构都有自己的套接字描述符和输入、输出缓冲区&#xff0c;这两个结构的区别在于&#xff0c;redisClient结构中的套接字和缓冲区是用于连接客户端的&#xff0c;而clust…
阅读更多...
Django实现的登录注册功能

Django实现的登录注册功能

1 前言 在Web开发中&#xff0c;用户登录和注册是最基本且必不可少的功能。Django&#xff0c;作为一个高级的Python Web框架&#xff0c;为我们提供了强大的工具和库来快速实现这些功能。下面&#xff0c;我将详细介绍如何使用Django来实现用户登录和注册功能。 2 功能介绍 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023