Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use VSCode arrow function", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let Xiaobian take you to learn "how to use VSCode arrow function"!

Arrow function is a must to master, today we come to learn together, it brings convenience to developers at the same time, but also pay attention to its "incompetence." Let's start with an example:

const names = [ 'wsy', 'suyan', 'front lessons' ]; let lengths = names.map (name => name.length); console.log ('lengths =', lengths);

The results are as follows:

先看下它的语法：

1. 无参数

function call(callback) { callback(); } call(() => { console.log('arrow void'); }); // 箭头函数类似于下面这个函数 call(function () { console.log('void'); });

2. 只有一个参数，无返回值

function call(callback) { callback('前端小课'); } call(name => { console.log('arrow', name); }); // 箭头函数类似于下面这个函数 call(function (name) { console.log(name); });

3. 只有一个参数，有返回值

function call(callback) { // 返回值为 4 let len = callback('前端小课'); console.log(len); } // 只有一行表达式省略大括号 call(name => name.length); // 类似于这个 call(name => { return name.length; }); // 箭头函数类似于下面这个函数 call(function (name) { return name.length; });

4.有多个参数，有返回值

function call(callback) { let len = callback(1, 2, 3); console.log(len); // 6 } // 多个个参数，有返回值，只有一行表达式省略大括号 call((a, b, c) => a + b + c); // 类似与这个 call((a, b, c) => { return a + b + c; }); // 箭头函数类似于下面这个函数 call(function (a, b, c) { return a + b + c; });

从上面这些例子可以知道，每个箭头函数都能写出一个与其功能相同的普通函数，那为什么还用箭头函数?

在 连接你、我、他 ; this 这节课程中使用箭头函数解决了 this 指向的问题。不知道你们有没有发现当写下面这两个函数的时候，VSCode 默认使用的是箭头函数：

setTimeout(() => { // 这里是箭头函数 }, 100); setInterval(() => { // 这个是箭头函数 }, 200);

使用箭头函数有几点需要留意：

1. 让函数更简短，上面例 3 就是一个很好的例子;

2. 没有自己的 this 和 argument，比如有如下代码：

let person = { name: 'suyan', showName: function (age) { window.setTimeout(() => { console.log('this = ', this); console.log('arguments = ', arguments); console.log(this.name, age); }, 100); } }; person.showName(20);

打印结果为：

3. cannot be used as a constructor;

let Dog = name => { this.name = name; }; //ERROR Uncaught TypeError: Dog is not a constructor let aDog = new Dog('fe'); let Dog2 = function (name) { this.name = name; }; //correctly let aDog2 = new Dog2 ('fe ');

4. Arrow functions have no prototype attribute:

let Dog = name => { this.name = name; }; Dog.prototype; // undefined

5. Cannot bind this via call, apply

var name = 'I am widow'; let animal = { name: 'animal', showName: age => { console.log('this = ', this); console.log('name | age = ', this.name, age); } }; let dog = { name: 'dog' }; animal.showName.call(dog, 20); animal.showName.apply(dog, [21]); let bindName = animal.showName.bind(dog, 22); bindName();

Run the code and the result is as follows:

Since arrow functions do not have this pointer, this cannot be modified by calling, applying, or binding. Only parameters can be passed, this parameter will be ignored.

At this point, I believe everyone has a deeper understanding of "how to use the VSCode arrow function," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.