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>

原文地址:https://www.cnblogs.com/sylys/p/11634558.html

时间: 2024-08-28 18:15:33

ES6——函数-箭头函数的相关文章

es6之箭头函数

es6之箭头函数 es6中的箭头函数实际上是一种语法糖,使用起来会更加方便. 1. 即它允许使用箭头(=>)来定义函数. 如 var f = v =>v; 这个箭头函数就等同于: var f = function (v) { return v; }; 2. 如果不需要给这个函数传递参数,就使用圆括号来代表参数部分,如下所示: var f = () =>8; 这个箭头函数就等同于: var f = function () { return 8; }; 3.如果传入的参数多于一个,同样也需要

ES6中箭头函数的作用

我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => "abc"; let test2=() => { return "abc"}; let sum=(a,b) => a+b; 比如上面的3个ES6的箭头函数的写完,如果用ES5就像下面的写完一样. 其实其等同于下面的ES5的写法: function test1() { return "abc" } functio

ES6的箭头函数

ES6的箭头函数 普通函数 let f2 = function(a) { return a; } f1(1); //1 箭头函数 // 参数 => 函数体let f1 = v => v;f1(1); //1 这两种写法都是输出1,相当于把function给省略了,再在括号后面加上=> let show1 = function () { console.log('show1'); } let show2 = () => { console.log('show2'); } show1(

ES6的箭头函数详解:

箭头函数是ES6中新增一个函数表达形式,它是对函数的一种简化ES6允许使用"箭头"(=>)定义函数. Eg: var f = v => v; 等同于之前 var f = function(v) { return v; }; const Even = n => n % 2 == 0; const Square = n => n * n; 注: 箭头函数就是省略了function 参数集与函数体之间一定要有一个箭头=> 对于参数集而言: 零个参数用 () 表示

关于es6的箭头函数使用与内部this指向

特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. 'use strcit'; let arr = [1,2,3]; //ES5 let es5 = arr.map(function(n){ return n*2; }); //ES6 let es6 = arr.map(n => n*2); console.log(es5); //[2,4,6] console.log(es6); //[2,4,6] 箭头函数简化了原先的函数语法,不需要再写 functi

ES6笔记② 箭头函数

特性介绍 箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. //ES5 function fun(x,y){ return x+y; } console.log(fun(5,10));//15 //ES6 var fun6 = (x,y) => {return x+y;} console.log(fun6(6,10));//16 ES6简化了声明函数,不需要再写 function . 好像除了简化代码,并没有什么新奇的对不对,那我们往下慢慢看. —————————

Es6 之箭头函数 初学

不积跬步,无以至千里;不积小流,无以成江海! // ES5 var selected = allJobs.filter(function (job) { return job.isSelected(); }); // ES6 var selected = allJobs.filter(job => job.isSelected()); 当你只需要一个只有一个参数的简单函数时,可以使用新标准中的箭头函数,它的语法非常简单:标识符=>表达式.你无需输入 function 和 return,一些小括

进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题

首先复习下普通函数里的this指向: 1 function test(){ 2 console.log(this) 3 } 4 test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数  函数里的this就指向谁,test()等价于window.test(),所以是window 1 var name="outername" 2 var o={ 3 name:"innername", 4 getname:function(){ 5 consol

ES6学习--箭头函数

1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + num2; [1,2,3].map(x => x * x); 2. 箭头函数基本特点 (1). 箭头函数this为父作用域的this,不是调用时的this 箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind.普通函数的this指向调用它的那个对象. let pe

ES6的箭头函数使用

ES6允许使用=>定义函数,箭头函数使得表达更加简洁,例如 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x); 定义方式 1. 一行代码可以省略代码块花括号{} var f = () => 5; //等同 var f = function () { return 5 } 2. 一个参数可以省略函数的小括号() var f = v => v; //等同 va