前端开发工程师——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>
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架