deep-in-es6(六)

箭头函数 Arrow Functions
箭头函数在JavaScript诞生是就存在，JavaScript建议在HTML注释内包裹行内脚本，这样可以避免不支持JS代码的浏览器将JS显示为文本。

        <script>

            <!--

            obj.style.height = "100px";//高度

            //-->

        </script>

老式浏览器将会代码解析成为两个不支持的标签和一条注释，只有新式浏览器才能识别出其中的JS代码。为了支持这种奇怪的hack方式，浏览器中的JavaScript引擎将同样是单行注释的一部分。古怪的是在HTML中-->之前的字符是注释的一部分，在在JS中-->之后的才是注释。但只有当箭头在行首时才会注释当前行，这是因为在其他上下文中-->是一个JS运算符：“趋向于”运算符！

        function countdown(n) {

            while(n --> 0) {//n趋向于0

                console.log(n);

            }

            blastoff();

        }

JavaScript中有一个有趣的特性，无论何时你需要一个函数时，可以想在添加的地方输入这个函数。

    $("body").click(function() {

        alert(0);

        alert(2);

    });

es6引入了一种编写函数的新语法：
es5:

    var selected = allJobd.filter(function(job) {

        return job.isSelected();

    });

es6:

    var selected = allJobs.filter(job => job.isSelect() );

当只有一个参数的简单函数时，可以使用新标准中的箭头函数：标识符=>表达式，无需输入function和return,一些大括号，小括号以及分号也可以省略。
如果有多个参数（没有参数，不定参数，默认参数，参数解构）的函数，需要用小括号包裹参数list。
es5:

    function square(a,b) {

        return a + b;

    }

    vae func =  forEarch(add(a,b));

es6:

    var func = foEach((a,b) => a+b,0);

出表达式外，箭头函数还可以包含一个块语句。

    //es5

    $("body").click(function(event) {

        alert(0);

        alert(12);

    });

    //es6:

    $("body").click(event => {

        alert(0);

        alert(12);

    });

注意：使用了箭头函数不会自动返回值，需要使用return语句将所需值返回。当时用箭头函数创建普通对象时，总是需要将对象包裹在小括号中。

var chewToys = pupies.map(pupy => {});//会报错

var chewToys = pupies.mao(pupy => ( {} ));//不会报错用小括号包裹空对象就可以。

箭头函数中的普通对象和代码块：

es6的规则是紧随箭头的{被解析为快的开始，而非对象的开始。所以如果使用箭头函数创建普通对象时要用小括号包裹起来。
箭头函数的this
箭头函数没有自己的this值，箭头函数内的this值继承自外围作用域。

    {

        addAll: function addAll(pieces) {

            var self = this;

            _.each(pieces,function(piece) {

                this.add(piece);//this指代的是window或者undefined

                self.add(piece);//子函数的self通过this传值解决

            });

        }

    }

es6中就不必解决这种传值的方式

    {

        addAll: function(pieces) {

            _.each(pieces,piece => this.add(piece));//他继承了外部addAllde this

        }

    }

箭头函数中没有arguments对象，可以使用不定参数，默认参数等。

巴特西

deep-in-es6(六)

最新文章

热门文章