JavaScriptでアロー関数を使用する方法

この記事では、JavaScript ビデオ チュートリアル に関する関連知識を提供します。主に、文法規則、略語規則、一般的なアプリケーションなど、アロー関数に関する関連問題を紹介します。一緒に見てみましょう。皆様のお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]

アロー関数

ES6 では、関数の新しい省略方法であるアロー関数が追加されました。アロー関数の登場により、多くのコードが簡素化されるだけでなく、コードの見た目もよりエレガントになり、このポインティングの問題も解決されます。アロー関数の使い方を説明します。

文法規則

• 前のメソッド

function foo1(){}var foo2 = function(name,age){
	console.log("函数体代码"，this,arguments);
  console.log(name,age);}

• アロー関数の完全な書き方

#

var foo3 = (name,age) => {
	console.log("箭头函数的函数体")
  console.log(name,age);}

• #アロー関数は配列を走査します
  #Once 書き方

• 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)

省略規則

アロー関数の関数が 1 つだけの場合、() は省略できます

• name.forEach(item =>{console.log(item);}

filter () をアロー関数と組み合わせると、条件を満たす数値を効率的に除外できます。

• #

  var newNums = nus.filter(item =>{
    return item % 2;})

#関数本体に実行コードが 1 行しかない場合は、{} を省略できます。

• このコード行の戻り値は関数全体の戻り値として使用されるため、return

  names.forEach(item => console.log(item));

• を追加する必要はありません。 filter() 関数は 1 行で実行されます。直接省略できます。{}

varans = worker.filter( item=>item % 2 )

デフォルトの戻り値がオブジェクトの場合、これはオブジェクトを追加する必要があります ()

• #注: React の redux でよく使用されます。 アロー関数がエグゼキュータの中括弧とオブジェクトの中括弧に同時に遭遇した場合、アロー関数は

  var arrFn = () =>{} //此大括号是执行体

  var arrFn = () =>{ name : "why"}// 此大括号是对象

  を区別できないことがわかります。したがって、エグゼキュータを区別するには、次のようにする必要があります。 add() をオブジェクトに追加します

var arrFn = () =>({ name : "why"})

一般的なアプリケーション

map

map() メソッドは JS の Array で定義されており、新しい配列を返します。配列内の要素は、関数を呼び出す元の配列です。

注目に値する:

map() 関数は空の配列を検出しません。 map() 関数は元の配列を変更せず、新しい配列を形成します。

array.map(function(currentValue,index,arr),thisIndex)
• パラメータの説明:
• function( currentValue、index、arr): 必須

この関数は、配列内の各要素に対して実行されます。

currentValue: 必須。現在の要素の値を示します。

• index: オプション。現在の要素のインデックスは配列要素です。
  • arr: オプション。現在の要素が属する配列オブジェクト。
  • thisValue: オプション。オブジェクトは実行コールバックとして使用され、関数に渡され、「this」の値として使用されます。
  • 例 1: 元の配列を 2 乗し、それを新しい配列に代入します。

  let arry = [1,2,3,4];let newArray = array.map((item)=>{
    return item*item;})

は、次のコード行に簡略化することもできます。

• let newArray = array.map(item =>item * item)

例 2: 元の配列の偶数を 2 乗し、新しい配列に割り当てます。

filter

filter() は配列をフィルタリングするために使用されます。

原理は、新しい配列を作成し、条件を満たす指定された配列内のすべての要素をチェックすることによって新しい配列の要素をチェックするということです。

filter

渡された関数を各要素に順番に適用し、戻り値が

true
• か ## かに基づいて要素を保持するか破棄するかを決定します。 ＃間違い＃＃＃ 。
• Array.filter(function(currentValue, indedx, arr), thisValue)パラメータの説明:
• function( currentValue、index、arr): 必須 この関数は、配列内の各要素に対して実行されます。

currentValue: 必須。現在の要素の値を示します。

index: オプション。現在の要素のインデックスは配列要素です。

• arr: オプション。現在の要素が属する配列オブジェクト。
  • thisValue: オプション。オブジェクトは実行コールバックとして使用され、関数に渡され、「this」の値として使用されます。

  • let newArray = array.filter(item=>item%2===0).map(item =>item * item)

  例 3: 元の配列の偶数の添え字を 2 乗し、新しい配列に割り当てます。

  •   let array = [1, 2, 3, 4];
      let newArray = array.filter((item,idx)=>idx%2===0).map(item =>item * item)

  例 4: arr パラメーターを賢く使用して配列の重複を排除します。

  var newArray = array.filter((item,idx,arr)=>arr.indexOf(item) === idx)

例 2: 元の配列の偶数を 2 乗した後の累積和を求めます。

• reduce

  • 用于遍历数组，可以设置初始值，大大增强了代码的可读性，同时还有一个参数可以做累计计算。
  • array.reduce((pre, cur, index, arr)，init）

  参数说明：

  • function（(pre, cur, index, arr)）：必填
    • pre: 必填，积累值
    • cur： 必填。当前元素。
    • index： 可选。当前下标。
    • arr： 可选。当前数组。
  • init: 可选。传递给函数的初始值，但传入参数为两个时，init 是累计值 pre的初始值。

  如果reduce的参数只有一个，那么累计值的初始值是数组的第一个值。

  如果reduce的参数有两个，那么积累值初始值就是设置好的 参数init初始值。

  在每一次迭代中，返回的值都作为下一次迭代的 pre累计值。

  var ans = arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);

  箭头函数中的this使用

  普通函数中是有this的标识符

  function foo(){
  	console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaa

  箭头函数中，压根没有this。

  var bar = ()=>{console.log("bar",this)}bar()//windowbar.apply("AAA")//window

  concat

  concat（）方法是用于连接两个或多个数组。

  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的标识符，所以当箭头函数内部开始调用this时。

  JavaScript引擎就从作用域由里到外的找含有this指向的作用域。

  var obj ={
  	name:"obj",
    foo:function(){
      var bar = ()=>{
        console.log("bar",this);
      }
      return bar;
    }}

  • 第一层 bar箭头函数：没有。
  • 第二层 function 函数：指向obj。

  所以例子中的 this 指向obj。

  var obj ={
  	name:"obj",
    foo:()=>{
    	var bar =()=>{
        console.log("bar:",this);
      }
      return bar;
    }}

  • 第一层 bar箭头函数：没有。
  • 第二层 foo箭头函数：没有。
  • 第三层 全局作用域：指向window。

  所以例子中的 this 指向window。

  模拟网络发送请求

  • 封装 request 工具函数

  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前端】

以上がJavaScriptでアロー関数を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。