前端开发工程师——ES6

下载babel

复制代码
npm install --save-dev @babel/core

函数扩展

javascript 复制代码
<script>
        // // 新的函数方法,可以直接传参,没有传入新参时,显示原来的,传入新参时,显示新参数
        // function fn(x = 0,z="缺省值"){
        //     console.log(x)
        //     console.log(z)
        // }
        // fn(100,"哈哈")

        // function fn2(){
        //     console.log(arguments);
        // }
        // fn2(1,2,3,4)

        // 出现arguments类,可以写出下面这样
        function fn2(...values){
            for(let v of values){
                console.log(v);
            }
        }
        fn2(1,2,3,4)
    </script>

箭头函数

html 复制代码
<!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>
        // 箭头函数
        var fn5 = function(name,age){
            if (name == 'ivy'){
                return '主人'
            }else{
                return '客人'
            }
        }
        // 改写为箭头函数
        // 箭头前面表示的是需要传入的参数,后面表示需要做的操作
        var fn5 = (name,age) => {
            if (name == 'ivy'){
                return '主人'
            }else{
                return '客人'
            }
        }

        // 匿名函数
        console.log(fn5('ivy',20))

        var arr = [1,2,3,4]
        arr.map(function(element,index){
            console.log(element)
        })
        
        // 改写
        arr.map((element,index) => {
            console.log(element);
        })


    </script>
</body>
</html>

promise对象

javascript 复制代码
<script>
        // 写法一
        const promise = new Promise((resolve,reject) => {
            if("成功"){
                resolve(data)
            }else{
                reject(error)
            }
        })

        // 写法二
        promise.then(data => {
            return console.log('成功')
        })
        .catch(error => {
            console.log("失败")
        })
    </script>

网络请求promise

html 复制代码
<!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>
        function getJSON(url){
            const promise = new Promise((resolve,reject) => {
                // 网络请求
                const handler = function(){
                    if(this.readyState != 4){
                        return
                    }
                    if (this.status == 200){
                        resolve(this.response);
                    }else{
                        reject(new Error("资源错误"));
                    }
                }
                const client = new XMLHttpRequest();
                client.open("GET",url);
                client.onreadystatechange = handler;
                client.responseType = 'json';
                client.setRequestHeader("Accept","application/json");
                client.send();
            });
            return promise;
        
        }
        getJSON("baidu.com")
        .then(res => {
            console.log(res);
        })
        .catch(error => {
            console.log(error)
        })
    </script>
</body>
</html>
相关推荐
@小红花15 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵17 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲32 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年35 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒42 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html