ES6学习

最新推荐文章于 2024-06-15 09:59:21 发布

BBsix666

最新推荐文章于 2024-06-15 09:59:21 发布

阅读量89

点赞数

文章标签： es6 学习 javascript

本文链接：https://blog.csdn.net/BBsix666/article/details/128825932

版权

添加链接描述

1、课程简介

2、初识ES6

在这里插入图片描述

3、let声明变量

暂存形死区
在这里插入图片描述

4、const声明常量

常量：不能被改变
在这里插入图片描述

5、变量解构赋值

在这里插入图片描述

交换x y 的值

b和d代表2和4

<script>
        let code = "AAAA"
        let res = {
            code: 200,
            data: {
                list: ["aaa", "bbb", "ccc"]
            }
        }
        let { data: { list: [x, y, z] }, code: co, err = "没有错误" } = res;
        console.log(x, co, err)
    </script>

在这里插入图片描述

6、模板字符串

<script>
        let name ="dada"
        let oli=`<li>
            <b>${name}</b>
            </li>`
            console.log(oli)
    </script>

<script>
        let name =["dada","xiaoli","xiaojun"]
        let newname =name.map(function(i){
            return `<li><b>${i}</b></li>`
        })
        console.log(newname)
    </script>

在这里插入图片描述
可以放入一些较复杂的表达式（三目运算符）

7、字符串与数值扩展

在这里插入图片描述

8、数组扩展

在这里插入图片描述

9、对象扩展

在这里插入图片描述

10、函数扩展

<script>
        function ajax(a,b='pig',c=false){
            console.log(a,b,c)
        }
        ajax(1,'get',true)
        ajax(2)
        ajax(3,'dog')
    </script>

11、Symbol

在这里插入图片描述

不能进行运算

12、lterator

在这里插入图片描述

<script>
        let key = {
            name: Symbol('name'),
            age: Symbol('age')
        }
        let obj1 = {
            [key.name]: 'dada',
            [key.age]: 18
        }
    </script>

在这里插入图片描述

13、set数据结构

在这里插入图片描述

可用于数组去重

14、MAP数据结构

在这里插入图片描述

15、Proxy

在这里插入图片描述
可用于响应式框架

<body>
    <div id="box"></div>
    <script>
        let obj = {}
        // 拦截
        Object.defineProperty(obj, 'data', {
            get() {
                console.log('get')
                return box.innerHTML
            },
            set(value) {
                console.log('set', value)
                box.innerHTML = value
            }
        })
        console.log(obj)
    </script>
</body>

<body>
    <div id="box"></div>
    <script>
        let obj = {}
        let proxy = new Proxy(obj, {
            get() {
                console.log('get')
            },
            set(target, key, value) {
                console.log('set', target, key, value)
                target[key] = value
            }
        })
    </script>
</body>

16、Reflect

在这里插入图片描述
和proxy联用

17、Promise对象

在这里插入图片描述
promise：回调地狱
generator：异步编程
asvnc 、await：ES8

pending （进行中）
resolved （成功）
rejected （失败）

<script>
        let a = new Promise()
        let a = new Promise(function (b, c) {
            setTimeout(() => {
                let data = '用户数据'
                b(data)
                let err = '传输失败'
                c(err)
            }, 1000)
        })
    </script>

18、Generator函数

在这里插入图片描述

19、Class语法

<script>
        function CreatObj() {
            this.name = name
        }
        CreatObj.prototype.say = function () {
            console.log("hello")
        }
        class CreatObj {
            constructor(name) {
                this.name = name
            }
            say() {
                console.log("hello")
            }
        }
        var obj = new CreatObj("dada")
        console.log(obj)
        obj.say()
    </script>

20、Class继承

在这里插入图片描述

<script>
        function Student(name, age, grade) {
            Person.call(this, name, age)
            this.grade = grade
        }
        var obj = new Student("kiki", 18, 100)
        console.log(obj)
    </script>

21、Module语法

export 导出

function A1() {
            console.log("a1")
        }
        function A2() {
            console.log("a2")
        } function A3() {
            console.log("a3")
        }

        export {
            A1,
            A2
        }

        <script type="js">
            import{A1, A2} from './文件地址 '
            <script>

                <script type="js">
                    import{A1, A2 as A_A1} from './文件地址 '
                    <script>