网站建设的技术要求,wordpress设置侧边栏,建设网站我们重中之重-用户体验,国外免备案域名本文用于检验学习效果#xff0c;忘记知识就去文末的链接复习
1. ECMAScript介绍
ECMAScript是一种由Ecma国际#xff08;前身为欧洲计算机制造商协会#xff0c;英文名称是European Computer Manufacturers Association#xff09;通过ECMA-262标准化的脚本程序设计语言…本文用于检验学习效果忘记知识就去文末的链接复习
1. ECMAScript介绍
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会英文名称是European Computer Manufacturers Association通过ECMA-262标准化的脚本程序设计语言。它是JavaScript或JScript的一个标准后两者是ECMA-262标准的实现和扩展。ECMAScript最初由网景的布兰登·艾奇开发经过多次命名变更后最终确定为当前的名称。
ECMAScriptES6与JavaScript的区别
JavaScript是符合ECMAScript规范的语言。
ES6是JavaScript的一个版本更新2. 环境搭建
安装VS Code安装插件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 对每一个元素都执行一个方法箭头函数中用valueindex可得到值和下标 类class 构造函数constructor#pper 私有属性ppergetset 存取器class Bob extends Man {} 继承 对象object【可动态添加属性】 添加属性删除属性let ans property in obj1 对象中是否有某属性Object.keys().length 对象中属性数量Object.entries(obj1) 将对象转换为数组for(let key in obj1){} 高级forobj1 {} 清空对象 map[key , value]键唯一 let anew 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){areturn a1 //返回值
}匿名函数
let fffunction(a){areturn a1 //返回值
}
//之后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请求
请求方法请求头请求体
表单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.org5.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.jsname用了别名stuName导入为整体 import allModule from ./index.js用allModule.访问指定的东西
7. 同步/异步
同步不同代码段执行有严格的顺序要求异步有耗时较长的代码段1主线程不会等待代码段1完成才执行代码段1程序运行进度不可预知
关键字
asyncawait暂停等待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函数内部使用。如果尝试在非异步函数中使用awaitJavaScript会抛出语法错误。此外虽然await看起来像是阻塞了代码的执行但实际上它并没有阻塞主线程它只是让出了控制权使得其他任务可以继续执行。当Promise解决时控制权会返回给await表达式后面的代码。
参考
https://www.dengruicode.com/classes?uuid04682448c47b45e980e57d476918d740
