首页 > 建站教程 > JS、jQ、TS >  ES6常用语法糖正文

ES6常用语法糖

一、获取数据: 解构赋值
ES6为一些已有的功能提供了非破坏性更新，这类更新中的大部分我们可以理解为语法糖，称之为语法糖，意味着，这类新语法能做的事情其实用ES5也可以做，只是会稍微复杂一些。本章我们将着重讨论这些语法糖，看完之后，可能你会对一些你很熟悉的ES6新语法有不一样的理解。 
<!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>

解构赋值

二、填充数据: 模板语法 (多行字符串) 
<!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>

箭头函数

作者：木子昭
链接：https://www.jianshu.com/p/56c9ab6fad17
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
TAGS: ES6语法糖