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

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

一、新增API

1.数组API

1)循环forEach

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

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

let students = ["张三","李四","赵五","陈六"]

// 1） 循环
students.forEach(function(item,index,arr){
       //item:当前处理的数据
       //index:当前处理数据的下标
       //arr:当前处理的数组
      console.log(item,index,arr)
})

注意：

forEach

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

for

或

while

循环中的

break

语句），也无法使用

return

来返回值

2)过滤filter

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

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

filter

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

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

console.log(evenNumbers); // 输出 [2, 4, 6, 8, 10]

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

3)映射(一 一对应)map

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

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

var numbers = [1, 2, 3, 4, 5];

var squares = numbers.map(function(number) {
    return number * number;
});

console.log(squares); // 输出 [1, 4, 9, 16, 25]

注意的是，

map

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

4)数学运算reduce

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

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

reduce

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

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

5)测试every

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

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

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

2.字符串API

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

1).str.startsWith('str2')

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

console.log(str.startsWith("https"));// true

console.log(str.startsWith("file"));// false

2).str.endWith('str2')

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

console.log(str.endsWith(".jpg"));// true

console.log(str.endsWith(".png"));// false

3). str.includes("str2")

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

console.log(str.includes("static"));// true

console.log(str.includes(".com"));// true

console.log(str.includes(".net"));// false

3.对象API

1).delete

删除对象中的属性

let a = 100;
let b = 200;
let point = { a, b };

// 删除对象 a 属性
delete point.a;
console.log(point);// {b: 200}

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

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

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

3).Set对象

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

let arrColor = ['red', 'red', 'red', 'green', 'blue', 'blue', 'blue', 'yellow', 'pink']
console.log(arrColor)

let setObj = new Set(arrColor);
console.log(setObj);// 使用这个对象管理数据

// Set 集合中的数据是唯一的
//Set 对象的特点包括：
//唯一性：Set 中的值是唯一的，即相同的值在 Set 中只会出现一次。
//无序性：Set 中的值是无序的，即值的插入顺序不会影响集合中的排序。
//迭代顺序：Set 对象中的值按照插入顺序进行迭代
let newArrColor = [...setObj];
console.log(newArrColor);//['red', 'green', 'blue', 'yellow', 'pink']

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

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

let set = new Set();

set.add(1);
set.add(2);
set.add(3);
set.add(1); // 重复添加相同的值，但不会被重复存储

console.log(set.size); // 输出 3

console.log(set.has(2)); // 输出 true

set.delete(2);
console.log(set.has(2)); // 输出 false

set.clear();
console.log(set.size); // 输出 0

4).Map对象

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

let mapObj = new Map()

// 添加数据
mapObj.set("width", "100px");
mapObj.set("color", "red");

// 获取数据
let w = mapObj.get("width");
console.log(w);// 100px

// 删除color属性
mapObj.delete("color");

// 布尔值
let isShow = true;
mapObj.set(isShow, 1000);

let num = mapObj.get(isShow);

console.log(num);//1000

console.log(mapObj);//Map(2) {'width' => '100px', true => 1000}

// 采用map对象管理键值对,方便添加数据,获取数据,删除数据
// 而且这种集合的键可以任意数据类型

二、拓展运算符

... ：拓展运算符

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

1) 展开集合

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

2) 复制

let newArr = [...arr];

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

3) 处理剩余参数

function foo(a, b, ...rest) {

    console.log(a);// 'red'

    console.log(b);// 'green'

    console.log(rest);//  ['blue', 'yellow', 'pink']

}

foo(...arr)

三、Promise

1.概念

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

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

但是它们是基于promise的),

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

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

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

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

2.基本使用

// 读取文档
        // let msg = "";
        // 以下代码的这种写法 叫做 "回调地狱"现象（就是不断嵌套回调函数的现象）
        // $.ajax({
        //     url: "api/a.json",
        //     type: "get",
        //     success(content){
        //         // console.log(content)
        //         msg += content.message;
        //         $.ajax({
        //             url: "api/b.json",
        //             type: "get",
        //             success(result){
        //                 console.log(result);
        //                 msg += " " +result.message;
        //                 $.ajax({
        //                     url: "api/c.json",
        //                     type: "get",
        //                     success(result){
        //                         console.log(result);
        //                         msg += " " +result.message;
        //                         console.log(msg);
        //                     }
        //                 })
        //             }
        //         })
        //     }
        // })

        // 结合Promise修改成这个样子：
        const getData = (api_url) => {
            // 返回一个Promise实例对象
            return new Promise(function (resolve, reject) {
                $.ajax({
                    url: api_url,
                    type: "get",
                    success(content) {
                        // 符合条件 （接受）
                        resolve(content);
                    },
                    error(err) {
                        // 不符合条件（拒绝）
                        reject(err);
                    }
                })
            })
        }
        // 定义字符串
        let str = '';
        let p1 = getData("api/a.json");
        console.log(p1);// Promise实例
        p1.then(
            function (content) {// 请求成功
                console.log("1.0", content);
                str += content.message;
                // 返回Promise实例
                return getData("api/b.json");
            },
            function (err) {// 请求失败
                console.log("请求失败");
            }
        )
        .then(
            function (content) {// 请求成功
                console.log("2.0", content);
                str += " " + content.message;
                // 返回Promise实例
                return getData("api/c.json")
            }
        )
        .then(
            function (content) {
                console.log("3.0", content);
                str += " " + content.message;
                console.log(str);
            }
        )

3.相关方法

1).then()

对象的主要方法是

then()

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

let promise = new Promise(function(resolve, reject) {
    // 异步操作
    if (/* 异步操作成功 */) {
        resolve(result); // 成功时调用 resolve
    } else {
        reject(error); // 失败时调用 reject
    }
});

promise.then(function(result) {
    // 成功处理逻辑
}).catch(function(error) {
    // 失败处理逻辑
});

//例子
let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        let randomNum = Math.random();
        if (randomNum < 0.5) {
            resolve("Success: " + randomNum); // 成功时调用 resolve
        } else {
            reject("Error: " + randomNum); // 失败时调用 reject
        }
    }, 1000); // 模拟异步操作
});

promise.then(function(result) {
    console.log("Promise resolved:", result); // 成功时执行的回调函数
}).catch(function(error) {
    console.error("Promise rejected:", error); // 失败时执行的回调函数
});

2).finally()

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

then()

和

catch()

不同的是，

finally()

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

.finally(
    function () {
        console.log("最后执行。。。。")
    }
)

3).race()

race()

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

let pro1 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve("1000")
    }, 1000);
})
let pro2 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve("500")
    }, 500);
})
let pro3 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve("300")
    }, 300);
})

// 2）执行效率较高的任务
// 判断哪个任务执行的效率最高，用时最短，就执行那个任务
Promise.race([pro1, pro2, pro3])
    .then(
        function (data) {
            console.log(data);
        }
    )

4).all()

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

// 定义3个promise
let pro1 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve("1000")
    }, 1000);
})
let pro2 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve("500")
    }, 500);
})
let pro3 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve("300")
    }, 300);
})

// 2） 执行所有任务
// 同时执行三个任务 就使用all方法
Promise.all([pro1, pro2, pro3])
    .then(
        function (arr) {
            console.log(arr);
        }
    )

四、asyncs与await

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

async function getData() {
    console.log("1.0 首先做什么");

    // 等待延迟函数执行，才执行后续的代码
    await new Promise(function (resolve, reject) {
        setTimeout(() => {
            console.log("2.0 在这里住一晚~~")
            resolve();
        }, 1000)
    })

    // await 后要写 promise函数的语法才有等待的作用
    // await setTimeout(()=>{
    //     console.log("2.0 最后执行");
    // },1000)

    console.log("3.0 然后做什么")
}

// app 就是promise对象
const app = getData();
// console.log(app);

// app 就可以调用then方法
app.then(
    function () {
        console.log("4.0 然后做什么")
    }
)