Cet article vous apporte des connaissances pertinentes sur le Tutoriel vidéo JavaScript. Il présente principalement des problèmes liés aux fonctions de flèche, notamment les règles de grammaire, les règles d'abréviation, les applications courantes, etc.
【Recommandations associées : Tutoriel vidéo JavaScript, front-end web】
Dans ES6, il existe une nouvelle abréviation pour les fonctions ----fonction flèche L'émergence de la fonction flèche. non seulement simplifie Une grande quantité de code rend également le code plus élégant et résout également le problème de ce pointage. Expliquons en détail comment jouer avec les fonctions fléchées.
Méthode précédente
function foo1(){}var foo2 = function(name,age){
console.log("函数体代码"，this,arguments);
console.log(name,age);}Écriture complète de la fonction flèche
var foo3 = (name,age) => {
console.log("箭头函数的函数体")
console.log(name,age);}La fonction flèche traverse le tableau
var names = ["abc","cba","nba"];names.forEach(function(item)){
console.log(item);})names.forEach((item,idx,arr)=>{
console.log(item,idx,arr);
} )
setTimeout(()=>{
console.log("setTimeout");},3000)Si la fonction flèche n'a qu'une seule fonction, alors () peut être omis
name.forEach(item =>{console.log(item);}var newNums = nus.filter(item =>{
return item % 2;})S'il n'y a qu'une seule ligne de code d'exécution dans le corps de la fonction, alors {} peut être omis.
names.forEach(item => console.log(item));
varans = worker.filter( item=>item % 2 )
Si la valeur de retour par défaut est un objet, alors cet objet doit ajouter ()
Remarque : dans React Redux est souvent utilisé.
Nous constaterons que lorsque la fonction flèche rencontre simultanément les accolades de l'exécuteur et les accolades de l'objet, la fonction flèche ne peut pas distinguer
var arrFn = () =>{} //此大括号是执行体var arrFn = () =>{ name : "why"}// 此大括号是对象Donc, afin de distinguer l'exécuteur, vous devez ajouter () à l'objet
var arrFn = () =>({ name : "why"})map() est définie dans le tableau de JS. Elle renvoie un nouveau tableau. Les éléments du tableau sont les valeurs traitées par le tableau d'origine après l'appel du. fonction.
À noter : la fonction
array.map(function(currentValue, index, arr), thisIndex)array.map(function(currentValue, index, arr), thisIndex)
参数说明：
例1：对原数组进行平方后赋值给新数组。
let arry = [1,2,3,4];let newArray = array.map((item)=>{
return item*item;})也可以化简成下面一行代码。
let newArray = array.map(item =>item * item)
例2：对原数组的偶数进行平方后赋值给新数组。
filter() 用于对数组进行过滤。
filter把传入的函数依次作用在每一个元素，然后根据返回值是true还是false决定保留还是丢弃元素。Array.filter(function(currentValue, indedx, arr), thisValue)let newArray = array.filter(item=>item%2===0).map(item =>item * item)
let array = [1, 2, 3, 4]; let newArray = array.filter((item,idx)=>idx%2===0).map(item =>item * item)
filter applique tour à tour la fonction transmise à chaque élément, puis décide de conserver ou de supprimer l'élément selon que la valeur de retour est true ou false . 🎜🎜Array.filter(function(currentValue, index, arr), thisValue)🎜🎜🎜Description du paramètre : 🎜🎜🎜function(currentValue, index, arr) : obligatoire 🎜🎜Chaque élément du tableau Chaque élément exécutera cette fonction. 🎜🎜currentValue : obligatoire, indiquant la valeur de l'élément actuel. 🎜🎜index : Facultatif, l'index de l'élément actuel est l'élément du tableau. 🎜🎜arr : Facultatif, l'objet tableau auquel appartient l'élément actuel. 🎜🎜🎜🎜thisValue : Facultatif, l'objet est utilisé comme rappel d'exécution, passé à la fonction et utilisé comme valeur de "this". 🎜🎜var newArray = array.filter((item,idx,arr)=>arr.indexOf(item) === idx)
var ans = arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);
function foo(){
console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaaarray.reduce((pre, cur, index, arr)，init）参数说明：
如果reduce的参数只有一个，那么累计值的初始值是数组的第一个值。
如果reduce的参数有两个，那么积累值初始值就是设置好的 参数init初始值。
在每一次迭代中，返回的值都作为下一次迭代的 pre累计值。
var ans = arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);
普通函数中是有this的标识符
function foo(){
console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaa箭头函数中，压根没有this。
var bar = ()=>{console.log("bar",this)}bar()//windowbar.apply("AAA")//windowconcat（）方法是用于连接两个或多个数组。
var arr = [1, 2, 3, 4]; var arr2 = [7, 8, 9, 10]; var ans = [].concat(arr,arr2); console.log(ans);//输出：(8) [1, 2, 3, 4, 7, 8, 9, 10]
因为箭头函数中没有this的标识符，所以当箭头函数内部开始调用this时。
JavaScript引擎就从作用域由里到外的找含有this指向的作用域。
var obj ={
name:"obj",
foo:function(){
var bar = ()=>{
console.log("bar",this);
}
return bar;
}}所以例子中的 this 指向obj。
var obj ={
name:"obj",
foo:()=>{
var bar =()=>{
console.log("bar:",this);
}
return bar;
}}所以例子中的 this 指向window。
模拟网络发送请求
function request(url,callback){
var res = ["abc","cba","nba"];
callback(res);}因为此时传入 request 的function ，就是 request 定义中的 callback（）。
所以 function 中的参数就是 request 定义中的 res 数组，然后赋值给了 此对象中names
但因为 function 是个回调函数的this 的指向是 window，所以需要在外层的函数中，规定一个_this指向当前对象。
var _this = this;
然后 将获取过来的 res 数组 赋值给 _this 中的names
_this.name = [].concat(ans);
var obj = {
names:[],
network:function(){
var _this = this;
request("/names",function(ans){
_this.name = [].concat(ans);
})}因为箭头函数本身是没有 this的，js引擎会由内往外的找 this的指向。
发现 外层的 函数 this指向obj，于是 this 就指向了 obj。
var obj = {
names:[],
network:function(){
request("/names",(ans)=>{
this.name = [].concat(ans);
})}【相关推荐：javascript视频教程、web前端】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![Développement pratique de l'imitation Meituan APP [Un projet JavaScript incontournable pour les programmeurs front-end]](https://img.php.cn/upload/course/000/000/068/6242bebc05ca9210.png)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
