备案控制台
开发者社区 云计算 文章 正文

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

2023-08-08 28
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ES6 新特性(详细复习笔记)--下

对象相关新特性

应用实例-声明对象简写

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

  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-应用实例-对象拓展运算符

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

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

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

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

  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-箭头函数+对象解构

  1. 需求: 演示箭头函数+解构使用
<!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)]

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


尘觉
目录
相关文章
前端技术栈
|
6天前
|
存储 前端开发 JavaScript
前端面试题整理 （ES6篇）
前端面试题整理 （ES6篇）
前端技术栈
44 1
前端技术栈
|
6天前
|
前端开发 JavaScript 网络架构
【面试题】 ES6知识点详细解析（一）
【面试题】 ES6知识点详细解析（一）
前端技术栈
224 0
前端技术栈
|
6天前
|
存储 JavaScript 前端开发
【面试题】 ES6知识点详细解析（二）
【面试题】 ES6知识点详细解析（二）
前端技术栈
33 0
尘觉
|
6天前
|
JavaScript 前端开发
ES6 新特性(详细复习笔记)--下
ES6 新特性(详细复习笔记)--下
尘觉
25 0
Maynor
|
6天前
|
前端开发 API
[前端学习]ES6进阶学习
[前端学习]ES6进阶学习
Maynor
29 1
贰零壹玖.
|
6天前
|
前端开发 JavaScript
前端知识（十五）——es6 相关面试总结
前端知识（十五）——es6 相关面试总结
贰零壹玖.
37 0
pandaconda
|
11月前
|
存储 Java 编译器
【C++知识点】C++11 常用新特性总结（二）
【C++知识点】C++11 常用新特性总结（二）
pandaconda
90 0
pandaconda
|
11月前
|
存储 安全 C++
【C++知识点】C++17 常用新特性总结（二）
【C++知识点】C++17 常用新特性总结（二）
pandaconda
84 0
pandaconda
|
11月前
|
存储 编译器 C++
【C++知识点】C++11 常用新特性总结（一）
【C++知识点】C++11 常用新特性总结（一）
pandaconda
133 0
pandaconda
|
11月前
|
XML 存储 JSON
【C++知识点】C++17 常用新特性总结（一）
【C++知识点】C++17 常用新特性总结（一）
pandaconda
318 0