ES6常用语法糖(附Babel配置使用方法)

最新推荐文章于 2022-12-14 20:39:25 发布

weixin_33885253

最新推荐文章于 2022-12-14 20:39:25 发布

阅读量163

点赞数

文章标签： javascript json ViewUI

原文链接：https://yq.aliyun.com/articles/633053

版权

获取数据: 解构赋值

解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解构赋值</title>
    <script>

        // 对象解构赋值, 符号{}
        {
            let zhao = {name : "zhaozhao", age: 10};

            // 传统获取值的方式(键为字符串格式)
            console.log("name:", zhao["name"], "age:", zhao["age"]);

            // 解构赋值的方式(会自动匹配相应的键, 如果解构了不存在的键,则值为undefined)
        
            let {age, name, hobby} = zhao;

            console.log("name:", name, "age:", age, "hobby:", hobby);
        }

        // 数组解构赋值, 符号[]
        {

            let zhao = [123, "Mac", "iPhone", 345]

            let [zhao1, zhao2, zhao3, zhao4] = zhao;

            console.log("数组解构赋值结果:", zhao1, zhao2, zhao3, zhao4);
        }



    </script>


</head>
<body>
    <div id="app"></div>
    
</body>
</html>

填充数据: 模板语法 (多行字符串)

模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6新模板语法</title>
    <script>
        window.onload = function(){

            var el = document.getElementById("app");

            {
                let age = 5;
                let name = 'YY';
                let oldHtml = "<p>"+"age = "+age;
                oldHtml = oldHtml + " name = "+name;
                oldHtml = oldHtml + "</p>";
                el.innerHTML = oldHtml;
            }

            {
                let age = 13;
                let name = "zhaozhao";
                // 新的模板语法${}需要配合``使用,并且支持换行
                let newHtml = `<p>
                    age = ${age}
                    name = ${name}
                </p>`;
                let tmpHtml = el.innerHTML;
                // 注意innerHTML的写法
                el.innerHTML = tmpHtml + newHtml;
            }
        }
    </script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

规范数据域 :let/const, 块级作用域

let只在块级作用域内有效

let不允许重复声明

let声明的变量不可重复赋值

设置默认数据: 设置函数默认参数值

设置默认参数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6常用语法: 函数默认参数</title>
    <script>
        function DiyConsoleLog(name="zhao", age=15){
            console.log("姓名:", name, "年龄:", age)
        }


        // 无参数调用
        console.log("无参数调用:")
        DiyConsoleLog()

        // 只传一个参数
        console.log("只传一个参数:")
        DiyConsoleLog("YY")

        // 传两个参数
        console.log("传两个参数(正常调用):")
        DiyConsoleLog("YY", 12)



    </script>
</head>
<body>


    
</body>
</html>

规范数据流向: 优雅的箭头函数(填坑this指向Window问题)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6之箭头函数</title>
    <script>
        
        window.onload = function(){

            // 箭头函数的用法
            {

                let NewArray = [1, 4];
                // 普通函数
                NewArray.map(function addOne(item){
                    result = item + 1
                    console.log("普通函数:",this,"==>",result)
                });

                // 箭头函数
                NewArray.map((item)=>{
                    result = item + 1
                    console.log("箭头函数",this,"==>",result)
                });


            }

            console.log("箭头函数与普通函数的区别: ")

            // 箭头函数的优势
            {
                function wrapperfn (){

                    // 普通函数
                    this.map(function addOne(item){
                        result = item + 1
                        console.log("普通函数:",this,"==>",result)
                    });

                    // 箭头函数
                    this.map((item)=>{
                        result = item + 1
                        console.log("箭头函数",this,"==>",result)
                    });

                }

                let NewArray = [12, 34];

                wrapperfn.call(NewArray);

            }

        }

    </script>

</head>
<body>
    <div id="app"></div>
    
</body>
</html>

ES6语法兼容低版本浏览器(将ES6语法装换到ES5语法):

转换示意图

使用Babel:

Babel

Babel相当于一个翻译, 可以将ES6的语法,装换为ES5的语法

Babel的安装

为了方便安装以及后续的管理, 我们使用npm管理工具, 安装babel

新建一个目录, babel-test
npm init, 一路回车, 会在babel-text生成配置文件package.json
安装Babel相关的包

安装es2015转码规则

npm install --save-dev babel-preset-es2015
`

安装react转码规则

npm install --save-dev babel-preset-react

安装es7提案转码规则

npm install --save-dev babel-preset-stage-3

Babel的配置

在babel-test下新建配置文件`.babelrc`, 将刚刚安装的三个规则配置到`.babelrc`, 保存文件

{
    "presets": [
        "es2015", 
        "react", 
        "stage-3"
        ],
    "plugins":[]
}

Babel的使用

为了便于项目管理,我们把babel的工具babel-cli之间安装到babel-test内

npm install --save-dev babel-cli

在package.json 中配置运行命令build(命令作用为: 把根目录下的js文件夹内所有es6语法的js文件, 在保持原文件名的基础上, 转码输出到lib文件夹)

"build": "babel js -d lib"

build转码

在根目录下新建js文件夹, 并新建两个es6语法的js文件, 使用npm run build转换, 查看结果

转换

weixin_33885253

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6常用语法糖(附Babel配置使用方法)

获取数据: 解构赋值解构赋值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>解构赋值</title> ...
复制链接

扫一扫