zoukankan      html  css  js  c++  java
  • [js高手之路] es6系列教程

    箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简.

    什么是箭头函数?

    箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性:

    • 不能通过new关键字调用
    • 没有原型, 因为不能通过new调用,所以没有原型
    • 没有this, super,arguments和new.target绑定, new.target和super关键字是es6新增的
    • 箭头函数中的this,取决于他的上层非箭头函数的this指向
    • 没有arguments对象,但是可以获取到外层函数的arguments
    • call,apply,bind不能改变箭头函数的this指向

    箭头函数语法由函数参数、箭头、函数体组成.

    第一种形式: 没有参数的写法

    1         /*
    2             (): 空括号代表: 没有传递参数
    3             函数体: console.log( 'ghostwu' ),  只有这一句话,可以不加花括号{}
    4         */
    5         let show = () => console.log( 'ghostwu' );
    6         show();
    1          //函数体只有一句话,当然也可以加花括号
    2         let show = () => { console.log( 'ghostwu' ); }
    3         show();

     第二种形式: 带一个参数的写法

    1         /*
    2             第一个a 表示 参数a
    3             第二个a 表示函数体a, 相当于 return a
    4         */
    5         let show = a => a;
    6         console.log( show( 10 ) );
    1         //如果函数体加了花括号,要用return
    2         let show = a => { return a; };
    3         console.log( show( 10 ) );
    1         // 当然也可以加小括号
    2         let show = (a) => { return a; };
    3         console.log( show( 10 ) );
    1         // let show = ( a ) => console.log( a );
    2         // show( 100 ); //100
    3 
    4         // 当函数体有return的时候,必须要加花括号
    5         let show = ( a ) => return a; //错误

     第三种形式: 带2个以上参数的写法

     1         //当函数有2个以上参数的时候,一定要用小括号
     2         // let add = ( a, b ) => a + b;
     3         // console.log( add( 10, 20 ) ); //30
     4 
     5         // let add = a, b => a + b; //错误
     6         // console.log( add( 10, 20 ) );
     7 
     8         //有return需要加花括号
     9         // let add = (a, b) => return a + b; //错误
    10         // console.log( add( 10, 20 ) );
    11 
    12         // let add = (a, b) => console.log( a + b );
    13         // add( 10, 20 ); //30
    14 
    15         // let add = ( a, b ) => { return a + b; };
    16         // console.log( add( 10, 20 ) ); //30

    返回值如果是对象:

    1         //返回值是对象,为了以示区分,用小括号
    2         let show = name => ( { 'user' : name } );
    3         let oUser = show( 'ghost' );
    4         console.log( oUser.user );
    1          //用了return关键字,要用花括号{}
    2         let show = name => { return { 'user' : name } };
    3         let oUser = show( 'ghostwu' );
    4         console.log( oUser.user );
    1         //对象与传参用法
    2         let show = ( name, age ) => {
    3             return {
    4                 'uName' : name,
    5                 'uAge' : age                
    6             };
    7         }
    8         let oUser = show( 'ghostwu', 22 );
    9         console.log( oUser.uName , oUser.uAge ); //ghostwu, 22

    立即表达式的写法:

    1         //立即表达式的写法
    2         let oUser = ((name, age)=>{
    3             return {
    4                 "uName" : name,
    5                 "uAge" : age
    6             }
    7         })('ghostwu', 25 );
    8         console.log( oUser.uName , oUser.uAge );

    箭头函数不能new

    1         let User = () => 'ghostwu';
    2         console.log( User() );
    3         console.log( new User() ); //报错,箭头函数不能new

    箭头函数中的this,取决于他的上层非箭头函数的this指向

    1          //this指向他的外层window
    2         // var a = 10;
    3         // let user = () => {
    4         //     console.log( this.a ); //this->window
    5         // }
    6         // user(); //10
     1          // 箭头函数中的this取决于外层函数的this
     2         function User( name ) {
     3             this.name = name;
     4             this.getName = () => {
     5                 console.log(this); //this指向oUser
     6                 return this.name;
     7             };
     8         }
     9         var oUser = new User( 'ghostwu' );
    10         console.log( oUser.getName() );

    箭头函数可以简化数组的处理

    1         //箭头函数简化数组处理
    2         // let arr = [10,100,0,3,-5];
    3         // arr.sort( ( a, b ) => a - b );
    4         // arr.sort( ( a, b ) => b - a );
    5         // console.log( arr );

    箭头函数取到的是外层的arguments

    1         let show = function( name ){
    2             return () => arguments[0]; // ghostwu, 箭头函数获取到的是外层的arguments
    3         }
    4         let fn = show( 'ghostwu' );
    5         console.log( fn() );

    call,bind,apply都不能改变箭头函数中this的指向

    1         var n1 = 100;
    2         var n2 = 200;
    3         let add = () => {
    4             return this.n1 + this.n2;
    5         };
    6         console.log( add.call( null ) ); //300
    7         console.log( add.apply( null ) );//300
    8         console.log( add.bind( null )() );//300
  • 相关阅读:
    LeetCode 515. 在每个树行中找最大值(Find Largest Value in Each Tree Row)
    LeetCode 114. 二叉树展开为链表(Flatten Binary Tree to Linked List)
    LeetCode 199. 二叉树的右视图(Binary Tree Right Side View)
    LeetCode 1022. 从根到叶的二进制数之和(Sum of Root To Leaf Binary Numbers)
    LeetCode 897. 递增顺序查找树(Increasing Order Search Tree)
    LeetCode 617. 合并二叉树(Merge Two Binary Trees)
    LeetCode 206. 反转链表(Reverse Linked List) 16
    LeetCode 104. 二叉树的最大深度(Maximum Depth of Binary Tree)
    LeetCode 110. 平衡二叉树(Balanced Binary Tree) 15
    LeetCode 108. 将有序数组转换为二叉搜索树(Convert Sorted Array to Binary Search Tree) 14
  • 原文地址:https://www.cnblogs.com/ghostwu/p/7290848.html
Copyright © 2011-2022 走看看