3.1.Array.includes
Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值
<script>
// includes
const mingzhu = ['王二','张三','李四','王五'];
//判断
console.log(mingzhu.includes('张三'));//true
console.log(mingzhu.includes('周六'));//false
//indexOf 是否存在数组中 返回的是数字
console.log(mingzhu.indexOf('张三'));//1
console.log(mingzhu.indexOf('周六'));//-1
</script>3.2、** 指数操作符
在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同
console.log(2 ** 10); //1024
console.log(Math.pow(2, 10));//10244.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:抛出错误, 返回的结果是一个失败的 Promise
throw 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单向依赖async
async 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 测试 axios
async 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")); //mmmmmhello
console.log(str.padEnd(10, "m")); //hellommmmm
console.log(str.padStart(5, "m")); //hello，如果长度不够，就不添加
console.log(str.padEnd(5, "m")); //hello
</script>
