ES 6 JavaScript関数詳細

45588 ワード
JavaScript
ES 6 JavaScript関数詳細
  • 、関数概念
  • 1.1関数文法
  • 1.1.1例
  • 1.2関数式
  • 1.2.1匿名関数
  • 1.2.2名前付き関数式-1
  • 1.2.3名前付き関数式-2
  • 1.2.4名前付き関数式-3(再帰関数)
  • 1.3関数/匿名関数/関数表現の違い
  • 1.4高次関数
  • 1.4.1例カウンタカウント
  • 1.4.2例カウンタカウント
  • 、関数パラメータ
  • .一般パラメータ
  • .可変パラメータ
  • .argmentsオブジェクト
  • .パラメータ解
  • 、関数戻り値
  • 3.1表現の値
    • 1、関数概念
    1.1関数文法
    function    （    ）｛
       ;
    return    ;
｝
    1.1.1例
    function add(x, y) {
    return x + y;
};

console.log(add(1, 2))

    Info: Start process (  6:24:17)
3
Info: End process (  6:24:17)
    1.2関数式
  • は、式を用いて関数を定義し、式の関数名は
    • を省略することができる.
  • この関数名が省略されていない場合は、この関数の内部
    • でのみ使用できます.
    1.2.1匿名関数
    const add = function(x, y) {
    return x + y;
};

console.log(add(3, 6));

    Info: Start process (  6:31:51)
9
Info: End process (  6:31:51)
    1.2.2名前付き関数式-1
    const sub = function fn(x, y) {
    return x - y;
};

console.log(sub(3, 2))

    Info: Start process (  6:34:53)
1
Info: End process (  6:34:53)
    1.2.3名前付き関数式-2
    const { fn } = require("jquery");

const sub = function fn(x, y) {
    return x - y;
};

console.log(fn(3, 2))

        ，fn
    1.2.4名前付きの関数式-3(再帰関数)
    const sum = function _sum(n) {
    if (n === 1) {
        return n;
    }
    return n + _sum(--n);   // _sum only uses inside the function
}

console.log(sum(9))

    Info: Start process (  6:39:27)
45
Info: End process (  6:39:28)
    1.3関数/匿名関数/関数式の違い
  • 関数と匿名関数は、本質的には同じ関数オブジェクトです.ただし、関数は自分の識別子・関数名を持っています.匿名関数は他の識別子を借りる必要があります.
  • の違いは、関数会宣言の向上であり、関数式は
    • ではないということです.
    console.log(add(3, 5))   // Output is normal

function add(x, y) {
    return x + y;
};

console.log(sub(5, 3))    // sub is not defined

const sub = function(x, y) {
    return x - y; 
};
    1.4高次関数
  • 高次関数:関数はパラメータとして、または1つのパラメータ
    • を返します.
    1.4.1例-カウンタカウンタカウンター
    const counter = function() {
    let c = 0;
    return function() {
        return ++c;
    };
};

const c = counter()
console.log(c())
console.log(c())
console.log(c())
console.log(c())
console.log(c())

    Info: Start process (  7:27:43)
1
2
3
4
5
Info: End process (  7:27:43)
    1.4.2例-カウンタカウンタカウンタカウンタカウンタ(ジェネレータバージョン)
    const counter = ( function * () {
    let c = 1;
    while (true) {
        yield c++
    }
})()

console.log(counter.next().value)
console.log(counter.next())
console.log(counter.next().value)
console.log(counter.next())
console.log(counter.next().value)

    Info: Start process (  7:33:22)
1
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
5
Info: End process (  7:33:22)
    2、関数パラメータ
    2.1一般パラメータ
  • パラメータは一つの位置を占め、標準パラメータ
    • をサポートします.
  • JSにはPythonのキーワードが含まれていません.
  • JSはパラメータ位置のみの対応をします.
  • JSは、デフォルトパラメータの位置
    • を制限しない.
  • 提案:デフォルトのパラメータは後ろに書いてください.これはいい習慣です.
    const add = (x, y) => x + y
console.log(add(4, 5))

const add2 = (x=6, y) => x + y
console.log(add2())          // NaN  add2(undefined, undefined)
console.log(add2(1))         // NaN  add2(1. undefined)
console.log(add2(y=3, z=2))  // 5 add2(3, 2)
console.log(add2(y=3))       // NaN  add2(3, undefined)

    Info: Start process (  12:53:07)
9
NaN
NaN
5
NaN
Info: End process (  12:53:07)
    2.2可変パラメータ(rest parameters残パラメータ)
  • JSでは…可変パラメータ(Python用*で複数のパラメータを収集)を表します.
    • const sum = function (...args) {
    let result = 0;
    for (let x in args) {
        result += args[x];
        console.log(args[x])
    };
    return result;
};

console.log(sum(1, 2, 3, 4, 5))

    Info: Start process (  1:15:24)
1
2
3
4
5
15
Info: End process (  1:15:24)
    2.3 argmentsオブジェクト
    (function (p1, ...args) {
    console.log(p1);
    console.log(args);
    console.log('='.repeat(55));
    console.log(arguments);
    for (let x in arguments) { 
        console.log(x, arguments[x]);
    };
})('abc', 1, 3, 5)

    Info: Start process (  1:25:17)
abc
[ 1, 3, 5 ]
=======================================================
[Arguments] { '0': 'abc', '1': 1, '2': 3, '3': 5 }
0 abc
1 1
2 3
3 5
Info: End process (  1:25:17)
  • 関数のすべてのパラメータは、オブジェクトのキーのペア
    • に保存されます.
  • ES 6の前に、argmentsは可変パラメータを実現する唯一の
    • である.
  • ES 6が開始された後、推薦しないで、可変パラメータを使用することを提案します.互換性のために
    • を保持します.
  • 矢印関数を使用すると、取ったargmentsは私たちが欲しい
    • ではないことに注意してください.
    ((x, ...args) => {
    console.log(args);         //   
    console.log(x);
    // console.log(arguments);  //       
})(...[1, 2, 3]);

    Info: Start process (  1:28:41)
[ 2, 3 ]
1
Info: End process (  1:28:41)
    2.4パラメータ解凍
  • とPythonは類似しています.JSはパラメータ解を提供していますが、依然として…記号を使用して構成を解除しています.
  • JS解凍後の値の個数は不要であり、パラメータ個数に対応する
    • .
    const add = (x, y) => {console.log(x, y); return(x + y)};

console.log(add(...[100, 200]))
console.log(add(...[100, 1, 2, 3]))
console.log(add(...[555]))

    Info: Start process (  1:32:10)
100 200
300
100 1
101
555 undefined
NaN
Info: End process (  1:32:10)
    3、関数の戻り値
  • Pythonでは、return 1, 2を使用して多値に戻すことができ、本質的には一つの値であり、一つの元
    • である.
  • JSで多値を返したら最後の値
    • だけ戻ります.
    const add = (x, y) => {return x, y};
const add2 = (x, y, z) => {return x, y, z};

console.log("add:", add(1, 2))
console.log("add2:", add2(1, 2, 3))

    Info: Start process (  1:38:28)
add: 2
add2: 3
Info: End process (  1:38:28)
    3.1表式の値
  • 種類のCの言語には、一つの概念—表現の値
    • があります.
  • 割当表現の値:等号右の値
  • カンマ表現の値:クラスC言語は、カンマ表現、カンマ表現の値をサポートします.最後の表現の値です.
    • a = (x = 5, y = 6, true)
console.log(a)

b = (123, true, z = 'test');
console.log(b)

function c() {
    return x = 5, y = 6, true, 'ok'
};
console.log(c())

console.log((1, 2, 3))

    Info: Start process (  1:53:44)
true
test
ok
3
Info: End process (  1:53:44)
    PHPがPowerPoint 007文書を作成する方法