ES6——函数-箭头函数

箭头函数:

1、普通函数

function 函数名(){...}

2、箭头函数

 注意:

 1)如果只有一个返回值,{}return可以省略;

let arr = [12,5,8,99,33,14,26];
arr.sort(function(a,b){
    return a-b; //从小到大输出   = 数组顺序输出
});
alert(arr);
// 输出:5,8,12,14,26,33,99
// 箭头函数:
let arr = [12,5,8,99,33,14,26]; arr.sort((a, b)=>a-b); // 只有一个返回值,return、{}可以省 alert(arr); //输出:5,8,12,14,26,33,99

  2)如果只有一个参数,()可以省略;

let show = function(a){
    return a*2;
}
alert(show(2));
//输出:4

//箭头函数:
let show = a=>{
    return a*2;
}
// let show = a=>a*2;
alert(show(2));
// 输出:4

  3)引入箭头函数有两个方面的作用:更简短的函数并且不绑定this;

 具体请参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

3、举例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 
        1、sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的(如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。)-->
</head>
<body>
    <script>
/*  
函 数 : function 函数名(){...}
箭头函数:()=>{...}
注意:
    1、如果只有一个参数,()可以胜略;
    2、如果只有一个return,{}可以省略;
    3、引入箭头函数有两个方面的作用:更简短的函数并且不绑定this;
*/
//如:function show(){...} ---> let show=()=>{...}  ---> ()=>{...}
/*例子:
例1:
window.onload = function(){
    alert('abc');
};
输出:abc
//箭头函数
window.onload=()=>{
    alert('aaa');
};
输出:aaa
==================================================================
例2:
let show1 = function(){
    alert('abc');
};

//箭头函数
let show2 = ()=>{
    alert('abc');
};
show1();// 输出:abc
show2();// 输出:abc
=================================================================
例3:
let show1 = function(a,b){
    alert(a+b);
};

//箭头函数:
let show2 = (a,b)=>{
    alert(a+b);
};
show1(1,2);// 输出:3
show2(1,2);// 输出:3  
=================================================================
例4:
// let arr = [12,5,8,99,33,14,26];
// arr.sort();
// alert(arr);//输出:12,14,26,33,5,8,99 

let arr = [12,5,8,99,33,14,26];
arr.sort(function(a,b){
    return a-b; //从小到大输出 | = 数组顺序输出
});
alert(arr);
// 输出:5,8,12,14,26,33,99

//箭头函数:
let arr = [12,5,8,99,33,14,26];
arr.sort((a, b)=>a-b); // 只有一个返回值,{}可以省  
alert(arr);
//输出:5,8,12,14,26,33,99
==================================================================
例5:
let show = function(a){
    return a*2;
}
alert(show(2));
//输出:4

//箭头函数:
let show = a=>{
    return a*2;
}
// let show = a=>a*2;
alert(show(2));
// 输出:4
*/
</script>
</body>
</html>

 

posted @ 2019-10-08 11:40  鸣人卷~~  阅读(195)  评论(0编辑  收藏  举报