ES6 新特性(详细复习笔记)--下-Toy模板网

这篇具有很好参考价值的文章主要介绍了ES6 新特性(详细复习笔记)--下。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

ES6 新特性(详细复习笔记)-下

对象相关新特性

应用实例-声明对象简写

1. 需求: 演示声明对象简写

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>声明对象的简写方式</title>
    <script type="text/javascript">
        const age = 800;
        const name = "牛魔王";
        // 传统 声明/定义对象
        let monster = {name: name, age: age};
        // ES6 声明/定义对象
        //解读
        //1. {name, age} : 表示对象的属性名是name和age
        //2. 属性name的值是从变量/常量 name来的
        let monster02 = {name, age};
        console.log("monster02=>", monster02);
    </script>
</head>
<body>

</body>
</html>

2-需求: 演示对象方法简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象方法的简写形式</title>
    <script type="text/javascript">
        // 传统-对象方法定义
        let monster = {
            name: "红孩儿",
            age: 100,
            sayHi: function () {
                console.log("信息: name=", this.name, " age=", this.age);
            }
        }
        monster.f10 = function () {
          console.log("哈哈");
        };
        monster.sayHi();
        monster.f10();
        // ES6-对象方法定义
        let monster2 = {
            name: "红孩儿~",
            age: 900,
            sayHi() {
                console.log("信息: name=", this.name, " age=", this.age);
            },
            f1() {
                console.log("f1()");
            }
        }
        monster2.sayHi();
        monster2.f1();

    </script>
</head>
<body>

</body>
</html>

3-应用实例-对象拓展运算符

需求: 演示对象拓展运算符使用

拷贝对象(深拷贝)的用法和理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象运算符的扩展</title>
    <script type="text/javascript">
        let cat = {name: "小花猫", age: 2};
        // let cat2 = cat;
        // cat2.name = "大花猫";
        // console.log("cat=>", cat);
        // console.log("cat2=>", cat2);//
        // 拷贝对象(深拷贝)
        let cat2 = {...cat};
        cat2.name = "中花猫";
        console.log("cat=>", cat);//小花猫
        console.log("cat2=>", cat2);//中花猫

        // 合并对象[深拷贝]
        let monster = {name: "白骨精", age: 100};
        let car = {brand: "奔驰", price: 800000};
        let monster_car = {...monster, ...car}
        monster_car.name = "狐狸精";
        console.log("monster=>", monster);
        console.log("monster_car=>", monster_car);

    </script>
</head>
<body>

</body>
</html>

注意事项和使用细节

对象拓展运算符是比较新的特性，低版本的浏览器不支持

火狐/谷歌浏览器没有问题

箭头函数

基本介绍

箭头函数提供更加简洁的函数书写方式。
基本语法是：(参数列表) => { 函数体 }
箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块
函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
箭头函数多用于匿名函数的定义

应用实例 1-箭头函数使用

需求: 演示箭头函数基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数的使用</title>
    <script type="text/javascript">
        // 传统定义函数
        var f1 = function (n) {
            return n * 2
        }
        console.log("传统= " + f1(2))
        // ES6 , 箭头函数使用

        let f2 = (n) => {
            return n * 2;
        }
        console.log("f2() 结果= ", f2(100));//200
        //上面的es6 函数写法，还可以简化
        let f3 = n => n * 3;
        console.log("f3() 结果=", f3(100));//300

        //函数也可以传给一个变量=> 看看java基础匿名内部类
        function hi(f4) {
            console.log(f4(900));
        }
        hi(n=> n+100);  
        hi((n) => {
            return n + 100
        });
        hi((n) => {
            return n - 100
        });


    </script>
</head>
<body>

</body>
</html>

应用实例 2-箭头函数使用

需求: 演示箭头函数使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数使用案例2</title>
    <script type="text/javascript">
        // 传统
        var f1 = function (n, m) {
            var res = 0
            for (var i = n; i <= m; i++) {
                res += i
            }
            return res
        }
        console.log("传统= " + f1(1, 10))
        // ES6 , 箭头函数使用
        let f2 = (n, m) => {
            var res = 0
            for (var i = n; i <= m; i++) {
                res += i
            }
            return res
        };
        console.log(f2(1, 10));
    </script>
</head>
<body>

</body>
</html>

应用实例 3-箭头函数+对象解构

需求: 演示箭头函数+解构使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数+对象解构</title>
    <script type="text/javascript">
        const monster = {
            name: "红孩儿",
            age: 1000,
            skill: ['红缨枪', '三位真火']
        }
        //要求：在方法形参取出monster对象的skill属性
        //传统方式

        function f1(monster) {
            console.log("skill=", monster.skill);
        }

        f1(monster);

        //箭头函数

        let f2 = ({skill}) => {
            console.log("skill=", skill);
        }
        //解读
        //1. f2 传入对象 monster
        //2. f2形参是 {skill} , 所以es6的对象解构特性, 会把monster对象的 skill属性赋给
        //   skill
        //3. 对象解构的前提就是 {skill}的skill 和 monster的 skill属性是一致
        f2(monster);

        //箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.
        let f3 = ({age, name, skill}) => {
            console.log("skill=", skill, " age=", age, " name=", name);
        }

        f3(monster);


    </script>
</head>
<body>

</body>
</html>

注意事项和使用细节

箭头函数+对象解构, 注意参数是({属性名})

({属性名}) 是由{} 包括的，属性名需要和对象属性名一致，使用到了对象解构

综合代码示例

1. 给你一个对象 let cat = {name: ‘jack’, age: 10}; 要求使用模板字符串显示 cat 的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 给你一个对象let cat = {name: 'jack', age: 10}; 要求使用模板字符串显示cat的信息
        let cat = {name: 'jack', age: 10};
        let str = `cat的信息为 name=${cat.name} age=${cat.age}`;
        console.log(str);
    </script>
</head>
<body>

</body>
</html>

2. 看下面的代码, 请问输出什么，并分析原因

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fV2DssgZ-1690291627476)(…/…/…/Typora/%E5%9B%BE%E7%89%87/db1c4a40788b472c8819241a2a74d5d7-16902915610584.png)]文章来源地址https://www.toymoban.com/news/detail-615940.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //看下面的代码, 请问输出什么， 并分析原因
        let dog = {name: "大黄", age: 3};

        //分析
        //1. 使用对象解构
        //2. namex  undefined
        //3. age 3
        let {namex, age} = dog;
        console.log("namex=", namex, " age=", age);
    </script>
</head>
<body>

</body>
</html>

3. 根据给出的数据, 用 ES6 的方式, 构建对象 person, 并提供方法(用最简洁的方式),可以输出信息.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //根据给出的数据, 用ES6的方式, 构建对象person, 并提供方法(用最简洁的方式), 可以输出信息
        const name = "周星驰";
        const job = "演员";
        let person = {
            name,
            job,
            show() {
                console.log("person信息 name=", this.name, " job=", this.job);
            }
        }
        person.show();
    </script>
</head>
<body>

</body>
</html>

4. 根据给出的数据, 用 ES6 的方式, 编写方法, 使用对象解构的方式, 得到 oper 和arr, 并根据 oper 的值 , oper 可以是+、-、*、/ 来计算结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //根据给出的数据, 用ES6的方式, 编写方法, 使用对象解构的方式, 得到 oper 和 arr, 并根据oper的值 , oper可以是+、-、*、/  来计算结果
        var cal = {
            oper: "/",
            arr: [1, 2, 3, 5]
        }

        function f1({oper, arr}) {
            let res = 0;//初始化的值，要分析考虑
            //还可以考虑arr的传入，并且做分析
            //判断arr 是不是null, 并且arr.length <=1 , 就直接返回arr[0]
            if ("+" == oper) {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res += arr[i];
                }
            } else if ("-" == oper) {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res -= arr[i];
                }
            } else if ("*" == oper) {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res *= arr[i];
                }
            } else if ("/" == oper) {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res /= arr[i];
                }
            } else {
                console.log("oper输入不正确..")
            }
            return res;
        }

        console.log("f1运算的结果=", f1(cal))
    </script>
</head>
<body>

</body>
</html>

5. 调用 f8 函数, arr 是数组, fun 传入箭头函数, 可以计算 arr 的和, 并写出调用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //调用f8 函数, arr是数组, fun传入箭头函数, 可以计算 arr的和, 并写出调用方法
        function f8(arr, fun) {
            console.log(fun(arr));//调用模板
        }

        f8([1, 2, 3, 4, 5], (arr) => {
            let res = 0;
            for (let i = 0; i < arr.length; i++) {
                res += arr[i];
            }
            return res;
        })
    </script>
</head>
<body>

</body>
</html>

到了这里，关于ES6 新特性(详细复习笔记)--下的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

ES6 新特性(详细复习笔记)--下