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

文章目录

  • ES6 新特性(详细复习笔记)-下
    • 对象相关新特性
      • 1. 需求: 演示声明对象简写
      • 2-需求: 演示对象方法简写
      • 3-应用实例-对象拓展运算符
    • 注意事项和使用细节
    • 箭头函数
      • 基本介绍
      • 应用实例 1-箭头函数使用
      • 应用实例 2-箭头函数使用
      • 应用实例 3-箭头函数+对象解构
    • 注意事项和使用细节
    • 综合代码示例
      • 1. 给你一个对象 let cat = {name: 'jack', age: 10}; 要求使用模板字符串显示 cat 的信息
      • 2. 看下面的代码, 请问输出什么, 并分析原因
      • 3. 根据给出的数据, 用 ES6 的方式, 构建对象 person, 并提供方法(用最简洁的方式),可以输出信息.
      • 4. 根据给出的数据, 用 ES6 的方式, 编写方法, 使用对象解构的方式, 得到 oper 和arr, 并根据 oper 的值 , oper 可以是+、-、*、/ 来计算结果
      • 5. 调用 f8 函数, arr 是数组, fun 传入箭头函数, 可以计算 arr 的和, 并写出调用方法

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>箭头函数使用案例2title>
    <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>Titletitle>
    <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>Titletitle>
    <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>Titletitle>
    <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>Titletitle>
    <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>Titletitle>
    <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>

你可能感兴趣的:(javaWEB,es6,笔记,javascript)