返回顶部
首页 > 资讯 > 前端开发 > 其他 >es6 等号箭头什么意思
  • 835
分享到

es6 等号箭头什么意思

ES6javascript 2022-11-22 23:11:53 835人浏览 独家记忆
摘要

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。=>是箭头函数,是es6标准中新增的一种新的函数。顾名思义,箭头函数是一种使用箭头(=>)定义函数的新语法,箭头函数表达式的语法比函数表达式更

教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

=>是箭头函数,是es6标准中新增的一种新的函数。顾名思义,箭头函数是一种使用箭头(=>)定义函数的新语法,箭头函数表达式的语法比函数表达式更简洁,但是它与传统的javascript函数有些许不同,主要集中在以下方面:

  • 没有this、super、arguments和new.target绑定,其值由外围最近一层非箭头函数决定

  • 不能通过new关键字调用

  • 没有原型

  • 不可以改变this的绑定

  • 不支持arguments对象

  • 不支持重复的命名参数

  • 函数体内的this的指向始终是指向定义它所在的对象,而不会指向调用它的对象,我们知道es5中的函数是谁执行它,它就指向谁。

执行环境

你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制台下. 现在, 推荐使用Firefox(22+)开发工具, Firefox(22+)开发者工具现在支持箭头函数,你也可以使用谷歌浏览器. 如果你使用谷歌浏览器, 你必须要做下列两件事:

  • 在谷歌浏览器中地址栏中输入:about:flags, 找到 "使用体验性JavaScript"选项,开启使用。

  • 在函数的开头加上use strict,然后再在你的谷歌浏览中测试箭头函数吧(提示:请用谷歌浏览器v38,我当时就是被浏览器版本坑了):

(function(){
    "use strict";
    // use arrow functions here
}());

幸运的是后面会有越来越多的浏览器支持ES6特性. 现在你完成了所有准备工作, 让我们继续深入它吧!

一个新话题

最近大家在讨论关于ES6的一个话题:关于箭头函数, 像这样:

=>

新的语法

随着讨论产生了一个新的语法:

param => expression

新增的语法是作用在变量上, 可以在表达式中申明多个变量, 下面是箭头函数的使用模式:

//  一个参数对应一个表达式
param => expression;// 例如 x => x+2;

// 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y);

// 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;};

//  多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};

//表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2
() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1

//传入一个表达式,返回一个对象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
        var object = fuc(1);
        alert(object);//{key:1}

箭头函数是怎么实现的

我们可以把一个普通函数转换成用箭头函数来实现:

// 当前函数
var func = function (param) {
    return param.split(" ");
}
// 利用箭头函数实现
var func = param => param.split(" ");

从上面的例子中我们可以看出箭头函数的语法实际上是返回了一个新的函数, 这个函数有函数体和参数。

因此, 我们可以这样调用刚才我们创建的函数:

func("Felipe Moura"); // returns ["Felipe", "Moura"]

立即执行函数(IIFE)

你能在立即执行函数里使用箭头函数,例如:

( x => x * 2 )( 3 ); // 6

这行代码产生了一个临时函数,这个函数有一个形参x,函数的返回值为x*2,之后系统会马上执行这个临时函数, 将3赋值给形参x.

下面的例子描述了临时函数体里有多行代码的情况:

( (x, y) => {
    x = x * 2;
    return x + y;
})( 3, "A" ); // "6A"

相关思考

思考下面的函数:

var func = x => {
    return x++;
};

我们列出了一些常见的问题:

箭头函数创建的临时函数的arguments它不会被置:

console.log(arguments); // not defined

typeofinstanceof函数也能正常检查临时函数:

func instanceof Function; // true
typeof func; // function
func.constructor == Function; // true

把箭头函数放在括号内是无效的:

//  有效的常规语法
(function (x, y){
    x= x * 2;
    return x + y;
} (3, "B") );
// 无效的箭头函数语法
( (x, y) => {
    x= x * 2;
    return x + y;
} ( 3, "A" ) );
// 但是可以这样写就是有效的了:
( (x,y) => {
    x= x * 2;return x + y;
} )( 3,"A" );//立即执行函数

尽管箭头函数会产生一个临时函数,但是这个临时函数不是一个构造函数:

var instance= new func(); // TypeError: func is not a constructor

同样也没有原型对象:

func.prototype; // undefined

作用域

这个箭头函数的作用域和其他函数有一些不同,如果不是严格模式,this关键字就是指向window,严格模式就是undefined,在构造函数里的this指向的是当前对象实例,如果this在一个对象的函数内则this指向的是这个对象,this有可能指向的是一个DOM元素,例如当我们添加事件监听函数时,可能这个this的指向不是很直接,其实this(不止是this变量)变量的指向是根据一个规则来判断的:作用域流。下面我将演示this在事件监听函数和在对象函数内出现的情况:

在事件监听函数中:

document.body.addEventListener('click', function(evt){
    console.log(this); // the htmlBodyElement itself
});

在构造函数里:

function Person () {
    let fullName = null;
    this.getName = function () {
        return fullName;
    };
    this.setName = function (name) {
        fullName = name;
        return this;
    };
}
let jon = new Person();
jon.setName("Jon Doe");
console.log(jon.getName()); // "Jon Doe"
//注:this关键字这里就不解释了,大家自己Google,baidu吧。

在这个例子中,如果我们让Person.setName函数返回Person对象本身,我们就可以这样用:

jon.setName("Jon Doe")
.getName(); // "Jon Doe"

在一个对象里:

let obj = {
    foo: "bar",
    getIt: function () {
        return this.foo;
    }
};
console.log( obj.getIt() ); // "bar"

但是当执行流(比如使用了setTimeout)和作用域变了的时候,this也会变。

function Student(data){
    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;
    this.getInfo = function () {
        return this.name + ", " + this.age;
    };
    this.sayHi = function () {
        window.setTimeout( function () {
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// window

当setTimeout函数改变了执行流的情况时,this的指向会变成全局对象,或者是在严格模式下就是undefine,这样在setTimeout函数里面我们使用其他的变量去指向this对象,比如self,that,当然不管你用什么变量,你首先应该在setTimeout访问之前,给self,that赋值,或者使用bind方法不然这些变量就是undefined。

这是后就是箭头函数登场的时候了,它可以保持作用域,this的指向就不会变了。

让我们看下上文起先的例子,在这里我们使用箭头函数:

function Student(data){
    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;
    this.getInfo = function () {
        return this.name + ", " + this.age;
    };
    this.sayHi = function () {
        window.setTimeout( ()=>{
            // the only difference is here
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// Object { name: "Mary Lou", age: 13, ... }

分析:在sayHi函数中,我们使用了箭头函数,当前作用域是在student对象的一个方法中,箭头函数生成的临时函数的作用域也就是student对象的sayHi函数的作用域。所以即使我们在setTimeout调用了箭头函数生成的临时函数,这个临时函数中的this也是正确的指向。

有趣和有用的使用

创建一个函数很容易,我们可以利用它可以保持作用域的特征:

例如我们可以这么使用:Array.forEach()

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
    console.log(vowel);
});

分析:在forEach里箭头函数会创建并返回一个临时函数 tempFun,这个tempFun你可以想象成这样的:function(vowel){ console.log(vowel);}但是Array.forEach函数会怎么去处理传入的tempFunc呢?在forEach函数里会这样调用它:tempFunc.call(this,value);所有我们看到函数的正确执行效果。

//在Array.map里使用箭头函数,这里我就不分析函数执行过程了。。。。

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
    return vowel.toUpperCase();
});
// [ "A", "E", "I", "O", "U" ]

费布拉奇数列

var factorial = (n) => {
    if(n==0) {
        return 1;
    }
    return (n * factorial (n-1) );
}
factorial(6); // 720

我们也可以用在Array.sort方法里:

let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=> a < b? 1: -1 );

也可以在事件监听函数里使用:

// EventObject, BodyElement
document.body.addEventListener('click', event=>console.log(event, this));

总结

尽管大家可能会认为使用箭头函数会降低你代码的可读性,但是由于它对作用域的特殊处理,它能让我们能很好的处理this的指向问题。箭头函数加上let关键字的使用,将会让我们JavaScript代码上一个层次!尽量多使用箭头函数,你可以再你的浏览器测试你写的箭头函数代码,大家可以再评论区留下你对箭头函数的想法和使用方案!我希望大家能享受这篇文章,就像你会不就的将来享受箭头函数带给你的快乐.

以上就是es6 等号箭头什么意思的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: es6 等号箭头什么意思

本文链接: https://lsjlt.com/news/173398.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • es6 等号箭头什么意思
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。=>是箭头函数,是ES6标准中新增的一种新的函数。顾名思义,箭头函数是一种使用箭头(=>)定义函数的新语法,箭头函数表达式的语法比函数表达式更...
    99+
    2022-11-22
    ES6 javascript
  • es6等号箭头指的是什么
    本文小编为大家详细介绍“es6等号箭头指的是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“es6等号箭头指的是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。es6的等号箭头“=>”是指箭头函数,是...
    99+
    2023-07-04
  • php里箭头什么意思
    本教程操作环境:windows7系统、PHP8.1版、Dell G3电脑。php里箭头什么意思?PHP 7.4 新语法之箭头函数实例详解短闭包,也叫做箭头函数,是一种用 php 编写的短函数.当向函数中传递闭包时,这个功能是非常有用的,比如...
    99+
    2024-04-02
  • php的箭头是指什么意思
    本文操作环境:windows7系统、PHP7.1版、DELL G3电脑php的箭头是指什么意思php箭头的用法是什么?php中的“->”符号被称为箭头运算符,箭头运算符左侧是获取类的实例,右侧将指定左侧类的方法和属性并进行调用,本篇文...
    99+
    2018-01-12
    php 箭头
  • php中箭头指的是什么意思
    小编给大家分享一下php中箭头指的是什么意思,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!php的箭头符号被称为箭头运算符,箭头运算符左侧是获取类的实例,右侧将指定左侧类的方法和属性并进行调用。本文操作环境:windows...
    99+
    2023-06-25
  • ES6中箭头函数是什么
    这篇文章主要介绍ES6中箭头函数是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!箭头函数ES6新增了使用箭头语法定义语法函数表达式的能力。很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是...
    99+
    2023-06-14
  • go version -m 输出中的箭头符号“=>”是什么意思?
    php小编草莓在这里为大家解答一个关于Go语言的疑问:在运行`go version -m`命令时,输出中的箭头符号"=>"代表的含义是什么呢?这个符号实际上是用来表示包的依赖关系...
    99+
    2024-02-09
    go语言
  • es6箭头函数有什么特性
    这篇文章主要介绍“es6箭头函数有什么特性”,在日常操作中,相信很多人在es6箭头函数有什么特性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6箭头函数有什么特性”的疑惑...
    99+
    2024-04-02
  • es6箭头函数的概念是什么
    这篇文章主要介绍“es6箭头函数的概念是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6箭头函数的概念是什么”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • mysql中的等号是什么意思
    这篇文章主要讲解了“mysql中的等号是什么意思”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“mysql中的等号是什么意思”吧! ...
    99+
    2024-04-02
  • php箭头号指的是什么
    这篇文章主要介绍“php箭头号指的是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php箭头号指的是什么”文章能帮助大家解决问题。在php中,箭头号“->”被称为插入式解引用操作符,是调用...
    99+
    2023-07-05
  • es6箭头函数什么时候不能用
    这篇文章主要讲解了“es6箭头函数什么时候不能用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6箭头函数什么时候不能用”吧! ...
    99+
    2024-04-02
  • es6箭头函数怎么使用
    本篇内容介绍了“es6箭头函数怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • 怎么使用ES6箭头函数
    这篇文章主要介绍“怎么使用ES6箭头函数”,在日常操作中,相信很多人在怎么使用ES6箭头函数问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用ES6箭头函数”的疑惑有所帮...
    99+
    2024-04-02
  • c语言中双等号什么意思
    c语言中的双等号(==)是赋值运算符,用于将一个值赋值给一个变量:语法:variable_name == value;用法:将右边表达式的值赋给左边指定的变量;注意:双等号是赋值运算符,...
    99+
    2024-05-02
    c语言
  • es6箭头方法中this的指向是什么
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。箭头函数相信大家在日常开发中用到的地方非常之多,因为它很简洁,可读性强,但是它最大的好处,其实是解决了匿名函数的this指向问题,有利于封装回调函数。先来...
    99+
    2022-11-22
    箭头函数 javascript ES6
  • CSS怎么箭头符号
    这篇文章给大家分享的是有关CSS怎么箭头符号的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   代码如下   HTML代码   <!DOCTYPEhtml> ...
    99+
    2024-04-02
  • javascript ES6中箭头函数注意细节有哪些
    小编给大家分享一下javascript ES6中箭头函数注意细节有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言ES6标...
    99+
    2024-04-02
  • php中三个等于号“===”是什么意思
    本教程操作环境:windows7系统、PHP7.1版,DELL G3电脑php中三个等于号“===”是什么意思PHP中三个等于号的意思是绝对等于,如果 x 等于 y,且它们类型相同,则返回 true。是PHP比较运算符的一种。要求给定的左右...
    99+
    2015-09-05
    PHP
  • php中三个等于号是什么意思
    这篇文章主要介绍“php中三个等于号是什么意思”,在日常操作中,相信很多人在php中三个等于号是什么意思问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php中三个等于号是什么意思”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-21
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作