React的箭头函数详解

基本用法：

ES6中允许使用“箭头”(=>)定义函数

var f = v => v;

上面代码相当于：

var f = function( v ) {
return v;
}

根据箭头函数有参数和无参数来区分

1、无参数的箭头函数

var f = () => 5;
等同于

var f = function() { return 5};
2、有参数的箭头函数

var sum = ( a, b) => a + b;
等同于

var sum = function( a, b) {
return a +b;
}
有的函数体内的语句大于一条的话，它的写法如下使用一个大括号将其括起来，并使用return语句返回

var sum = (a, b) => { return a+b;}
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象时，必须在对象外面加一个大括号

var getFunction = id => ({id: id, anme: "Temp"});
箭头函数也可以与变量解构结合使用：

const full = ({first, last}) => first +" "+ last;
等同于

function full(person) {
return person.first +" "+ person.last;
}
使用箭头函数可以让函数表达的更加简洁

箭头函数的一个用处是简化回调函数

[1,2,3].map(function(x){
return x*x;
});
使用箭头函数的写法

[1,2,3].map(x => x*x);
另一个例子

var result = values.sort(function(a, b){
return a -b;
});
箭头函数的写法

var result = values.sort((a, b) => a-b);
使用rest参数与箭头函数结合的例子

const numbers = (...nums) => nums;
numbers(1,2,3,4,5,6,7,8,9); //[1,2,3,4,5,6,7,8,9]
//...nums 表示的是一个数组
const headAndTail = ( head, ...tail) => [head, tail];
headAndTail(1,2,3,4,5,6,7,8,9);// [1, [2,3,4,5,6,7,8,9]]

使用箭头函数注意几点：
1、函数体内的this对象就是定义时所在的对象，而不是使用时所在对象；

2、不可以当作构造函数使用，也就是不能用new命令实例化一个对象，否则会抛出一个错误；

3、不可以使用arguments对象，该对象在函数体内不存在，如果要用的话，可以用rest参数代替；

4、不可以使用yield命令，箭头函数不能用作Generator函数；

●箭头函数:
function add(x,y){return x+y};
///这是es5中定义函数的写法，es6中我们可以这么搞：
var add=(x,y)=>x+y;
add(1,2);//3,正常运行

var fun1=x=>x+1;
fun1(3);//4,当参数为1个的时候可以再简单一点，当然复杂函数还是需要括号与大括号的

['a','b','c'].map(x=>x);//["a", "b", "c"]

obj2={fun:function(){
setTimeout(()=>console.log(this))
}};
obj2.fun();//Object(),箭头函数下的this指向并没有改变，而是指向obj2，
1
2
3
4
5
6
7
8
9
10
箭头函数体内的this指向的是定义时所在的对象，而不是执行时所在的对象。箭头函数绑定this的指向，很大程度解决了过去this动态指向的困扰，可以大大减少显示绑定this对象的写法(call,apply,bind)。
●es6中函数参数:
function fun1(x='a'){console.log(x)};
fun1();//a,没有参数的时候，依然能够打印出默认值a

let fun2=(x=1,y=2)=>x+y;
fun2();//3,没有参数情况下,参数取默认
fun2(10);//12只有一个参数时，y为默认值
fun2(2,5);//7参数个数等于形参时候，参数取实参
fun2(4,5,6);//9参数数量超标时，行为如ES5

let fun3=function(x=1,y=2){this.x=x;this.y=y}
let newFun=new fun3;
//newFun={x:1,y:2}构造函数也可以设置默认值,注意箭头函数不可以当做构造函数，即使用new命令时会报错

///
let fun4=({x,y=2})=>console.log(x,y)
fun4();//报错,因为fun4的参数为一个对象
fun4({});//undefined,2
fun4({x:2,y:4});//2,4
fun4({x:2});//2,2

let fun5=(x,y)=>{let x=5;return x};//报错,let命令不允许重复定义

React的箭头函数详解相关推荐

JS中箭头函数详解=
箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,arguments,super或 new.target.此外,箭头函数总是匿名的.这些函数表达式最适合非方法函数,它们不能用作构造函数. ...
ES6学习（箭头函数详解）
箭头函数(Arrow Function) 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名 ...
js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
Javascript 函数详解
Javascript 函数详解 1)函数声明: 通过关键字function定义,把函数作为变量来声明函数声明后不会立即执行,会在我们需要的时候调用到. <script>function ...
Flutter（Dart）基础——函数详解
Flutter(Dart)基础--函数详解在Dart中,函数(或方法)也是对象,它的类型是 Function. 这意味着,函数可以赋值给变量,也可以当做其他函数的参数. 函数的声明基本上与Java ...
NetworkX画图：nx.draw_networkx(函数详解)
NetworkX画图:nx.draw_networkx(函数详解) draw_networkx(G, pos=None, arrows=True, with_labels=True, **kwds) ...
C语言网络编程：accept函数详解
文章目录前言函数描述代码实例如何得到客户端的IP 和端口号前言当使用tcp服务器使用socket创建通信文件描述符,bind绑定了文件描述符,服务器ip和端口号,listen将服务器端的 ...
【FFmpeg】函数详解（三）
FFmpeg函数详解 14.av_write_frame 15.av_interleaved_write_frame 16.av_write_trailer 17.avio_close 18.av_i ...
【FFmpeg】函数详解（二）
FFmpeg函数详解 9.av_dump_format 10.avio_open 11.avformat_write_header 12.avcodec_send_frame 13.avcodec_r ...
【FFmpeg】函数详解（一）
FFmpeg函数详解一.错误码相关 1.AVERROR 2.av_strerror 3.其他错误码解释二.编解码 1.获取编解码器 2.申请.释放上下文环境 3.打开编码器avcodec_open ...

React的箭头函数详解

React的箭头函数详解相关推荐

最新文章

热门文章