6.箭头函数

编程之家收集整理的这篇文章主要介绍了6.箭头函数编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

箭头函数

ES6允许使用【箭头】(=>)定义函数

声明一个函数

let fn = function(){

}
let fu = (a,b)=>{
	return a+b;
}
//调用函数
let result = fu(1,2);
console.log(result);

this是静态的,this始终指向函数声明时所在作用于下的this的值
function getName(){
	console.log(this.name);
}
let getName2 = () => {
	console.log(this.name);
}

//1.设置window对象的name属性

window.name = 'study';
const school ={
	name:"bad"
}

//直接调用
getName();
getName2();

//call 方法调用
getName.call(school);//bad
getName2.call(school);//study

//2.不能作为构造实例化对象
let Person = (name,age) =>{
	this.name = name;
	this.age = age;
}
let me = new Person('xiao',30);
console.log(me);//报错:Person is not a constructor

//3.不能使用arguments变量
let fu = () => {
    console.log(arguments);
}
fn(1,2,3);//报错:arguments is not defined

//4.箭头函数的简写
	//1)省略小括号,当形参有且只有一个的时候
	let add = n => {
        return n+n;
    }
    console.log(add(9));
	//2)省略花括号,当代码体只有一条语句的时候,此时return必须省略
	//而且语句的执行结果就是函数的返回值
	let pow = n => n*n;
	console.log(pow(8));

箭头函数的实践

//需求1 点击div 2s 后颜色变成粉色
//获取元素
let ad = document.getElementById('ad');
//绑定事件
ad.addEventListener('click',function(){
    //ES5做法,保存this的值
    let _this = this;
    //定时器
    setTimeout(function(){
        _this.style.background = 'pink;
    },2000);
     //ES6做法
    setTimeout(() => {
        this.style.background = 'pink;
    },2000);
})

//需求2 从数组中返回偶数元素
const arr = [1,6,9,10,100,25];
//ES5
const result = arr.filter(function(item){
    if(item % 2 ===0){
        return true;
    }else{
        return false;
    }
})
console.log(result);//[6,100]
//ES6
const result = arr.filter(item => item % 2 ===0);
console.log(result);//[6,100]

  • 箭头函数适合与this无关的回调。
    例如:定时器,数组的方法回调

  • 箭头函数不适合与this有关的回调。
    例如:事件回调,对象的方法

总结

以上是编程之家为你收集整理的6.箭头函数全部内容,希望文章能够帮你解决6.箭头函数所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的ES6相关文章

ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一、安装命令行转码工具 npm install --glob
Map介绍 ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map也实现了iterator接口,所以可以使用【扩展
Object.fromEntries //二维数组 const result = Object.fromEntries([ ['name','Study
扩展运算符 [...]扩展运算符能将【数组】转换为逗号分隔的【参数序列】 //声明一个数组 const tfboys = ['y','w&#39
简化对象写法 ES6允许再大括号里面,直接写入变量和函数,作为对象的属性和方法。 遮眼法的书写更加简洁 let name = 'study'; let change =
函数参数默认值 ES6允许给函数参数赋值初始值 //1.形参初始值 具有默认值的参数,一般位置要靠后(潜规则) function add(a,b,c=10){ return aʻʼ } let
数值扩展 //0. Number.EPSILON 是 JavaScript 表示的最小精度 EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
ES6引入rest参数,用于获取函数的实参,用来替代arguments //ES5获取实参的方式 function date(){ console.log(arguments);//对象 } date
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注