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

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)。回调函数应该返回一个布尔值，用于指示是否保留当前元素。

javascript 复制代码

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一样接受一个含有三个参数的回调函数。

javascript 复制代码

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)。

javascript 复制代码

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。

javascript 复制代码

// 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

javascript 复制代码

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

1).str.startsWith('str2')

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

javascript 复制代码

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

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

2).str.endWith('str2')

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

javascript 复制代码

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

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

3). str.includes("str2")

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

javascript 复制代码

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

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

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

3.对象API

1).delete

删除对象中的属性

javascript 复制代码

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

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

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

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

javascript 复制代码

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

3).Set对象

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

javascript 复制代码

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 对象中值的数量。

javascript 复制代码

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 管理键值对操作对象相关的功能

javascript 复制代码

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对象管理键值对,方便添加数据,获取数据,删除数据
// 而且这种集合的键可以任意数据类型

二、拓展运算符

... ：拓展运算符

javascript 复制代码

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

1) 展开集合

javascript 复制代码

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

2) 复制

javascript 复制代码

let newArr = [...arr];

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

3) 处理剩余参数

javascript 复制代码

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是一个对象或者说是构造函数

javascript 复制代码

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

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

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

2.基本使用

javascript 复制代码

// 读取文档
        // 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()，它接收两个参数：一个是处理成功情况的回调函数，另一个是处理失败情况的回调函数。这些回调函数会在异步操作完成后被调用。

javascript 复制代码

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() 不接收参数，而是始终执行。通常用于清理工作，例如关闭文件、释放资源等。

javascript 复制代码

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

3).race()

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

javascript 复制代码

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 对象都成功完成时才会被成功解析，否则会被拒绝。

javascript 复制代码

// 定义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对象

javascript 复制代码

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 然后做什么")
    }
)

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

一、新增API

1.数组API

1)循环forEach

2)过滤filter

3)映射(一 一对应)map

4)数学运算reduce

5)测试every

2.字符串API

1).str.startsWith('str2')

2).str.endWith('str2')

3). str.includes("str2")

3.对象API

1).delete

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

3).Set对象

4).Map对象

二、拓展运算符

1) 展开集合

2) 复制

3) 处理剩余参数

三、Promise

1.概念

2.基本使用

3.相关方法

1).then()

2).finally()

3).race()

4).all()

四、asyncs与await

3)映射(一一对应)map