谷粒商城笔记二es6新特性-优快云博客

本文链接：https://blog.youkuaiyun.com/noob9527/article/details/121410700

本文详细介绍了ES6中的一些重要新特性，包括let关键字的作用域和变量声明规则、解构赋值的使用方法、函数参数的默认值及箭头函数等优化特性、map和reduce方法在数组操作中的应用、Promise在异步编程中的使用技巧等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、let的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    // var 声明的变量往往会越域，let 声明的变量有严格局部作用域
    // {
    //     var a = 1
    //     let b = 2
    // }
    // console.log("a=", a) //a= 1
    // console.log("b=", b) // ReferenceError: b is not defined

    // var 可以声明多次，let 只能声明一次
    // var a = 1
    // var a = 2
    // let b = 4
    // let b = 5 //Uncaught SyntaxError: Identifier 'b' has already been declared
    // console.log("a=", a)
    // console.log("b=", b)

    // var 会变量提升，let 不存在变量提升
    // console.log("a=", a) //a= undefined
    // var a = 1
    // console.log("b=", b) //Uncaught ReferenceError: Cannot access 'b' before initialization
    // let b = 2

    //声明必须初始化，否则会报错，声明之后不允许改变
    const c = 1
    c = 2 //1、let的使用.html:34 Uncaught TypeError: Assignment to constant variable.
</script>
<body>
    let的使用
</body>
</html>

2、解构表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    //数组解构
    let arr = [1,2,3]
    let [a,b,c] = arr
    console.log(a,b,c)

    //对象解构 
    const person = {"name": "zhangsan","age": 16}
    // const {name,age} = person
    const {name:abc,age} = person
    console.log(abc,age)

    // 字符串扩展
    let str = "helloworld"
    console.log(str.startsWith("hell"))
    console.log(str.startsWith("ell"))
    console.log(str.endsWith("ell"))
    console.log(str.endsWith("ld"))
    console.log(str.includes("ell"))

    //模板字符串
    function toStr(){
        return "函数返回值"
    }
    //使用反撇号`代替引号，模板字符串可以多行书写
    let info = `我是${abc},今年${age+10},我想说${toStr()}`
    console.log(info)
</script>
<body>
    
</body>
</html>

3、函数优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
    function add(a, b) {
        // 判断b是否为空，为空就给默认值1
        b = b || 1;
        return a + b;
    }
    // 传一个参数
    console.log(add(10));

    //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
    function add2(a, b = 1) {
        return a + b;
    }
    console.log(add2(20));

    //可变参数
    function sum(...value){
        let sum = 0
        value.forEach(element => {
            sum = sum + element
        });
        return sum
    }
    console.log(sum(1,2,3))
    console.log(sum(1,2,3,4,5,6))

    //箭头函数
    function sum2(a,b){
        return a + b
    }
    let sum3 = (a,b) => a + b
    console.log(sum3(10,30))
    let sum4 = (...value) => {
        let sum = 0
        value.forEach(element => {
            sum = sum + element
        });
        return sum
    }
    console.log(sum4(1,2,3))
    console.log(sum4(1,2,3,4,5,6))
</script>
<body>
    
</body>
</html>

4、对象优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    const person = {"name": "zhangsan","age": 16}
    console.log(Object.keys(person))
    console.log(Object.values(person))
    console.log(Object.entries(person)) //获得对象的键值对

    //Object.assign对象合并
    const source2 = {"sex":"男"}
    const source3 = {"home":"蜀山区"}
    Object.assign(person, source2, source3)
    console.log(person)

    const name = "lisi"
    const age = 20
    const person2 = {name, age}
    console.log(person2)

    //对象属性的简写
    let person3 = {
        "name": "lisi",
        eat: function(food){
            console.log(this.name + "在吃" + food)
        },
        //箭头函数this不能使用，使用对象.属性
        eat2: food => console.log(person3.name + "在吃" + food)
    }
    person3.eat("香蕉")
    person3.eat2("橘子")

    //对象拓展运算符
    //对象深拷贝
    let p1 = {name: "jack", age: 26}
    let p2 = {...p1}
    console.log(p2)
    //合并对象
    let p3 = {sex: "man"}
    let p4 = {...p1, ...p3}
    console.log(p4)
</script>
<body>
    
</body>
</html>

5、map和reduce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    //数组中新增了map和reduce方法
    //map()接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
    let arr = [3,1,-4,30]
    // arr2 = arr.map((item)=>{
    //     return item * 2
    // })
    arr2 = arr.map(item => item * 2)
    console.log(arr2)
    //reduce()为数组中每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
</script>
<body>
    
</body>
</html>

6、promise

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<script>
    //ajax层层嵌套
    $.ajax({
        url: "mock/user.json",
        success(data) {
            console.log("查询用户：", data);
            $.ajax({
                url: `mock/user_corse_${data.id}.json`,
                success(data) {
                    console.log("查询到课程：", data);
                    $.ajax({
                        url: `mock/corse_score_${data.id}.json`,
                        success(data) {
                            console.log("查询到分数：", data);
                        },
                        error(error) {
                            console.log("出现异常了：" + error);
                        }
                    });
                },
                error(error) {
                    console.log("出现异常了：" + error);
                }
            });
        },
        error(error) {
            console.log("出现异常了：" + error);
        }
    });

    //promise改造嵌套
    let p = new Promise((resolve, reject) => {
        $.ajax({
            url: `mock/user.json`,
            success(data) {
                resolve(data);
            },
            error(error) {
                reject(data);
            }
        });
    });
    p.then((obj) => {
        console.log("查询到用户：", obj);
        return new Promise((resolve, reject) => {
            $.ajax({
                url: `mock/user_corse_${obj.id}.json`,
                success(data) {
                    resolve(data)
                },
                error(error) {
                    reject(error)
                }
            });
        }).then((obj) => {
            console.log("查询到课程：", obj);
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/corse_score_${obj.id}.json`,
                    success(data) {
                        resolve(data)
                    },
                    error(error) {
                        reject(error)
                    }
                });
            }).then((obj) => {
                console.log("查询到分数：", obj);
            }).catch((err) => {
                console.log("出现异常了：" + err);
            })
        }).catch((err) => {
            console.log("出现异常了：" + err);
        })
    }).catch((err) => {
        console.log("出现异常了：" + err);
    })

    //改进版
    function get(url, data) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                date: data,
                success(result) {
                    resolve(result)
                },
                error(error) {
                    reject(error)
                }
            });
        })
    }
    get(`mock/user.json`)
        .then((data) => {
            console.log("new查询到用户：", data);
            return get(`mock/user_corse_${data.id}.json`)
        }).then((data) => {
            console.log("new查询到课程：", data);
            return get(`mock/corse_score_${data.id}.json`)
        }).then((data) => {
            console.log("new查询到分数：", data);
        }).catch((err) => {
            console.log("出现异常了：" + err);
        })
</script>

<body>

</body>

</html>

corse_score_10.json

{ "id": 100, "score": 90 }

user_corse_1.json

{ "id": 10, "name": "chinese" }

user.json

{ "id": 1, "name": "zhangsan", "password": "123456" }