JS箭头函数 Arrow Function

最新推荐文章于 2022-09-19 17:36:09 发布

原创最新推荐文章于 2022-09-19 17:36:09 发布 · 607 阅读

CC 4.0 BY-SA版权

文章标签：

12 篇文章

订阅专栏

本文深入探讨了ES6中箭头函数的特性与用法，包括语法糖的使用、this绑定规则、以及如何将传统函数转换为箭头函数，旨在帮助开发者掌握更简洁的函数编写技巧。

箭头函数的特点：

//如何将下面的函数改写为箭头函数
function doubleValue(value){
    return value * value;
}

首先要将原来的函数转化成如下函数

// es6规定 const定义的变量不可以修改，而且必须初始化。
const  doubleValue = function (){
        return value * value;
}

改写成箭头函数

// es6规定 const定义的变量不可以修改，而且必须初始化。
const  doubleValue =value =>{
        return value * value;
}

// es6规定 const定义的变量不可以修改，而且必须初始化。
const  gretting =() =>{
    console.log('HELLO WORLD'); 
}    

gretting();

// es6规定 const定义的变量不可以修改，而且必须初始化。
const  gretting =(name) =>{
    
 return 'hello' + name;
}    

console.log(gretting('xx'));

// es6规定 const定义的变量不可以修改，而且必须初始化。
const  addNum=(a,b) =>{
 return a + b;
}    
console.log(addNum(1,2));

将以上函数进一步简化，当括号里只有一个参数时，可以将其去掉（前提是有且仅有一个参数）

// es6规定 const定义的变量不可以修改，而且必须初始化。
const  gretting = name =>{
    
 return 'hello' + name;
}    

console.log(gretting('zs'));

还可以将其简化得到如下一行函数

const  gretting = name => 'hello--' + name;
console.log(gretting('fss'));

参数为数组写法如下

const companies = ['google','huawei'];
const  result = companies.map( company => 'hello---'+ company );
 console.log(result);