自学内容网 自学内容网

ES6基础(JavaScript基础)

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

1. ECMAScript介绍

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。它是JavaScript的一个标准,后两者是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中,setTimeoutsetInterval 也是异步操作。使用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


原文地址:https://blog.csdn.net/m0_63070489/article/details/137439130

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!