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>
ES6——函数-箭头函数的更多相关文章
- 关于ES6的箭头函数的详解
ok 坑比函数~~箭头函数~~不自己动手写看懂也不行~~~ 当然你也可以一点一点的把函数复制到Babel里面去将ES6转换成ES5 (斗笔行为) 老谢写的笔记教程就是深入(通俗易懂)哈哈~~~ 第 ...
- ES6中箭头函数的作用
我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...
- ES6使用箭头函数注意点
新事物也是有两面性的,箭头函数有他的便捷有他的优点,但是他也有缺点,他的优点是代码简洁,this提前定义,但他的缺点也是这些,比如代码太过简洁,导致不好阅读,this提前定义,导致无法使用JS进行一些 ...
- Es6中箭头函数与普通函数的区别
Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...
- es6的箭头函数和es5的function函数区别
一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...
- Es6 之箭头函数 初学
不积跬步,无以至千里;不积小流,无以成江海! // ES5 var selected = allJobs.filter(function (job) { return job.isSelected() ...
- 关于es6的箭头函数使用与内部this指向
特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. 'use strcit'; let arr = [1,2,3]; //ES5 let es5 = arr.m ...
- ES6笔记② 箭头函数
特性介绍 箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. //ES5 function fun(x,y){ return x+y; } console.log(fun ...
- 关于ES6 用箭头函数后的 this 指向问题
最近写完小程序后, 开始学习React, 因为有编译器, 就直接用ES6 新语法了, 中间自然离不开 () => { console.log('箭头函数的this是指向哪的问题')}; var ...
- 进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题
首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数 函数 ...
随机推荐
- 【leetcode】449. Serialize and Deserialize BST
题目如下: Serialization is the process of converting a data structure or object into a sequence of bits ...
- 如何在mac上使用iMessage发送信息
在Mac上你也可以像iPhone上一样使用iMessage 来发送iMessage 与 普通的短信息. 并且你需要在iPhone上设置中的信息的信息转发中激活对电脑的支持.此时, 你的电脑也可以向你的 ...
- FastDFS整合nginx模块报错
之前在本地虚拟机用的都是5.1的版本和1.12的nginx,在服务器上尝试一下高版本的6.1 一直报错各种,例如: undeclared (first use in this function) 尝试 ...
- 20180826(04)-Java序列化
Java序列化 Java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据.有关对象的类型的信息和存储在对象中数据的类型 将序列化对象写入文件之后,可 ...
- 576 C
C. MP3 爆ll == #include<bits/stdc++.h> using namespace std; typedef long long ll; #define P pai ...
- Seek the Name, Seek the Fame (poj2752
Seek the Name, Seek the Fame Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 14561 Ac ...
- 170820-关于JSP页面的知识点
1.JSP [1] 简介 > HTML - HTML擅长显示一个静态的网页,但是不能调用Java程序. > Servlet - Servlet擅长调用Java程序和后台进行交互,但是它不擅 ...
- vue2.X 与 vue1.X 的区别
vue2.0: bower info vue http://vuejs.org/ 到了2.0以后,有哪些变化? 1. 在每个组件模板,不在支持片段代码 组件中模板: 之前: <template& ...
- 【SpringBoot】 项目中运用的一些技巧,mybatis-plus 自动编译等(持续更新)
前言 本文将总结项目中用到的一些springboot 的技巧,持续更新. Mybatis-Plus 的运用 使用原因: 主要是节省了Mapper层的编写,通过继承BaseMapper可以直接调用通用的 ...
- html基础与表格的理解·
1.静态网页与动态网页的区别:是否访问数据库 2.超文本:超文本是指超出文本的范围,可以插入声音视频,表格图片等 3.标记语言与网页结构:标记语言就是标签,网页结构包含<html>< ...