ES6系列之箭头函数

[js高手之路] es6系列教程 - 箭头函数详解

箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过new关键字调用没有原型, 因为不能通过new调用,所以没有原型没有this, super,arguments和new.target绑定, new.target和super关键字是es6新增的箭头函数中的this,取决于他的上层非箭头函数的this指向没有arguments对象,但是可以获取到外层函…

ES6系列之箭头函数

本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map.Proxy.reflect.Class.Module.Iterator.Promise.Generator.async/await... 箭头函数顾名思义就是带箭头的函数,^-^,其实想表达的是箭头函数本质还是函数,那箭头函数和es5的函数有什么区别呢? 不绑定this var obj = { age:…

ES6学习之箭头函数

ES6学习笔记--箭头函数箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a=>a*a 是函数体这个函数就类似于: let fn = function (a) { return a++; } 上面的实例就是一个参数的情况,当然也可以没有参数,或者有多个参数没有参数 // 示例1 let fn = () => 2 + 3; // 相当于 let fn = function…

前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化

项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2.箭头函数及this指向 3.promise. 4.async await语法 4.模块化 module export和import 5.解构赋值.字符串模板 …… 箭头函数顾名思义用箭头 “ => ” 定义函数 //es5的函数 var fn = function(num) { return n…

JS ES6中的箭头函数（Arrow Functions）使用

转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法基础语法 (参数1, 参数2, …, 参数N) => { 函数声明 } (参数1, 参数2, …, 参数N) => 表达式(单一) //相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; } // 当只有一个参数时,圆括号是可选的: (单一参数) => {函数声明} 单一参数 => {函数声明} // 没有参…

es6学习笔记--箭头函数

基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分. var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = funct…

codewars--js--Reverse or rotate?----es6变量，箭头函数，正则取块

问题描述: 对输入的str按照sz个数进行分块,若一块内所有数字的立方和是偶数,则倒序:否则,向左移动一位.然后将修改过的块整合到一个字符串,作为输出. The input is a string str of digits. Cut the string into chunks (a chunk here is a substring of the initial string) of size sz (ignore the last chunk if its size is less tha…

从 ES6 高阶箭头函数理解函数柯里化

前言:第一次看到多个连续箭头函数是在一个 react 项目中,然鹅确认了下眼神,并不是对的人,因为看得一脸懵逼.em......于是开始各种搜索,先是知道了多个连续箭头函数就是 es6 的多次柯里化的写法,对于函数柯里化,很久以前就知道这个名次,但是并不理解,也没有去了解.为了弄明白多个连续箭头函数,开始了简化之路. 首先看到了这样的一个例子: let add = a => b => a + b 以上是一个很简单的相加函数,把它转化成 ES5 的写法如下: let add = function…

ES6中的箭头函数

关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创建的新对象3.fun()和匿名函数自调 this -> window4.类型.prototype.fun() fun中的this -> 将来调用fun的.前的子对象,子对象一定是当前类型5.如果this不是想要的对象 fun.call(替换this的对象),相当于对象.fun()ex:键盘事件 /…

ES6中的箭头函数和普通函数有什么区别？

1.普通函数中的this总是指向调用它的那个对象, 箭头函数没有自己的this,他的this永远指向其定义环境,任何方法都改变不了其指向,如call().bind().apply().(正是因为它没有this,所以也就不能用作构造函数,也没有原型对象) 2.箭头函数不能当作构造函数,也就是说,不能使用new命令,否则会报错. 3.箭头函数不能使用yield命令,因此箭头函数不能用作genertor函数. 4.箭头函数没有原型属性. 5.箭头函数不能使用argumen对象,该对象在函数体内不存在.…

ES6标准之箭头函数

语法具有一个参数的简单函数 var single = a => a single('hello, world') // 'hello, world' 没有参数的需要用在箭头前加上小括号 var log = () => { alert('no param') } 多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加 var add = (a, b) => a + b add(3, 8) 函数体多条语句需要用到大括号 var add = (a, b) => { if (typeo…

es6 初级之箭头函数

1.先看一个例子: <script> function show() { console.log('aluoha'); } show(); </script> 2. 改写成简单的箭头函数: var show = () => console.log('箭头:aluoha'); show(); 3. 1 包含return 的常规函数: function show() { return 10; } console.log(show()); 3.2 包含return 的箭头函数: 错…

react es6语法之 => 箭头函数

参考:https://www.cnblogs.com/secretAngel/p/9699356.html (1).只有一个参数且只有一句表达式语句的,函数表达式的花括号可以不写let test = a => a; // 只有一个参数a,这里的表达式相当于 "return a" (2).如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分.let getData = () => { 表达式语句... } // 没有任何参数 let getInit = (nam…

es6中的(=>)箭头函数

x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义. 箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了. 还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x => { if (x > 0) { return x * x; } else { return - x * x; } } 如果参数不是一个,就需要用括号()括起来:…

ES6中的箭头函数的语法、指向、不定参数

箭头函数的语法 function fn1() { console.log(1); } let fn2 = () => { console.log(2); } fn1()//1 fn2()//2 //箭头函数: 形参=>返回值 //单个形参的最简写法,箭头函数作为匿名的回调函数是可以省略let fn ,既(形参)=>{语句} let fn = nub => nub * 2 console.log(fn(10));//20 //多个形参,语句单一.(形参1,形参2)=>返回值 l…

ES6——>let，箭头函数，this指向小记

let let允许你声明一个作用域被限制在块级中的变量.语句或者表达式. 还是那个经典的问题:创建5个li,点击不同的li能够打印出当前li的序号. 如果在for循环中使用**var**来声明变量i的话,将总是打印出 Item 5 is Clicked 使用let的方式来解决 var liList = document.querySelectorAll('li') // 共5个lifor( let i=0; i<liList.length; i++){ liList[i].onclick =…

ES6中的箭头函数与普通函数的区别

箭头函数与普通函数的区别 1.语法上更加简洁.清晰基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.log('111') }; // 如果箭头函数只有一个参数,可以省略括号 let fun2 = name => { console.log('Hello ' + name); }; // 如果箭头函数有多个参数,用逗号隔开,写括号里面 let fun3 = (a, b, c) => { consol…

ES6系列_8之函数和数组

1.对象的函数解构 ES6为我们提供了这样的解构赋值使在前后端分离时,后端返回来JSON格式的数据,前端可以直接把这个JSON格式数据当作参数,传递到函数内部进行处理.比如: let json = { a:'es6', b:'es5' } function fun({a,b='es5'}){ console.log(a);//es6 console.log(b);//es5 } fun(json); 结果为: 2.数组的函数解构声明一个数组,然后写一个方法,最后用…进行解构赋值. let ar…

聊聊 ES6 中的箭头函数

首先来两点: 当只有一个参数的时候,那么 () 可以省略当只有一个 return 的时候,那么 {} 可以省略当函数体内只有一条语句的时候,那么 {} 也可以省略下面来几个简单的例子来对比 ES6 和 ES5: ES5: window.onload = function () { alert('abc'); } ES6: window.onload = () => { alert('abc'); } 上面这个例子是最普通的,现在让我们传参比较 ES5: let show = functio…

es6初级之箭头函数实现隔行变色

无论是使用哪种方式实现隔行变色的效果,它的思路都是一样的: 1.定义很多个div 2.给div 加背景 3.鼠标移动到div上时,当前div 背景变色 4.鼠标移出div时,当前div背景恢复以上4点就是隔行变色的思路流程,任何形式的实现方式,都要依照以上的思路来,否则将不会达到效果-----这是本质.因为经常会弄反,写着写着就忘记之前要干什么事了,所以此处写出来,当做提示信息 <!DOCTYPE html> <html lang="en"> <head…

ES6新特性箭头函数和常用function()对比

// 无参 var fn1 = function() {} var fn1 = () => {} // 单个参数 var fn2 = function(a) {} var fn2 = a => {} // 多个参数 var fn3 = function(a, b) {} var fn3 = (a, b) => {} // 可变参数 var fn4 = function(a, b, ...args) {} var fn4 = (a, b, ...args) => {}…

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

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

ES6中箭头函数的作用

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

初步探究ES6之箭头函数

今天要介绍的是ES6中的箭头函数. 语法我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression 1 2 3 4 5 6 1 2 3 4 5 6 param 是参数,根据参数个数不同,分这几种情况: () => { … } // 零个参数用 () 表示: x => { … } // 一个参数可以省略 (): (x, y) => { … } // 多参数不能省略 (): 示例我们再来看看…

ES6 -箭头函数，对象的函数解构

ES6 -箭头函数: //es6 中的箭头函数和扩展 //es5的写法 // function add(a,b){ // return a + b; // } // add(1,2); //3 function add1(a,b=1){ if(a==0){ throw new Error('a is zero'); } return a+b; } //console.log(add1(0)) //Uncaught Error: a is zero 主动抛出异常 //严谨模式 function a…