Condivisione della tecnologia

Programmazione JavaScript avanzata (quarta edizione) - Funzioni dei record di apprendimento (parte 1)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

funzione

Ogni funzione è un'istanza del tipo Function e Function dispone anche di proprietà e metodi, proprio come gli altri tipi di riferimento. Le funzioni sono oggetti e il nome della funzione è un puntatore all'oggetto funzione e non è necessariamente strettamente legato alla funzione stessa.

Definizione dichiarativa di funzione della definizione di funzione

  1. function sum (n1,n2){
  2. return n1+n2;
  3. }

Espressione di funzione della definizione di funzione

  1. let sum = function(n1,n2){
  2. return n1+n2;
  3. };

funzione freccia di definizione della funzione

  1. let sum = (n1,n2)=>{
  2. return n1+n2;
  3. };

costruttore di definizioni di funzione

  1. let sum = new Function("n1","n2","return n1+n2");
  2. /*这个构造函数接收任意多个字符串参数,
  3. 最后一个参数始终会被当成函数体,
  4. 而之前的参数都是新函数的参数*/

funzione freccia

Le funzioni freccia possono essere utilizzate ovunque sia possibile utilizzare un'espressione di funzione.

  1. let sum = (a,b)=>{
  2. return a+b;
  3. };
  4. let sum1 = function(a,b){
  5. return a+b;
  6. };
  7. //箭头函数适合嵌入函数的场景
  8. let arr = [1,2,3];
  9. console.log(arr.map(function(i) {return i+1;}));
  10. console.log(arr.map((i)=>{return i+1;}));
  11. //二者结果一样,但是箭头函数更为简洁
  12. //如果只有一个参数,括号可以不用。只有没有参数,或者多个参数的情况下,才使用括号
  13. let double = (x)=>{return 2*x;};
  14. let triple = x => {return 3*x};
  15. //箭头函数也可以不使用大括号,但这样会改变函数的行为。使用大括号就说明包含函数体,可以在一
  16. //个函数中包含多条语句,跟常规函数一样。如果不使用,后面只能有一行代码。
  17. let double = (x)=>{return 2*x;};
  18. let triple = x=>3*x;

Sebbene le funzioni freccia abbiano una sintassi semplice, esistono molte situazioni in cui non sono adatte. Le funzioni freccia non possono utilizzare argomenti, super, new.target, né possono essere utilizzate come costruttori. Inoltre, le funzioni freccia non hanno un attributo prototipo.

Parametri nelle funzioni freccia

La funzione è definita utilizzando la sintassi della freccia, quindi non è possibile accedere ai parametri passati alla funzione utilizzando la parola chiave topics, ma è possibile accedervi solo tramite i parametri denominati definiti.

  1. function foo() {
  2. console.log(arguments[0]);
  3. }
  4. foo(5); // 5
  5. let bar = () => {
  6. console.log(arguments[0]);
  7. };
  8. bar(5); // ReferenceError: arguments is not defined

Nome della funzione

Una funzione può avere più nomi.

  1. function sum(num1, num2) {
  2. return num1 + num2;
  3. }
  4. console.log(sum(10, 10)); // 20
  5. let anotherSum = sum;
  6. console.log(anotherSum(10, 10)); // 20
  7. sum = null;
  8. console.log(anotherSum(10, 10)); // 20

Valore del parametro predefinito

È possibile assegnare un valore predefinito a un parametro utilizzando = dopo il parametro nella definizione della funzione.

  1. function makeKing(name = 'Henry') {
  2. return `King ${name} VIII`;
  3. }
  4. console.log(makeKing('Louis')); // 'King Louis VIII'
  5. console.log(makeKing()); // 'King Henry VIII'

I valori predefiniti dei parametri non si limitano ai valori primitivi o ai tipi di oggetto, è possibile utilizzare anche i valori restituiti dalla funzione chiamante

  1. let romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI'];
  2. let ordinality = 0;
  3. function getNumerals() {
  4. // 每次调用后递增
  5. return romanNumerals[ordinality++];
  6. }
  7. function makeKing(name = 'Henry', numerals = getNumerals()) {
  8. return `King ${name} ${numerals}`;
  9. }
  10. console.log(makeKing()); // 'King Henry I'
  11. console.log(makeKing('Louis', 'XVI')); // 'King Louis XVI'
  12. console.log(makeKing()); // 'King Henry II'
  13. console.log(makeKing()); // 'King Henry III'

Espansione e raccolta di parametri

ES6 aggiunge un nuovo operatore di estensione, che può essere utilizzato per gestire e combinare i dati di raccolta in modo molto conciso. Lo scenario più utile per l'operatore spread è l'elenco dei parametri in una definizione di funzione, dove può sfruttare appieno la tipizzazione debole e i parametri di lunghezza variabile del linguaggio. L'operatore di spread può essere utilizzato per passare parametri quando si chiama una funzione o per definire parametri di funzione.

Parametri estesi

  1. let values = [1, 2, 3, 4];
  2. function getSum() {
  3. let sum = 0;
  4. for (let i = 0; i < arguments.length; ++i) {
  5. sum += arguments[i];
  6. }
  7. return sum;
  8. }
  9. //不使用扩展操作符实现累加
  10. console.log(getSum.apply(null,values));
  11. //使用扩展操作符
  12. console.log(getSum(...values));

Raccogli i parametri

Se sono presenti parametri denominati davanti ai parametri raccolti, verranno raccolti solo i parametri rimanenti, in caso contrario verrà ottenuto un array vuoto; Poiché il risultato della raccolta dei parametri è variabile, può essere utilizzato solo come ultimo parametro.

  1. function getProduct(...values,lastValue){}//不可以
  2. function ignoreFirst(firstValue,...values){console.log(values)}//可以
  3. ignoreFirst(); // []
  4. ignoreFirst(1); // []
  5. ignoreFirst(1,2); // [2]
  6. ignoreFirst(1,2,3); // [2, 3]

Dichiarazione di funzione ed espressione di funzione

Prima che venga eseguito qualsiasi codice, il motore JavaScript legge la dichiarazione della funzione e genera la definizione della funzione nel contesto di esecuzione. L'espressione della funzione deve attendere fino all'esecuzione del codice fino alla riga prima che la definizione della funzione venga generata nel contesto di esecuzione.
  1. // 没问题
  2. console.log(sum(10, 10));
  3. function sum(num1, num2) {
  4. return num1 + num2;
  5. }
  6. /*函数声明提升*/
  7. // 会出错
  8. console.log(sum(10, 10));
  9. let sum = function(num1, num2) {
  10. return num1 + num2;
  11. };