3.1.Array.includes
Includes 方法用来检测数组中是否包含某个元素,返回布尔类型值
<script>// includes const mingzhu = ['王二','张三','李四','王五'];//判断console.log(mingzhu.includes('张三'));//trueconsole.log(mingzhu.includes('周六'));//false//indexOf 是否存在数组中 返回的是数字console.log(mingzhu.indexOf('张三'));//1console.log(mingzhu.indexOf('周六'));//-1</script>
3.2、** 指数操作符
在 ES7 中引入指数运算符「**」,用来实现幂运算,功能与 Math.pow 结果相同
console.log(2 ** 10); //1024
console.log(Math.pow(2, 10));//1024
4.1、async 和 await
async 和 await 两种语法结合可以让异步代码像同步代码一样
4.1.1、async 函数
async 是一个修饰符,async 定义的函数会默认的返回一个Promise对象resolve(已定型成功或失败)的值,因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数。
- async 函数的返回值为 promise 对象,
- promise 对象的结果由 async 函数执行的返回值决定
-
- 返回的结果不是一个 Promise 类型的对象, 是字符串、数字、undefined等,就是成功的结果
- 抛出错误, 返回的结果是一个失败的 Promise
- 返回的结果如果是一个 Promise 对象,根据Promise返回的结果确定状态
<script>//async 函数async function fn() {/* 1: 返回的结果不是一个 Promise 类型的对象, 是字符串、数字、undefined等返回的结果就是成功 Promise 对象 */// return 'bdqn';// return; // 2:抛出错误, 返回的结果是一个失败的 Promisethrow new Error('出错啦!');// 3:返回的结果如果是一个 Promise 对象,根据Promise返回的结果确定状态// return new Promise((resolve, reject) => {// resolve("成功的数据");// reject("失败的错误");// });}const result = fn();//调用 then 方法result.then((value) => {console.log(value,'成功回调');},(reason) => {console.warn(reason,'失败回调');});</script>
4.1.2、await 表达式
- await 必须写在 async 函数中
- await 右侧的表达式一般为 promise 对象
- await 返回的是 promise 成功的值
- await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理
<script>//创建 promise 对象const p = new Promise((resolve, reject) => {// resolve("用户数据");reject("失败啦!");});//1: await 要放在 async 函数中. await单向依赖asyncasync function main() {try {// result 是Promise对象成功的值let result = await p;console.log(result, "async,await");} catch (e) {//e返回的 是Promise对象失败的值console.log(e, "async,await");}}//调用函数main();// Promise调用then方法/* p.then((v) => {console.log(v, "then方法");},(r) => {console.log(r, "then方法");}); */</script>
4.1.3、async与await封装AJAX请求
<script>// 发送 AJAX 请求, 返回的结果是 Promise 对象function sendAJAX(url) {return new Promise((resolve, reject) => {//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) {//成功啦resolve(x.response);} else {//如果失败reject(x.status);}}};});}//第一种:promise then 方法测试// sendAJAX("https://api.apiopen.top/getJoke").then(value=>{// console.log(value);// }, reason=>{})//第二种: async 与 await 测试 axiosasync function main() {//发送 AJAX 请求let result = await sendAJAX("https://api.apiopen.top/getJoke");console.log(result);}main();</script>
4.2、对象方法扩展
4.2.1、Object.values 和 Object.entries
- Object.values()方法返回一个给定对象的所有可枚举属性值的数组
- Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组
<script>//声明对象const school = {name: "bdqn",cities: ["北京", "上海", "深圳"],xueke: ["前端", "Java", "大数据", "测试"],};//获取对象所有的键console.log(Object.keys(school),'key');//['name', 'cities', 'xueke'] 'key'//获取对象所有的值console.log(Object.values(school),'value');//['bdqn', Array(3), Array(4)] 'value'//entries 返回的是一个数组,数组里放一组组数组,里面是键,值console.log(Object.entries(school),'entries');//有了上面的entries结果,方便创建 Map// const m = new Map(Object.entries(school));// console.log(m,'map');</script>
4.2.2、Object.getOwnPropertyDescriptors
该方法返回指定对象所有自身属性的描述对象
补充
Object.create( proto[,propertiesObject] )
参数
proto:创建对象的原型,表示要继承的对象
propertiesObject(可选 ):也是一个对象,用于对新创建的对象进行初始化
<script>//声明对象const school = {name: "bdqn",cities: ["北京", "上海", "深圳"],xueke: ["前端", "Java", "大数据", "测试"],};//对象属性的描述对象console.log(Object.getOwnPropertyDescriptors(school),'111');// 可以对对象深层次的克隆const obj = Object.create(null, {name: {//设置值value: "bdqn",//属性特性writable: true,//是否可写configurable: true,//是否可以删除enumerable: true,//是否可以遍历},});</script>
4.3、字符串填充
padStart()、padEnd()方法可以使得字符串达到固定长度,
有两个参数,字符串目标长度和填充内容。
<script>let str = "hello";console.log(str.padStart(10, "m")); //mmmmmhelloconsole.log(str.padEnd(10, "m")); //hellommmmmconsole.log(str.padStart(5, "m")); //hello,如果长度不够,就不添加console.log(str.padEnd(5, "m")); //hello</script>