ES6高级

字符串在ES6新增的方法

includes()，判断字符串中，是否包含指定的字符串，第一个参数表示指定的字符串，第二个参数表示从什么位置开始（默认为0）

const str = "hello world !!!";
console.log(str.includes("h"));//true
console.log(str.includes("world"));//true
console.log(str.includes("???"));//false
console.log(str.includes("h", 1));//false

　　2. padStart()，补全字符串长度，从头部补充（一般用于前补0）

const str = "hello world";
const str2 = str.padStart(15, "!");
console.log(str2);
//!!!!hello world
const str3 = str.padStart(15, "->");
console.log(str3);
//->->hello world

如果不写第二个参数，默认补充空格

需要填充的位数少，但是填充的字符串多
const str1 = "abcdefg".padStart(10, "0123456789");
console.log(str1);
//012abcdefg

需要填充的位数是奇数，但填充的字符串是偶数
const str1 = "abcdefg".padStart(10, "->");
console.log(str1);
//->-abcdefg

　　3.padEnd()，补全字符串，从尾部补充（标准与padStart()一致）

　　4. trimStart()，trimLeft()：去除左侧的空格

　　　trimEnd()，trimRight()：去除右侧的空格

　　　trim()，去除两侧的空格

　　　一般用于判断用户名和密码

const str1 = "  a b c  ";

console.log("🎉" + str1.trimStart() + "🎉");//🎉a b c  🎉
console.log("🎉" + str1.trimEnd() + "🎉");//🎉  a b c🎉
console.log("🎉" + str1.trim() + "🎉");//🎉a b c🎉

数组在ES6中新增的方法

includes()，判断数组中是否拥有某个元素，全等判断（NaN可以全等NaN），第二个参数表示搜索开始的位置，默认为0

数组去重的另一种方法
const arr = [1, 2, 3, 3, 2, 1];
const arr2 = [];

for (const iterator of arr) {
    // 判断arr2中是否存在iterator, 如果不存在, 就添加到arr2中
    if (!arr2.includes(iterator)) {
        arr2.push(iterator);
    }
}
console.log(arr2);//[1,2,3]

　　2. map()，返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

const arr = [1, 2, 3];
const arr1 = arr.map(function (value) {
    return value ** 2;
});

console.log(arr1);

　　3. from()，将其他类型转成数组（支持转换的数据类型: Array, String, Set, Map, Nodelist, arguments, 拥有 lenght 属性的任意对象）

const str = "hello";
const arr = Array.from(str);

console.log(arr);//[ 'h', 'e', 'l', 'l', 'o' ]

Object类型

const obj = {
length: 3,
0: "one",
1: "two",
2: "three",
}；

console.log(Array.from(obj));//[ 'one', 'two', 'three' ]

 支持第二个参数，相当于array的map方法

const obj = {
length: 3,
0: "one",
1: "two",
2: "three",
};

console.log(
Array.from(obj, function (value) {
return value + "!!!";
})
);//[ 'one!!!', 'two!!!', 'three!!!' ]

　　4. find()，返回第一个符合条件的元素 findIndex()，返回第一个符合条件的元素的索引

const arr = [
    { username: "lilei", sex: "male" },
    { username: "zhangsan", sex: "male" },
    { username: "lily", sex: "female" },
    { username: "lucy", sex: "female" },
];

// 找到第一个sex为female的对象, 就是第一个出现的女生
console.log(
    arr.find(function (value) {
        return value.sex === "female";
    })
);//{ username: 'lily', sex: 'female' }

对象在ES6新增的方法

Object.assign()，合并对象，有同名函数后面的覆盖前面的（与{..obj1,...obj2}的区别是，Object.assign(obj1,obj2)是把obj2合并到obj1）

const obj1 = { username: "lilei", sex: "male", height: 186 };
const obj2 = { username: "zhangsan", sex: "female" };
Object.assign(obj1, obj2);
console.log(obj1);//{ username: 'zhangsan', sex: 'female', height: 186 }

生成新的对象
const obj1 = { username: "lilei", sex: "male", height: 186 };
const obj2 = { username: "zhangsan", sex: "female" };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj1);
console.log(obj2);
console.log(obj3);

Object(目标对象,原对象), 原对象(第二个参数)如果类型不是对象, 会先转成对象再合并
console.log(Object.assign({}, undefined));//{}
console.log(Object.assign({}, 1));//{}
console.log(Object.assign({}, "str"));//{ '0': 's', '1': 't', '2': 'r' }

　　2. object.keys()：获取对象所有的键名数组

　　　object.values()：获取对象所有的键值数组

　　　objexct.entries()：获取对象所有的键值对组成的二维数组

const obj = { username: "lilei", sex: "male" };

console.log(Object.keys(obj));//[ 'username', 'sex' ]
console.log(Object.values(obj));//[ 'lilei', 'male' ]
console.log(Object.entries(obj));//[ [ 'username', 'lilei' ], [ 'sex', 'male' ] ]

回调地狱（回调嵌套过多），使用promise把嵌套关系变成并列关系
promise

实例化构造函数生成实例对象
const p = new Promise(() => {});
console.log(p);//Promise { <pending> }

promise的状态（pending 待处理状态，fulfilled 满足, 成功状态，rejected 拒绝, 失败状态）

<script>
    const p = new Promise((resolve, reject) => {
        resolve();
        reject();
    });
    console.log(p);
</script>

promise的状态一旦变换，不会再改变

promise方法

then()

p.then(成功时执行的函数, 失败时执行的函数);
参数会传递给then方法
resolve的参数传给第一个函数作为参数
reject的参数传给第二哥函数作为参数
<script>
    const p = new Promise((resolve, reject) => {
        // resolve("haha");
        reject("kuku");
    });
    // p 是一个 Promise 对象, 状态是 resolved, 成功状态
    p.then(
        function (aaa) {
            console.log("成功状态, 走这里!!!" + aaa);
        },
        function (aaa) {
            console.log("失败状态, 走这里!!!" + aaa);
        }
    );
</script>

then()执行后的返回值是一个新的promise对象

所以then()可以连写，如果不写返回值，则默认成功

<script>
    const p = new Promise((resolve, reject) => {
        // resolve("张三");
        reject("汤姆");
    });
    p.then(
        (name) => {
            console.log(name + "成功");
            return "李四";
            // return new Promise((resolve, reject) => {
            //     resolve("李四");
            // });
        },
        (englishName) => {
            console.log(englishName + "失败");
            // return new Promise((resolve, reject) => {
            //     reject("迈克尔");
            // });
            return "迈克尔";
        }
    ).then(
        (name) => {
            console.log(name + "又又又成功");
        },
        (englishName) => {
            console.log(englishName + "再再再失败");
        }
    );
</script>
//汤姆失败，迈克尔又又又成功

　　2. catch()，是then()的一个特例，then处理成功，catch处理失败

const p = new Promise((resolve, reject) => {
resolve();
// reject();
});

//成功
p.then(() => {
console.log("hello");
});

//失败
p.catch(() => {
console.log("fuck");
});

　　3. finally()，promise完成时执行，不管结果是怎样

<script>
  new Promise((resolve, reject) => {
    // resolve("张三");
    reject("汤姆");
  })
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {
      console.log("finally, 无论成功还是失败, 都会走这里");
    });
</script>

　　4. promise.all()，相当于and的关系

关注多个 promise 对象的状态变化

传入多个 promise 实例, 包装成一个新的 promise 实例返回

Promise.all() 的状态变化与所有传入的 Promise 实例对象状态有关

所有状态都变成 resolved，最终的状态才会变成 resolved

只要有一个变成 rejected，最终的状态就变成 rejected

<script>
    // 创建 promise 对象
    const makePromise = (msNumber) => {
        return new Promise((resolve) => {
            setTimeout(resolve, msNumber);
        });
    };
    const p1 = makePromise(1000).then(() => {
        console.log("p1 搞定");
        return "p1 done";
    });
    const p2 = makePromise(2000).then(() => {
        console.log("p2 搞定");
        return "p2 done";
    });

    const p = Promise.all([p1, p2]);
    // 可以判断p的状态
    p.then(
        (data) => {
            console.log("data.....");
            console.log(data); // ["p1 done", "p2 done"]
        },
        (error) => {
            console.log("error.....");
            console.log(error);
        }
    );
</script>

　　5. promise.race()

关注多个 promise 对象的状态变化

传入多个 promise 实例, 包装成一个新的 promise 实例返回

Promise.race() 的状态取决于第一个完成的 Promise 实例对象，

如果第一个完成的成功了，那最终的就成功；

如果第一个完成的失败了，那最终的就失败

　　6. promise.allSettled()

关注多个 promise 对象的状态变化

传入多个 promise 实例, 包装成一个新的 promise 实例返回

Promise.allSettled() 的状态与传入的 Promise 状态无关

永远都是成功的

它只会忠实的记录下各个 Promise 的表现

　　7. Promise.resolve()：成功态promise的简写

new Promise((resolve, reject) => {
    resolve("demo");
});

简写：
Promise.resolve("demo");

也可以放一些参数
Promise.resolve("hello").then((data) => {
  console.log(data+"!!!!!!!!!!!!!!!");
});

　　8. Promise.reject()：失败态promise的简写

new Promise((resolve, reject) => {
    reject("reason");
});
简写
Promise.reject("reason");

Promise.reject()的参数, 不管什么参数, 都会原封不动的向后传递, then 方法抓取不到, 只有 catch 方法可以抓取到, 也就是说, 这个参数是传给 catch 的

async和await的用法

async(异步) 是一个修饰符，被它定义的函数会默认的返回一个 Promise 的 resolve 的值。

因此对 async 函数可以直接进行 then 操作，返回的值即为 then() 方法的传入参数。

async function demo() {
    console.log("a");
    return "hello world";
  }

  demo().then((res) => {
    console.log(res + "!!!!!!!!!!!!");
  });
//hello world!!!!!!!!!!!!

await 同 async 一样，作为修饰符，但是它只能放在 async 内部使用。

它是获取 Promise 中返回的内容，即这个 Promise 函数中 resolve 或者 reject 的值。

所以，async 用于声明一个异步的函数，而 await 用于等待一个异步函数执行完成

等待三个数据结果返回，计算他们的和
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num);
        }, 2000);
    });
}
async function testResult() {
    let first = await doubleAfter2seconds(1);
    let second = await doubleAfter2seconds(2);
    let third = await doubleAfter2seconds(3);
    console.log(first + second + third);
}
testResult();
//6秒后输出12

posted @ 2023-12-08 19:04 波波波维奇～阅读(19) 评论(0) 收藏举报

刷新页面返回顶部

geol4

ES6高级

公告