Contoh kod amalan fungsi anak panah ES6

Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu yang berkaitan dengan penggunaan fungsi anak panah adalah lebih sesuai untuk tempat yang pada asalnya memerlukan fungsi tanpa nama, dan Ia tidak boleh digunakan sebagai pembina. Mari kita lihat. Saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Pengenalan

Sintaks ungkapan fungsi anak panah adalah lebih ringkas daripada ungkapan fungsi dan tidak mempunyai ini, argumen, super atau new.target sendiri. Ungkapan fungsi anak panah lebih sesuai di mana fungsi tanpa nama akan diperlukan, dan ia tidak boleh digunakan sebagai pembina. ---- MDN

Penggunaan asas

Perwakilan parameter

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

Perwakilan nilai pulangan

let add1 = (num1, num2) => {
  num1 + num2
};
let add2 = (num1, num2) => {
  return num1 + num2
};
let add3 = (num1, num2) => (num1 + num2);
let add4 = (num1, num2) => num1 + num2;

console.log(add1(2, 3));  // undefined
console.log(add2(2, 3)); // 5
console.log(add3(2, 3)); // 5
console.log(add4(2, 3)); // 5

Lanjutan

//加括号的函数体返回对象字面量表达式：
let func = () => ({foo: 'bar'})
console.log(func()); // {foo: 'bar'}


//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

ini

Amalan Terbaik

• Jika anda mesti menggunakan fungsi tanpa nama atau fungsi panggil balik dalam talian , menggunakan fungsi anak panah. eslint: prefer-arrow-callback, arrow-spacing

kenapa? fungsi yang dinamakan harus digunakan

// bad[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;});// good[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;});

Jika badan fungsi hanya mempunyai satu pernyataan, dan pernyataan itu tidak akan menghasilkan kesan sampingan. Gunakan borang yang disingkatkan untuk kembali secara tersirat atau gunakan borang penuh untuk kembali secara eksplisit.
• eslint: anak panah-parens, arrow-body-style
  

// bad
[1, 2, 3].map(number => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map(number => `A string containing the ${number}.`);

// good
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map((number, index) => ({
  [index]: number,
}));

// No implicit return with side effects
function foo(callback) {
  const val = callback();
  if (val === true) {
    // Do something if callback returns true
  }
}

let bool = false;

// bad
foo(() => bool = true);

// good
foo(() => {
  bool = true;
});

Apabila ungkapan menduduki berbilang baris, gunakan kurungan untuk meningkatkan kebolehbacaan

mengapa? Permulaan dan penghujung fungsi lebih jelas

// bad['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  ));// good['get', 'post', 'put'].map(httpMethod => (
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  )));

Jika fungsi hanya mempunyai satu parameter, tinggalkan kurungan dan tinggalkan kurungan kerinting. Jika tidak, sentiasa gunakan kaedah penulisan yang lengkap untuk mengekalkan konsistensi. eslint: arrow-parens

// bad[1, 2, 3].map((x) => x * x);// good[1, 2, 3].map(x => x * x);// good[1, 2, 3].map(number => (
  `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`));// bad[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;});// good[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;});

menggunakan sintaks => untuk membezakannya daripada =. eslint: no-confus-arrow

// badconst itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;// badconst itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;// goodconst itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);// goodconst itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;

Kesimpulan mudah

• Fungsi anak panah tidak boleh menggunakan baharu untuk mencipta contoh pembina, fungsi biasa boleh (kerana Apabila fungsi anak panah dicipta, program tidak akan mencipta kaedah binaan untuknya, iaitu, ia tidak mempunyai keupayaan pembinaan dan akan dibuang selepas digunakan Tidak seperti fungsi biasa yang digunakan semula, tidak memerlukan prototaip pembina, yang bermakna atribut prototaip tidak akan dijana secara automatik)

• Atur cara tidak akan mencipta objek argumen untuk fungsi anak panah

• Ini dalam fungsi biasa ialah dinamik, manakala ini dalam fungsi anak panah menunjuk kepada Ia adalah objek yang membalut fungsi anak panah dengan ketat (ditentukan semasa mentakrifkan)

• Fungsi anak panah tidak boleh mengubah nilai ini melalui bind, call, dan gunakan, tetapi ia masih boleh memanggil kaedah ini (Cuma nilai ini tidak dikawal oleh kaedah ini)

[Cadangan berkaitan:

tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Contoh kod amalan fungsi anak panah ES6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!