0
0

前端小白的学习之路(ES6 二)

提示：ES6几个新增常用的数组，字符串，对象API,拓展运算符，Promise，async和await

一、新增API

1.数组API

1)循环forEach

arr.forEach(callback(item,index,arr))

可以循环遍历数组中的每个元素，并对每个元素执行指定的操作。

  1. let students = ["张三","李四","赵五","陈六"]
  3. // 1） 循环
  4. students.forEach(function(item,index,arr){
  5.        //item:当前处理的数据
  6.        //index:当前处理数据的下标
  7.        //arr:当前处理的数组
  8.       console.log(item,index,arr)
  9. })

注意：

  1. forEach

方法无法中途退出循环（像 

  1. for

或 

  1. while

循环中的 

  1. break

语句），也无法使用 

  1. return

来返回值

2)过滤filter

arr.filter(callback(item,index,arr))

创建一个新数组，其中包含符合指定条件的所有元素。

  1. filter

方法同样接收一个回调函数作为参数，该回调函数会被传入三个参数：当前元素的值(item)、当前元素的索引(index)和被遍历的数组本身(arr)。回调函数应该返回一个布尔值，用于指示是否保留当前元素。

  1. var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  3. var evenNumbers = numbers.filter(function(number) {
  4.     return number % 2 === 0;
  5. });
  7. console.log(evenNumbers); // 输出 [2, 4, 6, 8, 10]

注意的是，filter 方法不会修改原始数组，而是返回一个新的数组，其中包含经过操作后的值。

3)映射(一 一对应)map

arr.map(callback(item,index,arr))

用于对数组中的每个元素执行指定操作并返回新数组的方法。和forEach和filter一样接受一个含有三个参数的回调函数。

  1. var numbers = [1, 2, 3, 4, 5];
  3. var squares = numbers.map(function(number) {
  4.     return number * number;
  5. });
  7. console.log(squares); // 输出 [1, 4, 9, 16, 25]

注意的是，

  1. map

方法不会修改原始数组，而是返回一个新的数组，其中包含经过操作后的值。

4)数学运算reduce

var result = array.reduce(function(prev,next, index, array) {
// 返回累加器的新值
}, initialValue);

于数组的归并方法，它将数组中的每个元素按顺序执行指定的操作，然后将结果汇总为单个值。

  1. reduce

方法接收两个参数：一个是回调函数，另一个是初始值（可选）。回调函数接收四个参数：累加器值(prev)、下个元素的值(next)、当前元素的索引(index)和被遍历的数组本身(array)。

  1. let arr = [1,2,3,4];
  2. // 累计
  3. let value = arr.reduce(function(prev,next){
  4.     return prev * next;
  5. })
  6. console.log(value);// 24

5)测试every

var isEvery = arr.every(function(item, index, array) {
// 返回测试条件的结果
});

检测数组的每一项数据是否符合条件 ，是，返回true,否，返回false。

  1. // every  检测数组的每一项数据是否符合条件 ，是，返回true。
  2. let data = [1,2,3,4,'abc',6,7,8];
  3. let isNum = data.every(item=>{
  4.     if(typeof item === 'number') {
  5.         return true;
  6.     }
  7. })
  8. console.log(isNum);// true

2.字符串API

  1. let str = "https://www.abc.com/static/images/1.jpg";

1).str.startsWith('str2')

检查字符串是否以某一字段开头

  1. console.log(str.startsWith("https"));// true
  3. console.log(str.startsWith("file"));// false

2).str.endWith('str2')

检查字符串是否以某一字段结尾 

  1. console.log(str.endsWith(".jpg"));// true
  3. console.log(str.endsWith(".png"));// false

3). str.includes("str2")

检查字符串是否包含某一字段 

  1. console.log(str.includes("static"));// true
  3. console.log(str.includes(".com"));// true
  5. console.log(str.includes(".net"));// false

3.对象API

1).delete

删除对象中的属性

  1. let a = 100;
  2. let b = 200;
  3. let point = { a, b };
  5. // 删除对象 a 属性
  6. delete point.a;
  7. console.log(point);// {b: 200}

2).obj.hasOwnProperty('键名')

判断对象中是否包含该属性

  1. let point = {
  2.     a: 5,
  3.     b: 'c'
  4. }
  5. // 判断对象是否存在指定属性
  6. console.log(point.hasOwnProperty('b'));// true
  7. console.log(point.hasOwnProperty('xxxx'));// false

3).Set对象

Set 有管理数组 操作数组等相关的功能 

  1. let arrColor = ['red', 'red', 'red', 'green', 'blue', 'blue', 'blue', 'yellow', 'pink']
  2. console.log(arrColor)
  4. let setObj = new Set(arrColor);
  5. console.log(setObj);// 使用这个对象管理数据
  7. // Set 集合中的数据是唯一的
  8. //Set 对象的特点包括：
  9. //唯一性：Set 中的值是唯一的，即相同的值在 Set 中只会出现一次。
  10. //无序性：Set 中的值是无序的，即值的插入顺序不会影响集合中的排序。
  11. //迭代顺序：Set 对象中的值按照插入顺序进行迭代
  12. let newArrColor = [...setObj];
  13. console.log(newArrColor);//['red', 'green', 'blue', 'yellow', 'pink']

Set 对象提供了一系列的方法用于操作集合，常见的方法包括：

add(value)：向 Set 对象中添加一个新的值，如果值已经存在则不会重复添加。
delete(value)：从 Set 对象中删除指定的值。
has(value)：判断 Set 对象中是否包含指定的值，返回布尔值。
clear()：清空 Set 对象中的所有值。
size 属性：返回 Set 对象中值的数量。

  1. let set = new Set();
  3. set.add(1);
  4. set.add(2);
  5. set.add(3);
  6. set.add(1); // 重复添加相同的值，但不会被重复存储
  8. console.log(set.size); // 输出 3
  10. console.log(set.has(2)); // 输出 true
  12. set.delete(2);
  13. console.log(set.has(2)); // 输出 false
  15. set.clear();
  16. console.log(set.size); // 输出 0

4).Map对象

Map 管理键值对 操作对象相关的功能 

  1. let mapObj = new Map()
  3. // 添加数据
  4. mapObj.set("width", "100px");
  5. mapObj.set("color", "red");
  7. // 获取数据
  8. let w = mapObj.get("width");
  9. console.log(w);// 100px
  11. // 删除color属性
  12. mapObj.delete("color");
  14. // 布尔值
  15. let isShow = true;
  16. mapObj.set(isShow, 1000);
  18. let num = mapObj.get(isShow);
  20. console.log(num);//1000
  22. console.log(mapObj);//Map(2) {'width' => '100px', true => 1000}
  24. // 采用map对象管理键值对,方便添加数据,获取数据,删除数据
  25. // 而且这种集合的键可以任意数据类型

二、拓展运算符

... ：拓展运算符 

  1. let arr = ['red', 'green', 'blue', 'yellow', 'pink'];

1) 展开集合

  1. console.log(...arr);// red green blue yellow pink   展开数据集合的作用

2) 复制

  1. let newArr = [...arr];
  3. console.log(newArr);// ['red', 'green', 'blue', 'yellow', 'pink'] 复制一个集合的作用

3) 处理剩余参数

  1. function foo(a, b, ...rest) {
  3.     console.log(a);// 'red'
  5.     console.log(b);// 'green'
  7.     console.log(rest);//  ['blue', 'yellow', 'pink']
  9. }
  11. foo(...arr)

三、Promise

1.概念

Promise是ES6异步编程的一种解决方案

(目前最先进的解决方案是async和await的搭配(ES8),

但是它们是基于promise的),

从语法上讲,Promise是一个对象或者说是构造函数

  1. console.log(typeof Promise);// 'function'

Promise 可以处于三种状态中的一种：

  1. Pending（进行中）：初始状态，表示异步操作尚未完成，Promise 实例正在执行中。
  2. Fulfilled（已完成）：异步操作成功完成，Promise 返回了一个值。
  3. Rejected（已失败）：异步操作失败，Promise 返回一个错误。

2.基本使用

  1. // 读取文档
  2.         // let msg = "";
  3.         // 以下代码的这种写法 叫做 "回调地狱"现象（就是不断嵌套回调函数的现象）
  4.         // $.ajax({
  5.         //     url: "api/a.json",
  6.         //     type: "get",
  7.         //     success(content){
  8.         //         // console.log(content)
  9.         //         msg += content.message;
  10.         //         $.ajax({
  11.         //             url: "api/b.json",
  12.         //             type: "get",
  13.         //             success(result){
  14.         //                 console.log(result);
  15.         //                 msg += " " +result.message;
  16.         //                 $.ajax({
  17.         //                     url: "api/c.json",
  18.         //                     type: "get",
  19.         //                     success(result){
  20.         //                         console.log(result);
  21.         //                         msg += " " +result.message;
  22.         //                         console.log(msg);
  23.         //                     }
  24.         //                 })
  25.         //             }
  26.         //         })
  27.         //     }
  28.         // })
  30.         // 结合Promise修改成这个样子：
  31.         const getData = (api_url) => {
  32.             // 返回一个Promise实例对象
  33.             return new Promise(function (resolve, reject) {
  34.                 $.ajax({
  35.                     url: api_url,
  36.                     type: "get",
  37.                     success(content) {
  38.                         // 符合条件 （接受）
  39.                         resolve(content);
  40.                     },
  41.                     error(err) {
  42.                         // 不符合条件（拒绝）
  43.                         reject(err);
  44.                     }
  45.                 })
  46.             })
  47.         }
  48.         // 定义字符串
  49.         let str = '';
  50.         let p1 = getData("api/a.json");
  51.         console.log(p1);// Promise实例
  52.         p1.then(
  53.             function (content) {// 请求成功
  54.                 console.log("1.0", content);
  55.                 str += content.message;
  56.                 // 返回Promise实例
  57.                 return getData("api/b.json");
  58.             },
  59.             function (err) {// 请求失败
  60.                 console.log("请求失败");
  61.             }
  62.         )
  63.         .then(
  64.             function (content) {// 请求成功
  65.                 console.log("2.0", content);
  66.                 str += " " + content.message;
  67.                 // 返回Promise实例
  68.                 return getData("api/c.json")
  69.             }
  70.         )
  71.         .then(
  72.             function (content) {
  73.                 console.log("3.0", content);
  74.                 str += " " + content.message;
  75.                 console.log(str);
  76.             }
  77.         )

3.相关方法

1).then()

对象的主要方法是 

  1. then()

，它接收两个参数：一个是处理成功情况的回调函数，另一个是处理失败情况的回调函数。这些回调函数会在异步操作完成后被调用。

  1. let promise = new Promise(function(resolve, reject) {
  2.     // 异步操作
  3.     if (/* 异步操作成功 */) {
  4.         resolve(result); // 成功时调用 resolve
  5.     } else {
  6.         reject(error); // 失败时调用 reject
  7.     }
  8. });
  10. promise.then(function(result) {
  11.     // 成功处理逻辑
  12. }).catch(function(error) {
  13.     // 失败处理逻辑
  14. });
  16. //例子
  17. let promise = new Promise(function(resolve, reject) {
  18.     setTimeout(function() {
  19.         let randomNum = Math.random();
  20.         if (randomNum < 0.5) {
  21.             resolve("Success: " + randomNum); // 成功时调用 resolve
  22.         } else {
  23.             reject("Error: " + randomNum); // 失败时调用 reject
  24.         }
  25.     }, 1000); // 模拟异步操作
  26. });
  28. promise.then(function(result) {
  29.     console.log("Promise resolved:", result); // 成功时执行的回调函数
  30. }).catch(function(error) {
  31.     console.error("Promise rejected:", error); // 失败时执行的回调函数
  32. });

2).finally()

方法在 Promise 执行结束后，无论 Promise 是成功还是失败，都会执行指定的回调函数。它与 

  1. then()

和 

  1. catch()

不同的是，

  1. finally()

不接收参数，而是始终执行。通常用于清理工作，例如关闭文件、释放资源等。

  1. .finally(
  2.     function () {
  3.         console.log("最后执行。。。。")
  4.     }
  5. )

3).race()

  1. race()

方法同样接收一个包含多个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。判断哪个任务执行的效率最高，用时最短，就执行那个任务。

  1. let pro1 = new Promise(function (resolve, reject) {
  2.     setTimeout(() => {
  3.         resolve("1000")
  4.     }, 1000);
  5. })
  6. let pro2 = new Promise(function (resolve, reject) {
  7.     setTimeout(() => {
  8.         resolve("500")
  9.     }, 500);
  10. })
  11. let pro3 = new Promise(function (resolve, reject) {
  12.     setTimeout(() => {
  13.         resolve("300")
  14.     }, 300);
  15. })
  17. // 2）执行效率较高的任务
  18. // 判断哪个任务执行的效率最高，用时最短，就执行那个任务
  19. Promise.race([pro1, pro2, pro3])
  20.     .then(
  21.         function (data) {
  22.             console.log(data);
  23.         }
  24.     )

4).all()

该方法接收一个包含多个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。该 Promise 对象在数组中所有 Promise 对象都成功完成时才会被成功解析，否则会被拒绝。

  1. // 定义3个promise
  2. let pro1 = new Promise(function (resolve, reject) {
  3.     setTimeout(() => {
  4.         resolve("1000")
  5.     }, 1000);
  6. })
  7. let pro2 = new Promise(function (resolve, reject) {
  8.     setTimeout(() => {
  9.         resolve("500")
  10.     }, 500);
  11. })
  12. let pro3 = new Promise(function (resolve, reject) {
  13.     setTimeout(() => {
  14.         resolve("300")
  15.     }, 300);
  16. })
  18. // 2） 执行所有任务
  19. // 同时执行三个任务 就使用all方法
  20. Promise.all([pro1, pro2, pro3])
  21.     .then(
  22.         function (arr) {
  23.             console.log(arr);
  24.         }
  25.     )

四、asyncs与await

调用async修饰的函数，可以直接返回promise对象

  1. async function getData() {
  2.     console.log("1.0 首先做什么");
  4.     // 等待延迟函数执行，才执行后续的代码
  5.     await new Promise(function (resolve, reject) {
  6.         setTimeout(() => {
  7.             console.log("2.0 在这里住一晚~~")
  8.             resolve();
  9.         }, 1000)
  10.     })
  12.     // await 后要写 promise函数的语法才有等待的作用
  13.     // await setTimeout(()=>{
  14.     //     console.log("2.0 最后执行");
  15.     // },1000)
  17.     console.log("3.0 然后做什么")
  18. }
  20. // app 就是promise对象
  21. const app = getData();
  22. // console.log(app);
  24. // app 就可以调用then方法
  25. app.then(
  26.     function () {
  27.         console.log("4.0 然后做什么")
  28.     }
  29. )
标签： 学习 es6 前端
本文转载自: https://blog.csdn.net/weixin_245249828/article/details/136917520
版权归原作者 吃清心的椰羊 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端小白的学习之路(ES6 二)”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？