前端开发工程师——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>
相关推荐
gplitems1232 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木3 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350234 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:4 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛5 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼5 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔6 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗6 小时前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗6 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥6 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js