Es6

最新推荐文章于 2025-04-04 11:46:06 发布

sh2001824

最新推荐文章于 2025-04-04 11:46:06 发布

阅读量262

点赞数

文章标签： es6 前端 ecmascript

本文链接：https://blog.youkuaiyun.com/sh2001824/article/details/126677545

版权

一、Set中的迭代函数

keys()：获取键
values()：获取值
entries()：获取键值对
for....of....和forEach用来遍历

代码：

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

<body>
    <script>
        let scor = [90, 50, 60, 80, 40, 20]
        let s = new Set(scor)
            // console.log(s.keys())
        for (const k of s.keys()) {
            console.log(k)
        }
        console.log("----------------------------------")
        for (const v of s.values()) {
            console.log(v)
        }
        console.log("----------------------------------")

        for (const e of s.entries()) {
            console.log(e)
        }
        console.log("----------------------------------")
        s.forEach((value, key) => {
            console.log(key + ":" + value)
        })
    </script>
</body>

</html>

效果：

二、Map

创建： let tels = new Map()

使用set(key,value)添加元素
获取Map中的键值对中的值，使用get(key)，根据键获取值
clear():清空
删除delete()
for....of.... 遍历

以上代码

  let tels = new Map()
            // 使用set(key,value)添加元素
        tels.set("王入力", "110250150")
        tels.set("张三", "88855505882")
        tels.set("李四", "15168524786")
            // 获取Map中的键值对中的值，使用get(key)，根据键获取值
        console.log(tels.get("王入力"))
        console.log(tels)

        // 删除delete()
        console.log(tels.delete("张三"))
        console.log(tels)
        console.log("--------------遍历-----------------")
        for (const t of tels) {
            console.log(t[0], t[1])
        }
//清空
    tels.clear()

效果：

Set,Map,Array之间的转换

使用Array.from(map1)

 const map1 = new Map()
        map1.set("k1", 1)
        map1.set("k2", 2)
        map1.set("k3", 3)
        map1.set("k4", 4)
        console.log(Array.from(map1))

使用toLocaleString()转换为字符串

        const map1 = new Map()
        map1.set("k1", 1)
        map1.set("k2", 2)
        map1.set("k3", 3)
        map1.set("k4", 4)
        console.log(Array.from(map1).toLocaleString())

效果

keys(),values(),foreach()

获取键、值和遍历

   console.log(tels.keys())
        console.log(tels.values())
        tels.forEach((value, key) => {
            console.log(key + ":" + value)
        });

三、class类

class：声明类
constructor：定义构造函数初始化
extends：继承父类
super：调用父级构造方法
static：定义静态方法和属性

语法: class 类名(首字母大写){}

类：它是一个宏观上的概念，而对象就是类的具体实现

案例创建一个简单的类：

 class Person {
            //构造函数实现初始化
            constructor(name, sex, age) {
                    this.name = name
                    this.sex = sex
                    this.age = age
                }
                // 行为:用方法（函数）来实现
            work() {
                console.log("工作")
            }
            eat() {
                console.log("吃饭")
            }
            sayHello() {
                    console.log(`我叫${this.name}，我是一名开朗的${this.sex}生，我今年${this.age}岁了`)
                }
                // 有返回值的
            getName() {
                    return this.name
                }
                // 传参的
            cal(n, m) {
                return n + m
            }
        }
  let p0 = new Person("张三", "男", 30)
        p0.work()
        p0.eat()
        p0.sayHello()
        console.log(p0.getName())
        console.log(p0.cal(1, 2))

效果：

继承：

父类：Person，继承：extends
当子类继承了父类，那么子类就可以访问父类中的属性，函数
实例化对象的时候，构造函数中的参数的个数一定要完整
必须调用一样super()函数

列：（继承第一个）

   class Student extends Person {
            constructor(name, sex, age, stuid) {
                super(name, sex, age) //必须调用一样super()函数
                this.name = name
             
            }
        }
        let stu = new Student("张三", "女", 50, "1001")
        stu.sayHello()
        stu.eat()

效果：

当父类和子类中有相同名称函数时，调用的是子类中的函数，这就相当于子类将父类中的同名函数进行了重写

super.sayHello() //可以调用父类中的函数

static:静态的

使用static来修饰的函数只能通过类名进行访问，不能通过对象访问

整体代码

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

<body>
    <script>
        // 创建一个人类
        /*
        语法
        class 类名(首字母大写){

        }
        类：它是一个宏观上的概念，而对象就是类的具体实现
        */
        class Person {
            //构造函数实现初始化
            constructor(name, sex, age) {
                    this.name = name
                    this.sex = sex
                    this.age = age
                }
                // 行为:用方法（函数）来实现
            work() {
                console.log("工作")
            }
            eat() {
                console.log("吃饭")
            }
            sayHello() {
                    console.log(`我叫${this.name}，我是一名开朗的${this.sex}生，我今年${this.age}岁了`)
                }
                // 有返回值的
            getName() {
                    return this.name
                }
                // 传参的
            cal(n, m) {
                return n + m
            }

            // static:静态的
            // 使用static来修饰的函数只能通过类名进行访问，不能通过对象访问
            static fun() {
                console.log("静态的")
            }
        }
        // let p0 = new Person("张三", "男", 30)
        // p0.work()
        // p0.eat()
        // p0.sayHello()
        // console.log(p0.getName())
        // console.log(p0.cal(1, 2))

        // 继承
        // 父类：Person，继承：extends
        // Student被称为子类
        // 当子类继承了父类，那么子类就可以访问父类中的属性，函数
        // 实例化对象的时候，构造函数中的参数的个数一定要完整
        class Student extends Person {
            constructor(name, sex, age, stuid) {
                    super(name, sex, age) //必须调用一样super()函数
                    this.name = name
                }
                // 当父类和子类中有相同名称函数时，调用的是子类中的函数，这就相当于子类将父类中的同名函数进行了重写
            sayHello() {
                    // console.log(`我叫${this.name}，我是一名开朗的${this.sex}生`)
                    super.sayHello() //可以调用父类中的函数
                }
                // 多态
                // sayHello(n) {
                //     console.log(`我叫${this.name}，我是一名开朗的${this.sex}生,${n}`)
                // }
        }
        let stu = new Student("张三", "女", 50, "1001")
        stu.sayHello()
        stu.eat()
        Student.fun()
    </script>
</body>

</html>

效果：