พวกเขากลายเป็นแฟชั่นมากเราเห็นพวกเขาในบทความใหม่ทั้งหมด และถ้าคุณไม่คุ้นเคยกับมัน คุณจะมีปัญหาในการทำความเข้าใจโค้ดสมัยใหม่ (ES6) ที่มีฟังก์ชันลูกศร

บทความนี้ไม่ได้มีวัตถุประสงค์เพื่อบอกคุณว่าจะใช้เมื่อใดหรืออย่างไร ฉันจะพยายามอธิบายไวยากรณ์ใหม่สำหรับผู้ที่เห็นเป็นครั้งแรก ไม่ว่าคุณจะใช้มันหรือไม่นั้นไม่สำคัญ แต่ไม่ช้าก็เร็วคุณก็ยังต้องเผชิญกับมันที่ไหนสักแห่ง ดังนั้นจึงเป็นการดีกว่าที่จะเข้าใจกลไกของไวยากรณ์ใหม่นี้

นี่เป็นตัวอย่างเล็กๆ น้อยๆ:

Const addOne = function(n) ( ส่งคืน n + 1; )

โค้ดด้านบนสามารถเขียนได้ดังนี้:

Const addOne = (n) => ( ส่งคืน n + 1; )

หรือในกรณีนี้ให้สั้นกว่านั้น:

Const addOne = (n) => n + 1;

ตัวอย่างที่สองใช้เครื่องหมายปีกกา ( ... ) แต่เนื่องจากโค้ดเป็นเพียงบรรทัดเดียว คุณจึงสามารถละเว้นเครื่องหมายปีกกาและส่งคืนได้ ดังที่เห็นในตัวอย่างที่สาม

หนึ่งพารามิเตอร์

เมื่อฟังก์ชันลูกศรมีพารามิเตอร์ตัวเดียว คุณสามารถละเว้นวงเล็บได้:

// เคยเป็น: someCallBack((ผลลัพธ์) => ( ... )) // ตอนนี้: someCallBack(ผลลัพธ์ => ( ... ))

แต่หากไม่มีพารามิเตอร์ คุณต้องใช้วงเล็บเปิดและปิด:

SomeCallBack(() => ( ... ))

ฟังก์ชั่นการโทรกลับ

ลูกศรฟังก์ชั่นมีประโยชน์อย่างยิ่งสำหรับการโทรกลับ ผู้ที่คุ้นเคยกับ JavaScript จะคุ้นเคยกับขอบเขตคำศัพท์ซึ่งค่อนข้างเรียบร้อย แต่สามารถใช้เทคนิคเช่นนี้ได้ ( นี้):

Var_this = นี่; someCallBack(ฟังก์ชั่น() ( _this.accessOuterScope(); ))

"_this" นี้มีหลายรูปแบบ (เช่น "self" หรือ "that") แต่แนวคิดก็เหมือนกัน ในฟังก์ชันการโทรกลับ เราจำเป็นต้องเข้าถึงเวอร์ชันขอบเขตภายนอก แต่แนวคิดก็เหมือนกัน ในฟังก์ชันการโทรกลับ เราจำเป็นต้องเข้าถึงเวอร์ชันของขอบเขตภายนอกของ this ซึ่งแตกต่างจากเมื่อก่อนเนื่องจากเรากำลังพูดถึงฟังก์ชันการโทรกลับ

โดยใช้ ฟังก์ชั่นลูกศรเราได้รับ "ขอบเขตบล็อก" และ "สิ่งนี้" ซึ่งเหมือนกัน "สิ่งนี้" ในทั้งสองกรณี ซึ่งหมายความว่าโค้ดด้านบนสามารถเขียนใหม่ได้โดยไม่ต้อง _this = this:

SomeCallBack(() => ( this.accessOuterScope(); ))

"กระดาษห่อ"

ลองนึกภาพสถานการณ์เหมือนใน React ว่าเหตุการณ์ไหน เมื่อคลิกควรเรียก doSomething() , () แต่ควรส่งผ่านข้อโต้แย้งไปยัง doSomething() (เช่น ID) ตัวอย่างนี้ใช้ไม่ได้จริง:

ผู้ใช้บางคน) ))

โค้ดจะทำงาน แต่ในทางเทคนิคแล้วจะเรียก doSomething() ทันทีเมื่อโหลดหน้าเว็บ เพื่อแก้ไขปัญหานี้ นักพัฒนาบางคนอ้างถึงฟังก์ชัน wrapper:

ผู้ใช้ Const = React.createClass(function() ( render: function() ( return ผู้ใช้บางคน), onClick: function() ( doSomething(this.props.userId); ) ))

การไม่มีวงเล็บใน this.onClick หมายความว่าเป็นเพียงการอ้างอิงฟังก์ชัน ไม่ใช่การเรียกใช้ฟังก์ชัน

ตอนนี้ฟังก์ชัน onClick() กลายเป็นสิ่งห่อหุ้มสำหรับ doSomething() ด้วยฟังก์ชันลูกศร คุณสามารถสร้าง "ตัวห่อ" ประเภทนี้ได้:

ผู้ใช้ Const = React.createClass(function() ( render: function() ( return doSomething(this.props.userId))>ผู้ใช้บางคน ) ))

อีกทางเลือกหนึ่ง เรายังสามารถใช้ .bind() ซึ่งไม่ต้องใช้ wrappers ใด ๆ (ฟังก์ชันลูกศรหรืออะไรก็ตาม):

ผู้ใช้ Const = React.createClass(function() ( render: function() ( return some user ) ))

รองรับเบราว์เซอร์สำหรับฟังก์ชั่นลูกศร

หากคุณต้องการการสนับสนุนเบราว์เซอร์อื่นนอกเหนือจาก เวอร์ชันล่าสุด โครเมียมและ ไฟร์ฟอกซ์, ใช้ บาเบล ทรานสปิเลอร์เพื่อแปลงโค้ด ES6 ที่คุณเขียนเป็น ES5

ES6 มีวิธีใหม่ในการสร้างฟังก์ชัน - การใช้ตัวดำเนินการ Arrow => ฟังก์ชันดังกล่าวเรียกว่าฟังก์ชันลูกศร พวกเขามีไวยากรณ์ที่กะทัดรัดมากขึ้น พวกเขาไม่มีชื่อและทำงานแตกต่างออกไปในเรื่องนี้

สิ่งแรกที่เราจะทำคือเรียกใช้สคริปต์ Babel ที่จะตรวจสอบไฟล์และสร้างเวอร์ชันใหม่เมื่อมีการเปลี่ยนแปลง

เปิดโฟลเดอร์โครงการใน บรรทัดคำสั่ง(KS) ป้อนคำสั่ง:

และกด Enter

ในโฟลเดอร์ src เราจะสร้างไฟล์ arr.js และระบุไฟล์นั้นในไฟล์ index.html ทันที

</สคริปต์>

เบราว์เซอร์เวอร์ชันล่าสุดรองรับฟังก์ชันลูกศรโดยไม่มีการแปลง และเบราว์เซอร์ของฉันก็เป็นหนึ่งในนั้น

ลองเขียนฟังก์ชันที่บวกตัวเลขสองตัวแล้วส่งกลับผลรวมของมัน ลองเรียกฟังก์ชัน add กัน

ฟังก์ชั่นเพิ่ม (x, y) ( return x + y; ) console.log (เพิ่ม (3, 6));

ในคอนโซลเราจะเห็นผล - 9

ทีนี้ มาแปลงฟังก์ชันนี้เป็นฟังก์ชันลูกศรกัน

ลองลบคำว่า function ลบชื่อฟังก์ชันและลบเครื่องหมายปีกกาออก และคำว่า - return หลังจากพารามิเตอร์เราจะใส่ลูกศร

ให้เพิ่ม = (x, y) => x + y; console.log(เพิ่ม(4, 6));

หากคุณดูประเภทของตัวแปร add โดยใช้ตัวดำเนินการ typeof:

Console.log(ประเภทของ (เพิ่ม));

นี่คือสิ่งที่เราจะเห็นในคอนโซลฟังก์ชัน

ซึ่งหมายความว่าฟังก์ชันลูกศรเป็นฟังก์ชันปกติ และคุณสามารถตรวจสอบได้โดยดูที่โค้ดที่แปลงแล้ว

"ใช้อย่างเข้มงวด"; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "สัญลักษณ์" ? ฟังก์ชั่น (obj) ( return typeof obj; ) : function (obj) ( return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "สัญลักษณ์" : typeof obj ; ); var add = ฟังก์ชั่น add(x, y) ( return x + y; ); console.log(เพิ่ม(4, 6)); console.log(ประเภทของการเพิ่ม === "ไม่ได้กำหนด" ? "ไม่ได้กำหนด" : _typeof(เพิ่ม));

เราจะเห็นได้ว่า Babel ได้เปลี่ยนโค้ดของเราให้เป็นนิพจน์ฟังก์ชันง่ายๆ

ลองเขียนฟังก์ชันง่ายๆ ที่จะยกกำลังสองให้กับตัวเลขที่กำหนด

ให้เพิ่ม = (x, y) => x + y; console.log(เพิ่ม(4, 6)); console.log(ประเภทของ(เพิ่ม)); ให้ square = function(a) ( return a * a; ) console.log(square (4));

ลองดูในคอนโซล:

ฟังก์ชั่นลูกศรจะมีลักษณะดังนี้:

ให้กำลังสอง = x => x * x;

หากฟังก์ชันลูกศรใช้พารามิเตอร์เพียงตัวเดียว ก็ไม่จำเป็นต้องใส่ไว้ในวงเล็บ!

มาเขียนฟังก์ชันที่ไม่รับพารามิเตอร์เลย

ฟังก์ชั่น givNumer () ( ส่งคืน 33; ) console.log(givNumer ());

ฟังก์ชั่นนี้เพียงพิมพ์หมายเลข 33 ไปยังคอนโซล ลูกศร:

ให้ givNumer = () => 33; console.log(givNumer());

มาสร้างฟังก์ชั่นที่จะไม่ส่งคืนอะไรเลย มันจะแสดงข้อความในคอนโซลของเบราว์เซอร์

ให้ log = function () ( console.log("Hello World!"); ); บันทึก();

สวิตช์:

ให้ log = () => console.log("Hello World!!!"); บันทึก();

มาสร้างฟังก์ชันที่เนื้อหาจะประกอบด้วยสองบรรทัดกัน

ฟังก์ชันจะใช้พารามิเตอร์สองตัว มาสร้างตัวแปรในส่วนเนื้อหาของฟังก์ชันกันดีกว่า หลังจากนั้นเราจะคืนผลลัพธ์

ให้ mult = function (a, b) ( ให้ result = a * b; return result; ) console.log(mult (4, 5));

หากฟังก์ชันลูกศรมีหลายบรรทัด จำเป็นต้องมีเครื่องหมายปีกกา - ()! และต้องแน่ใจว่าได้กำหนดสิ่งที่ฟังก์ชันนี้ส่งคืนโดยใช้คีย์เวิร์ด return

สวิตช์:

ให้ mult = (a, b) => ( ให้ผลลัพธ์ = a * b; return result; ) console.log(mult (4, 5));

ตอนนี้เรามาสร้างฟังก์ชันที่ส่งคืนค่าตามตัวอักษรของวัตถุ:

ให้ตัวอักษร = ฟังก์ชั่น () ( กลับ ( ชื่อ: "จอห์น"); ) console.log (ตัวอักษร ());

ในคอนโซลเราจะเห็น:

ตอนนี้เรามาลองสร้างฟังก์ชันลูกศรที่จะส่งคืนค่าตัวอักษรของวัตถุ

ควรจำไว้ว่าหากฟังก์ชันลูกศรส่งคืนค่าตัวอักษรของวัตถุ ก็จำเป็นต้องมีวงเล็บ - ()

ฟังก์ชั่นลูกศรส่งคืนวัตถุตามตัวอักษร:

ให้ตัวอักษร = () => ((ชื่อ: "จอห์น")); console.log(ตัวอักษร());

ตอนนี้เรามาลองใช้ฟังก์ชันลูกศรเป็น IIFE - นิพจน์ฟังก์ชันที่เรียกใช้ทันที

กล่าวโดยสรุป นี่คือฟังก์ชันที่จะดำเนินการทันทีหลังจากการประกาศ

ดูเหมือนว่านี้:

(ฟังก์ชั่น () ( console.log("IIFE"); ))();

ฟังก์ชันลูกศร IIFE จะมีลักษณะดังนี้:

(() => console.log("IIFE"))();

คุณลักษณะที่สำคัญของฟังก์ชันลูกศรคือลูกศรจะต้องอยู่หลังพารามิเตอร์ทันที!

คุณไม่สามารถรับมันและเลื่อนลงไปที่บรรทัดด้านล่างได้ มันจะทำให้เกิดข้อผิดพลาด!

การประยุกต์ใช้ฟังก์ชันลูกศรในทางปฏิบัติ ฟังก์ชั่นลูกศรใช้งานได้สะดวกมากกับอาร์เรย์

มาสร้างอาร์เรย์ด้วยตัวเลขแล้วเรียกมันว่าตัวเลข ฉันคิดว่าคุณรู้ว่าอาร์เรย์มีวิธีการที่เป็นประโยชน์ที่ช่วยให้คุณสามารถวนซ้ำอาร์เรย์ กรองมัน ฯลฯ

ลองคำนวณผลรวมของตัวแปรอาร์เรย์ทั้งหมด เมื่อต้องการทำสิ่งนี้ ฉันจะประกาศตัวแปรอื่น - ให้ผลรวม = 0;

ลองใช้เมธอด forEach() ที่ทุกอาร์เรย์มี เราจะวนซ้ำองค์ประกอบต่างๆ แล้วบวกเข้ากับผลรวม

ให้ตัวเลข = ; ให้ผลรวม = 0; number.forEach(ฟังก์ชั่น(ตัวเลข) ( ผลรวม += num; )); console.log(ผลรวม);

ในคอนโซลเราจะเห็น 55 มาเปลี่ยนฟังก์ชันนี้เป็นฟังก์ชันลูกศรกัน: number.forEach(num => sum += num); console.log(ผลรวม);

ดังนั้นสิ่งที่ก่อนหน้านี้พาเราไปสามบรรทัด ตอนนี้กลับกลายเป็นหนึ่ง

นอกจากนี้เรายังสามารถยกกำลังสองแต่ละองค์ประกอบของอาร์เรย์ได้อีกด้วย

ให้กำลังสอง = number.map(n => n * n); console.log (กำลังสอง);

ฟังก์ชั่นลูกศรและสิ่งนี้ เมื่อต้องการทำเช่นนี้ ฉันจะสร้างวัตถุตามตัวอักษรที่ฉันจะบันทึกไว้ในตัวแปรบุคคล

วัตถุบุคคลจะมีคุณสมบัติชื่อที่มีค่า 'Bob' และคุณสมบัติทักทายที่มีค่า 'Greet' เราจะพิมพ์คำทักทายไปที่คอนโซลและดูวัตถุประสงค์ของสิ่งนี้ด้วย

ให้บุคคล = ( ชื่อ: "Bob" ทักทาย: function () ( console.log("Hello! My name is " + this.name); console.log(this); ) ); คน.ทักทาย();

ในคอนโซลของเบราว์เซอร์ เราจะเห็นคำทักทายและวัตถุของบุคคลนั้นเอง

ตอนนี้เราจะแทนที่ฟังก์ชันด้วยลูกศรแล้วดูว่าเกิดอะไรขึ้นกับสิ่งนี้

ให้คน = ( ชื่อ: "Bob", ทักทาย: () => ( console.log("Hello! My name is " + this.name); console.log(this); ) ); คน.ทักทาย();

ตอนนี้เราไม่ได้รับค่าของ name และค่าของสิ่งนี้คือ window !

แต่ทำไม? ประเด็นก็คือค่าของสิ่งนี้นำมาจากบริบทที่มีการประกาศฟังก์ชัน ! ไม่ว่าฟังก์ชั่นนี้จะดำเนินการที่ไหนก็ตาม สิ่งนี้สามารถเห็นได้ในภาพ:

เรามีโปรแกรม.

จนถึงขณะนี้ไม่มีอะไรอยู่ในนั้นยกเว้นวัตถุหน้าต่าง เพิ่มวัตถุบุคคล โปรดสังเกตว่าเราใช้ฟังก์ชันลูกศรสำหรับวิธีการนี้ ดังที่เราได้กล่าวไว้ คุณค่าของสิ่งนี้จะถูกพรากไปจากบริบท บริบทคือสภาพแวดล้อม ในกรณีนี้ สภาพแวดล้อมของวัตถุบุคคล คุณสมบัติและวิธีการทั้งหมดจะเป็นเช่นนั้น วัตถุหน้าต่าง. และถ้าค่าของสิ่งนี้ถูกนำมาจากบริบท ค่านี้จะอ้างอิงถึงวัตถุหน้าต่าง

หากเราดูที่ฟังก์ชันปกติ เราจะรู้ว่าสิ่งนี้หมายถึงอ็อบเจ็กต์บุคคลนั้นเอง คุณอาจถามว่าทำไมค่าของสิ่งนี้ในฟังก์ชันลูกศรจึงถูกนำมาจากบริบท และคำตอบนั้นง่ายมาก - พวกเขาทำแบบนั้น! :-) ประเด็นก็คือฟังก์ชันลูกศรถูกสร้างขึ้นเพื่อแก้ไขปัญหาในสถานการณ์ที่แตกต่างกัน ลองดูตัวอย่าง หากต้องการดูปัญหา เราจะกลับไปที่ฟังก์ชันลูกศรของเรา

ให้บุคคล = ( ชื่อ: "Bob" ทักทาย: function () ( console.log("Hello! My name is " + this.name); console.log(this); ) );

ลองจินตนาการว่า Bob ของเราค่อนข้างยุ่งและต้องใช้เวลาสองสามวินาทีในการทำงานให้เสร็จ รอ 2 วินาที เราจำลองโดยใช้ฟังก์ชัน setTimeout() . ฟังก์ชันนี้รับฟังก์ชันเป็นพารามิเตอร์แรกและจำนวนมิลลิวินาทีเพื่อรอเป็นพารามิเตอร์ตัวที่สอง

ให้บุคคล = ( ชื่อ: "Bob" ทักทาย: function () ( setTimeout(function () ( console.log("Hello! My name is " + this.name); console.log(this); ), 2000) ; ) ); คน.ทักทาย();

หากคุณมีประสบการณ์กับ JavaScript ฉันคิดว่าคุณเข้าใจว่าปัญหาคืออะไร อย่างไรก็ตามเรามาดูกันว่าจะเกิดอะไรขึ้นในเบราว์เซอร์ อีกสองวินาทีต่อมาเราจะเห็นภาพนี้ในเบราว์เซอร์

แต่ทำไม? หากคุณดูโค้ดของเรา ก็ถือว่าสมเหตุสมผล ว่าสิ่งนี้หมายถึงวัตถุบุคคลเนื่องจากเราใช้ฟังก์ชันปกติ สิ่งนี้คือ setTimeout() เป็นของวัตถุหน้าต่าง ถ้าคุณเขียนแบบนี้: window.setTimeout() แล้วคุณคิดว่าสิ่งนี้หมายถึงอะไร? และในคอนโซลเราจะได้ผลลัพธ์เดียวกัน! มีหลายวิธีในการแก้ปัญหานี้ใน ES5 เราจะดูตัวแปรที่พบบ่อยที่สุด: ก่อน setTimeout() ฉันจะประกาศตัวแปรอื่นและกำหนดค่านี้เป็นค่า และตอนนี้ ในส่วนของฟังก์ชัน แทนที่จะเป็นสิ่งนี้ เราจะระบุสิ่งนั้น

ให้บุคคล = ( ชื่อ: "Bob" ทักทาย: function () ( ให้นั่น = สิ่งนี้; setTimeout(function () ( console.log("Hello! My name is " + that.name); console.log(that) ; ), 2000); ) ); คน.ทักทาย();

ต้องขอบคุณการปิดนี้ ฟังก์ชันที่เราส่งไปยัง setTimeout() จะสามารถเข้าถึงตัวแปรซึ่งค่าของตัวแปรจะเป็นดังนี้ ซึ่งในกรณีนี้คือวัตถุบุคคล

เพื่อความชัดเจน คุณสามารถดูได้ว่าสิ่งนี้และสิ่งนี้หมายถึงอะไร

ให้บุคคล = ( ชื่อ: "Bob" ทักทาย: function () ( ให้นั่น = สิ่งนี้; setTimeout(function () ( console.log("Hello! My name is " + that.name); console.log("It is my That = " + that); console.log("It is my This = " + this); ), 2000); ) ); คน.ทักทาย();

เราจะเห็นการยืนยันในคอนโซล:

เราเห็นว่านี่จะเป็นวัตถุหน้าต่าง - This = และนั่นจะเป็นวัตถุบุคคลของเรา - That =

ใน ES6 เราสามารถใช้ฟังก์ชันลูกศรเพื่อแก้ไขปัญหานี้ได้

ให้บุคคล = ( ชื่อ: "Bob" ทักทาย: function () ( setTimeout(() => ( console.log("Hello! My name is " + this.name); console.log("It is my This = " + นี้); ), 2000); ) ); คน.ทักทาย();

ด้วยเหตุนี้เราจะเห็นในคอนโซล:

ใน ตัวอย่างกราฟิกสำหรับฟังก์ชันลูกศร บริบทจะเป็นวัตถุบุคคล ไม่ใช่วัตถุหน้าต่าง นั่นเป็นเหตุผลที่สิ่งนี้จะอ้างถึงบุคคล

นอกจากไวยากรณ์ที่กะทัดรัดแล้ว ยังมีการนำฟังก์ชันลูกศรมาใช้เพื่อแก้ปัญหาเช่นนี้

เพื่อเป็นข้อมูลอ้างอิง คุณสามารถดูว่า Babel แก้ไขปัญหานี้ได้อย่างไร

Var person = ( ชื่อ: "Bob", ทักทาย: function wait() ( var _this = this; setTimeout(function () ( console.log("Hello! My name is " + _this.name); console.log(" มันคือ This = " + _this); ), 2000); ) ); คน.ทักทาย(); Babel ใช้วิธีการเดียวกับที่เราใช้ใน ES5 ข้อแตกต่างเพียงอย่างเดียวคือเราเรียกตัวแปรนั้น และ Babel เรียกมันว่า - _this ต้องขอบคุณการปิดนี้ ฟังก์ชันที่เราส่งไปยัง setTimeout จะสามารถเข้าถึงตัวแปร _this และส่งผลให้เข้าถึงอ็อบเจ็กต์บุคคลได้

ฉันคิดว่าส่วนที่ยากที่สุดของส่วนนี้คือการทำความเข้าใจว่าการปิดทำงานอย่างไร

คุณสมบัติเพิ่มเติมของฟังก์ชันลูกศร:
คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ ES6 และฟังก์ชั่นลูกศรได้ในโพสต์ของฉัน

สวัสดีทุกคน! ในบทความนี้ เราจะมาดูกันว่าฟังก์ชันลูกศรใน ES6 มีอะไรบ้าง และใช้งานอย่างไร

ฟังก์ชันลูกศรคือฟังก์ชันที่เขียนโดยใช้ตัวดำเนินการลูกศร (=>)

ลองดูตัวอย่างทันที:

ให้เพิ่ม = (x, y) => x + y;
console.log(เพิ่ม(5, 2));

จากการเรียกใช้ฟังก์ชันนี้เราจะเห็นหมายเลข 7 ในคอนโซล

ขั้นแรก เราส่งอาร์กิวเมนต์ในวงเล็บ จากนั้นเราใส่เครื่องหมายลูกศร จากนั้นเราเขียนโค้ดของฟังก์ชันเอง ในกรณีของเรา เพียงแค่ใช้ตัวเลขสองตัวแล้วบวกเข้าด้วยกัน ตามทฤษฎีแล้ว สิ่งนี้จะเหมือนกับนิพจน์ฟังก์ชันใน ES5 หากคุณใช้ Babel หรือคอมไพเลอร์ที่คล้ายกัน พวกเขามักจะเขียนดังนี้:

Var เพิ่ม = ฟังก์ชั่น เพิ่ม(x, y) (
กลับ x + y;
};

หากฟังก์ชันของคุณใช้พารามิเตอร์เพียงตัวเดียว วงเล็บจะเป็นทางเลือก

ให้กำลังสอง = x => x*x;

ฟังก์ชันนี้รับเพียงหนึ่งอาร์กิวเมนต์และยกกำลังสองตามจำนวนที่กำหนด

ฟังก์ชั่นที่ไม่มีพารามิเตอร์:

ให้ func = () => 77;

หากฟังก์ชันของคุณมีหลายบรรทัด ประการแรก คุณต้องใช้เครื่องหมายปีกกา และประการที่สอง ต้องแน่ใจว่าได้เขียนสิ่งที่ฟังก์ชันส่งคืนมา เช่น ใช้คีย์เวิร์ดส่งคืน

ให้คูณ = (x, y) => (
ให้ผลลัพธ์ = x*y;
ส่งคืนผลลัพธ์;
};

หากคุณต้องการส่งคืนอ็อบเจ็กต์ตามตัวอักษร คุณจะต้องใส่ไว้ในวงเล็บ:

ให้ getObject = () => (( ยี่ห้อ: "BMW" ));

ฟังก์ชันเรียกตัวเองมีลักษณะดังนี้:

นิพจน์ฟังก์ชันลูกศรเป็นทางเลือกที่มีขนาดกะทัดรัดทางวากยสัมพันธ์แทนนิพจน์ฟังก์ชันปกติ แม้ว่าจะไม่มีการเชื่อมโยงกับคีย์เวิร์ด this , อาร์กิวเมนต์ , super หรือ new.target ก็ตาม นิพจน์ฟังก์ชันลูกศรไม่เหมาะกับวิธีการ และไม่สามารถใช้เป็นตัวสร้างได้

ไวยากรณ์ ไวยากรณ์พื้นฐาน (param1, param2, …, paramN) => ( คำสั่ง ) (param1, param2, …, paramN) => นิพจน์ // เทียบเท่ากับ: => ( นิพจน์ส่งคืน; ) // วงเล็บเป็นทางเลือกเมื่อมี" ชื่อพารามิเตอร์เดียวเท่านั้น: (singleParam) => ( คำสั่ง ) singleParam => ( คำสั่ง ) // รายการพารามิเตอร์สำหรับฟังก์ชันที่ไม่มีพารามิเตอร์ควรเขียนด้วยวงเล็บคู่ () => ( คำสั่ง ) ไวยากรณ์ขั้นสูง // วงเล็บเนื้อหาของฟังก์ชันเพื่อส่งคืนนิพจน์ตามตัวอักษรของวัตถุ: params => ((foo: bar)) // รองรับพารามิเตอร์ส่วนที่เหลือและพารามิเตอร์เริ่มต้น (param1, param2, ...rest) => ( คำสั่ง ) (param1 = defaultValue1, param2, …, paramN = defaultValueN) => ( คำสั่ง ) // รองรับการทำลายโครงสร้างภายในรายการพารามิเตอร์ด้วย var f = ( = , (x: c) = (x: a + b)) => a + b + c; f(); // 6 คำอธิบาย

ปัจจัยสองประการที่มีอิทธิพลต่อการแนะนำฟังก์ชันลูกศร: ความจำเป็นในการใช้ฟังก์ชันที่สั้นกว่าและลักษณะการทำงานของคีย์เวิร์ดนี้

ฟังก์ชันที่สั้นกว่า var element = [ "ไฮโดรเจน", "ฮีเลียม", "ลิเธียม", "เบริลเลียม" ]; // คำสั่งนี้ส่งคืนอาร์เรย์: element.map (function(element) ( return element.length; )); // ฟังก์ชั่นปกติด้านบนสามารถเขียนเป็นฟังก์ชั่นลูกศรด้านล่าง element.map((element) => ( return element.length; )); // // เมื่อมีพารามิเตอร์เพียงตัวเดียว เราสามารถลบวงเล็บที่อยู่รอบๆ element.map (องค์ประกอบ => ( return element.length; )); // // เมื่อคำสั่งเดียวในฟังก์ชันลูกศรคือ `return` เราสามารถลบ `return` และลบ // ​​วงเล็บปีกกาโดยรอบ element.map(element => element.length); // // ในกรณีนี้ เนื่องจากเราต้องการเพียงคุณสมบัติความยาว เราจึงสามารถใช้พารามิเตอร์การทำลายล้าง: // โปรดสังเกตว่า `ความยาว` สอดคล้องกับคุณสมบัติที่เราต้องการได้รับ ในขณะที่ // เห็นได้ชัดว่าไม่ใช่ `lengthFooBArX` พิเศษคือ แค่ชื่อของตัวแปรที่สามารถเปลี่ยนแปลงได้ // เป็นชื่อตัวแปรที่ถูกต้องที่คุณต้องการ element.map ((( length:lengthFooBArX )) => lengthFooBArX); // // การกำหนดพารามิเตอร์การทำลายโครงสร้างนี้สามารถเขียนได้ดังภาพด้านล่าง อย่างไรก็ตาม โปรดทราบว่าใน // ตัวอย่างนี้ เราไม่ได้กำหนดค่า `length` ให้กับคุณสมบัติที่ถูกสร้างขึ้น แต่จะใช้ชื่อตามตัวอักษร // ของตัวแปร `length` แทนเป็นคุณสมบัติที่เราต้องการดึงข้อมูลจากวัตถุ element.map ((( ความยาว )) => ความยาว); //ไม่แยกอันนี้.

ก่อนฟังก์ชันลูกศร ทุกฟังก์ชันใหม่จะกำหนดค่าของตัวเองตามวิธีการเรียกใช้ฟังก์ชัน:

• วัตถุใหม่ในกรณีของตัวสร้าง
• ไม่ได้กำหนดไว้ในการเรียกใช้ฟังก์ชันโหมดเข้มงวด
• วัตถุฐานหากฟังก์ชันถูกเรียกว่าเป็น "วิธีวัตถุ"

สิ่งนี้ได้รับการพิสูจน์แล้วว่าน้อยกว่าอุดมคติด้วยรูปแบบการเขียนโปรแกรมเชิงวัตถุ

ฟังก์ชั่น Person() ( // ตัวสร้าง Person() กำหนด `this` เป็นตัวอย่างของตัวเอง this.age = 0; setInterval(function growUp() ( // ในโหมดที่ไม่เข้มงวด ฟังก์ชัน growUp() จะกำหนด ` this` // เป็นอ็อบเจ็กต์โกลบอล (เพราะเป็นที่ที่ growUp() ถูกดำเนินการ), // ซึ่งแตกต่างจาก `this` // กำหนดโดยคอนสตรัคเตอร์ Person() this.age++; ), 1000) ; ) var p = บุคคลใหม่();

ใน ECMAScript 3/5 ปัญหานี้สามารถแก้ไขได้โดยการกำหนดค่าในสิ่งนี้ให้กับตัวแปรที่สามารถปิดได้

Function Person() ( var that = this; that.age = 0; setInterval(function growUp() ( // การเรียกกลับหมายถึงตัวแปร `that` ซึ่ง // ค่าเป็นวัตถุที่คาดหวัง that.age++; ) , 1,000); ) "ใช้อย่างเข้มงวด"; var obj = (a: 10); Object.defineProperty(obj, "b", ( get: () => ( console.log(this.a, typeof this.a, this); // undefed "unknown" Window (...) (หรือ global object) ส่งคืน this.a + 10; // แสดงถึงอ็อบเจ็กต์โกลบอล "Window" ดังนั้น "this.a" ส่งคืน "unknown" ) ));

การใช้ตัวดำเนินการใหม่

ไม่สามารถใช้ฟังก์ชันลูกศรเป็นตัวสร้างได้ และจะทำให้เกิดข้อผิดพลาดเมื่อใช้กับ new

วาร์ฟู = () => (); var foo = ฟูใหม่ (); // TypeError: Foo ไม่ใช่ตัวสร้าง

การใช้คุณสมบัติต้นแบบ

ฟังก์ชันลูกศรไม่มีคุณสมบัติต้นแบบ

วาร์ฟู = () => (); console.log(Foo.ต้นแบบ); // ไม่ได้กำหนด

การใช้คำสำคัญผลตอบแทน

คีย์เวิร์ด Yield ไม่สามารถใช้ในส่วนเนื้อความของฟังก์ชันลูกศรได้ (ยกเว้นเมื่อได้รับอนุญาตภายในฟังก์ชันที่ซ้อนอยู่ภายในนั้น) ด้วยเหตุนี้ ฟังก์ชันลูกศรจึงไม่สามารถใช้เป็นตัวสร้างได้

ฟังก์ชั่นร่างกาย

ฟังก์ชันลูกศรสามารถมีได้ทั้ง "เนื้อหาที่กระชับ" หรือ "เนื้อหาบล็อก" ตามปกติ

ในส่วนเนื้อหาที่กระชับ มีเพียงนิพจน์เท่านั้นที่ถูกระบุ ซึ่งจะกลายเป็นค่าส่งคืนโดยนัย ในเนื้อความของบล็อก คุณต้องใช้คำสั่ง return ที่ชัดเจน

ฟังก์ชั่น Var = x => x * x; // ไวยากรณ์เนื้อหาที่กระชับ โดยนัยว่า "return" var func = (x, y) => ( return x + y; ); // ด้วยเนื้อหาที่เป็นบล็อก จำเป็นต้องมี "การส่งคืน" ที่ชัดเจน

การส่งคืนตัวอักษรของวัตถุ

โปรดทราบว่าการส่งคืนตัวอักษรของวัตถุโดยใช้ไวยากรณ์เนื้อหาที่กระชับ params => (object:literal) จะไม่ทำงานตามที่คาดไว้

ฟังก์ชั่น Var = () => ( foo: 1 ); // การเรียก func() คืนค่าไม่ได้กำหนด! var func = () => ( foo: function() () ); // SyntaxError: คำสั่งฟังก์ชันจำเป็นต้องมีชื่อ

เนื่องจากโค้ดที่อยู่ในเครื่องหมายปีกกา (()) ถูกแยกวิเคราะห์เป็นลำดับของคำสั่ง (กล่าวคือ foo ถือเป็นป้ายกำกับ ไม่ใช่คีย์ในอ็อบเจ็กต์ลิเทอรัล)

คุณต้องล้อมวัตถุตามตัวอักษรด้วยวงเล็บ:

ฟังก์ชั่น Var = () => (( foo: 1 ));

ตัวแบ่งบรรทัด

ฟังก์ชันลูกศรไม่สามารถมีตัวแบ่งบรรทัดระหว่างพารามิเตอร์และลูกศรได้

ฟังก์ชั่น Var = (a, b, c) => 1; // SyntaxError: นิพจน์ที่คาดหวัง ได้รับ "=>"

อย่างไรก็ตาม สามารถแก้ไขได้โดยการขึ้นบรรทัดใหม่หลังลูกศร หรือใช้วงเล็บ/วงเล็บปีกกาตามที่แสดงด้านล่างเพื่อให้แน่ใจว่าโค้ดจะดูสวยงามและนุ่มนวล คุณยังสามารถใส่ตัวแบ่งบรรทัดระหว่างอาร์กิวเมนต์ได้

ฟังก์ชั่น Var = (a, b, c) => 1; var func = (a, b, c) => (1); var func = (a, b, c) => ( ส่งคืน 1 ); var func = (a, b, c) => 1; // ไม่มี SyntaxError ถูกส่งออกไป

ลำดับการแยกวิเคราะห์

แม้ว่าลูกศรในฟังก์ชันลูกศรจะไม่ใช่ตัวดำเนินการ แต่ฟังก์ชันลูกศรจะมีกฎการแยกวิเคราะห์พิเศษที่โต้ตอบกับลำดับความสำคัญของตัวดำเนินการแตกต่างออกไปเมื่อเปรียบเทียบกับฟังก์ชันปกติ

ให้โทรกลับ; โทรกลับ = โทรกลับ || การทำงาน(); // ตกลงโทรกลับ = โทรกลับ || () => (); // SyntaxError: อาร์กิวเมนต์ฟังก์ชันลูกศรไม่ถูกต้อง callback = callback || (() => ()); // ตกลง

ตัวอย่างเพิ่มเติม // ฟังก์ชันลูกศรว่างส่งคืนไม่ได้กำหนด ให้ว่างเปล่า = () => (); (() => "foobar"(); // ส่งคืน "foobar" // (นี่คือนิพจน์ฟังก์ชันที่เรียกใช้ทันที) var simple = a => a > 15 ? 15: ก; ง่าย(16); // 15 ง่าย (10); // 10 ให้สูงสุด = (a, b) => a > b ? ก: ข; // การกรองอาร์เรย์อย่างง่าย การแมป ... var arr = ; var sum = arr.reduce((a, b) => a + b); // 66 var คู่ = arr.filter(v => v % 2 == 0); // var double = arr.map(v => v * 2); // // โซ่สัญญาที่กระชับมากขึ้น Promise.then(a => ( // ... )).then(b => ( // ... )); // ฟังก์ชั่นลูกศรแบบไม่มีพารามิเตอร์ที่ง่ายต่อการแยกวิเคราะห์ setTimeout(() => ( console.log("Iเกิดขึ้นเร็วกว่านี้"); setTimeout(() => ( // รหัสที่ลึกกว่า console.log("ฉันเกิดขึ้นในภายหลัง") ; ) สิบเอ็ด); ข้อมูลจำเพาะ ข้อมูลจำเพาะ สถานะ ความคิดเห็น

ECMAScript 2015 (ฉบับที่ 6, ECMA-262)	มาตรฐาน	คำจำกัดความเริ่มต้น
ECMAScript ร่างล่าสุด (ECMA-262) คำจำกัดความของ "คำจำกัดความฟังก์ชันลูกศร" ในข้อกำหนดนั้น	ร่าง

ความเข้ากันได้ของเบราว์เซอร์

ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมในข้อมูล โปรดตรวจสอบ https://github.com/mdn/browser-compat-data และส่งคำขอดึงถึงเรา

อัปเดตข้อมูลความเข้ากันได้บน GitHub

เซิร์ฟเวอร์เดสก์ท็อปมือถือ Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome สำหรับ Android Firefox สำหรับ Android Opera สำหรับ Android Safari บน iOS อินเทอร์เน็ต Samsung Node.jsฟังก์ชั่นลูกศร เครื่องหมายจุลภาคต่อท้ายในพารามิเตอร์

Chrome รองรับเต็มรูปแบบ 45

รองรับ Edge เต็มรูปแบบ ใช่

Firefox รองรับเต็มรูปแบบ 22 หมายเหตุ สนับสนุนอย่างเต็มที่ 22 หมายเหตุ หมายเหตุ ก่อน Firefox 39 ตัวยุติบรรทัด (\n) ได้รับอนุญาตอย่างไม่ถูกต้องหลังจากอาร์กิวเมนต์ฟังก์ชันลูกศร สิ่งนี้ได้รับการแก้ไขเพื่อให้สอดคล้องกับข้อกำหนด ES2015 และรหัสเช่น () \n =>

IE ไม่มีหมายเลขรองรับ

โอเปร่าสนับสนุนอย่างเต็มที่ 32

รองรับ Safari เต็มรูปแบบ 10

WebView Android รองรับเต็มรูปแบบ 45

Chrome Android รองรับเต็มรูปแบบ 45

Firefox Android รองรับเต็มรูปแบบ 22 หมายเหตุ สนับสนุนอย่างเต็มที่ 22 หมายเหตุ หมายเหตุ การใช้ฟังก์ชันลูกศรครั้งแรกใน Firefox ทำให้ฟังก์ชันเหล่านี้เข้มงวดโดยอัตโนมัติ สิ่งนี้มีการเปลี่ยนแปลงตั้งแต่ Firefox 24 การใช้ "use strict"; ตอนนี้จำเป็นแล้ว หมายเหตุ ก่อน Firefox 39 ตัวยุติบรรทัด (\n) ได้รับอนุญาตอย่างไม่ถูกต้องหลังจากอาร์กิวเมนต์ฟังก์ชันลูกศร สิ่งนี้ได้รับการแก้ไขเพื่อให้สอดคล้องกับข้อกำหนด ES2015 และโค้ดเช่น () \n => () จะส่ง SyntaxError ในเวอร์ชันนี้และเวอร์ชันที่ใหม่กว่า

รองรับ Opera Android เต็มรูปแบบ 32

Safari iOS รองรับเต็มรูปแบบ 10

Samsung Internet Android รองรับเวอร์ชัน 5.0 เต็มรูปแบบ

nodejs รองรับเต็มที่ ใช่

การสนับสนุน Chrome เต็มรูปแบบ 58

ขอบ?

Firefox รองรับเต็มรูปแบบ 52

IE ไม่มีหมายเลขรองรับ

โอเปร่าสนับสนุนอย่างเต็มที่ 45

ซาฟารี?

รองรับ WebView Android เต็มรูปแบบ 58

Chrome Android รองรับเต็มรูปแบบ 58

Firefox Android รองรับเต็มรูปแบบ 52

Opera Android รองรับเต็มรูปแบบ 43

ซาฟารี iOS?

Samsung Internet Android รองรับเวอร์ชันเต็ม 7.0

nodejs รองรับเต็มที่ ใช่

คำอธิบาย การสนับสนุนแบบเต็ม การสนับสนุนเต็มรูปแบบ ไม่มีการสนับสนุน ไม่มีการสนับสนุน ไม่ทราบความเข้ากันได้ ไม่ทราบความเข้ากันได้ ดูบันทึกการใช้งาน ดูบันทึกการใช้งาน

• บทช่วยสอน

ส่วนที่น่าสนใจที่สุดอย่างหนึ่งของมาตรฐาน ECMAScript 6 ใหม่คือฟังก์ชันลูกศร ฟังก์ชันลูกศร ดังที่ชื่อแนะนำ ถูกกำหนดโดยไวยากรณ์ใหม่ที่ใช้ลูกศร => อย่างไรก็ตาม นอกเหนือจากไวยากรณ์ที่ยอดเยี่ยมแล้ว ฟังก์ชันลูกศรยังแตกต่างจากฟังก์ชันแบบเดิมในด้านอื่นๆ:

• การรวมคำศัพท์ ค่านิยม ตัวแปรพิเศษสิ่งนี้ , super และอาร์กิวเมนต์ไม่ได้ถูกกำหนดโดยวิธีเรียกใช้ฟังก์ชันลูกศร แต่โดยวิธีการสร้างฟังก์ชันเหล่านั้น
• สิ่งนี้ไม่เปลี่ยนรูป ซุปเปอร์และอาร์กิวเมนต์ ค่าของตัวแปรเหล่านี้ภายในฟังก์ชันลูกศรยังคงไม่เปลี่ยนแปลงตลอด วงจรชีวิตฟังก์ชั่น.
• ไม่สามารถใช้ฟังก์ชันลูกศรเป็นตัวสร้างและเกิดข้อผิดพลาดเมื่อใช้กับตัวดำเนินการใหม่
• ความพร้อมใช้งานของค่า "ดั้งเดิม" ของตัวแปรอาร์กิวเมนต์

มีเหตุผลหลายประการในการแนะนำความแตกต่างเหล่านี้ ประการแรกคือการผูกข้อมูลถูกใช้ค่อนข้างบ่อยใน JavaScript เป็นเรื่องง่ายมากที่จะสูญเสียค่าที่ถูกต้องเมื่อใช้ฟังก์ชันแบบเดิม ซึ่งอาจนำไปสู่ผลลัพธ์ที่ไม่คาดคิดได้ อีกเหตุผลหนึ่งคือเอ็นจิ้น JS จะสามารถปรับการทำงานของฟังก์ชันลูกศรให้เหมาะสมได้อย่างง่ายดายเนื่องจากข้อจำกัดเหล่านี้ (ซึ่งต่างจากฟังก์ชันดั้งเดิมที่สามารถใช้เป็นคอนสตรัคเตอร์และมีอิสระในการแก้ไข ตัวแปรพิเศษ).

หมายเหตุ: บทความนี้เป็นการรวบรวมจากการแปลบทความทำความเข้าใจกับฟังก์ชันลูกศรของ ECMAScript 6 ฟรี และการอ่านร่างข้อกำหนดล่าสุด (20 มกราคม 2014 Draft Rev 22)

ไวยากรณ์ โดยทั่วไป ไวยากรณ์ของฟังก์ชันลูกศรมีลักษณะดังนี้:

ความสนุก = (x) => x;
มันคล้ายกันมากกับไวยากรณ์ที่คล้ายกันในภาษาต่างๆ เช่น Scala, CoffeeScript และไวยากรณ์ของนิพจน์แลมบ์ดาจาก C#

ไวยากรณ์ของฟังก์ชันลูกศรอาจแตกต่างกันไปขึ้นอยู่กับวิธีการประกาศฟังก์ชัน การประกาศจะเริ่มต้นด้วยรายการอาร์กิวเมนต์เสมอ ตามด้วยลูกศรและเนื้อหาของฟังก์ชัน ทั้งรายการอาร์กิวเมนต์และเนื้อหาของฟังก์ชันอาจมีรูปแบบที่แตกต่างกัน ขึ้นอยู่กับสิ่งที่คุณเขียน

พารามิเตอร์หนึ่งการประกาศฟังก์ชันลูกศรที่รับหนึ่งอาร์กิวเมนต์และส่งคืนมันนั้นง่ายมาก:

Var สะท้อน = ค่า => ค่า; // เทียบเท่ากับ varflect = function(value) ( ​​​​คืนค่า; )
เมื่อฟังก์ชันลูกศรมีเพียงอาร์กิวเมนต์เดียว ก็สามารถประกาศได้โดยไม่ต้องใส่วงเล็บ เนื้อหาของฟังก์ชันที่อยู่ถัดจากลูกศรอาจไม่มีเครื่องหมายปีกกาและอาจไม่มีคีย์เวิร์ด return

พารามิเตอร์หลายตัว แต่ถ้าคุณต้องการประกาศมากกว่าหนึ่งพารามิเตอร์ คุณต้องใส่รายการพารามิเตอร์ไว้ในวงเล็บ:

ผลรวม Var = (num1, num2) => num1 + num2; // เทียบเท่ากับ var sum = function(num1, num2) ( return num1 + num2; );
ฟังก์ชัน sum เพียงเพิ่มอาร์กิวเมนต์สองตัว ข้อแตกต่างเพียงอย่างเดียวจากตัวอย่างก่อนหน้านี้คือการมีวงเล็บและเครื่องหมายจุลภาค (เหมือนกับในฟังก์ชันทั่วไป)

ไม่มีพารามิเตอร์ ในทำนองเดียวกัน ฟังก์ชันที่ไม่มีอาร์กิวเมนต์ใดๆ จะต้องมีรายการพารามิเตอร์ว่างอยู่ในวงเล็บ:

ผลรวมวาร์ = () => 1 + 2; // เทียบเท่ากับ var sum = function() ( return 1 + 2; );

ไวยากรณ์ของฟังก์ชันแบบดั้งเดิม คุณสามารถใช้ไวยากรณ์ของฟังก์ชันแบบดั้งเดิมสำหรับเนื้อหาของฟังก์ชันลูกศรได้เมื่อมีมากกว่าหนึ่งนิพจน์ นั่นคือ ล้อมฟังก์ชันด้วยเครื่องหมายปีกกาและเพิ่มคีย์เวิร์ด return:

Var sum = (num1, num2) => ( return num1 + num2; ) // เทียบเท่ากับ var sum = function(num1, num2) ( return num1 + num2; );
เนื้อความของฟังก์ชันจะได้รับการประมวลผลในลักษณะเดียวกับฟังก์ชันคลาสสิก ยกเว้นค่าต่างๆ ตัวแปรพิเศษ this , super และข้อโต้แย้งจะได้รับการประเมินแตกต่างกัน

แยกตามตัวอักษรของวัตถุ ควรกล่าวถึงว่าเนื้อความของฟังก์ชันที่ไม่มีเครื่องหมายปีกกาและส่งคืนค่าตามตัวอักษรของวัตถุควรอยู่ในวงเล็บ:

Var getTempItem = id => (( id: id, ชื่อ: "ชั่วคราว" )); // เทียบเท่ากับ var getTempItem = function(id) ( return ( id: id, name: "Temp" ) );
การวางตัวอักษรของวัตถุในวงเล็บจะบอก parser ว่าเครื่องหมายปีกกาไม่ใช่จุดเริ่มต้นของไวยากรณ์แบบดั้งเดิมสำหรับเนื้อความของฟังก์ชัน แต่เป็นจุดเริ่มต้นของตัวอักษร

จำนวนพารามิเตอร์ที่แปรผันได้ เนื่องจากวัตถุอาร์กิวเมนต์ "ดั้งเดิม" ไม่พร้อมใช้งานภายในฟังก์ชันลูกศร (ค่าของอาร์กิวเมนต์มีความเกี่ยวข้องกับค่าของอาร์กิวเมนต์ของฟังก์ชันดั้งเดิมซึ่งมีการประกาศฟังก์ชันลูกศร) ดังนั้นสำหรับฟังก์ชันลูกศรที่มี จำนวนตัวแปรของพารามิเตอร์ที่คุณต้องใช้รูปแบบที่เหลือ รูปแบบการทำลายล้าง. ตัวอย่าง:

Var getTempItems = (...ส่วนที่เหลือ) => ส่วนที่เหลือ; // เทียบเท่ากับ var getTempItems = function() ( return .slice.apply(arguments) );

กำลังทำลายเทมเพลตเป็นพารามิเตอร์ สำหรับวัตถุประสงค์ของบทความนี้ เราไม่พิจารณาถึงรูปแบบการทำลายล้าง - คุณสามารถอ่านเกี่ยวกับรูปแบบเหล่านี้ได้ในบทความภาพรวมของ ECMAScript 6 ซึ่งเป็นเวอร์ชันถัดไปของ JavaScript แม้ว่าข้อมูลนี้จะล้าสมัยไปแล้วบางส่วนก็ตาม

ดังที่คุณเห็นจากตัวอย่างก่อนหน้านี้ แม้ว่าฟังก์ชันลูกศรจะมีอาร์กิวเมนต์เดียวเท่านั้น แต่คุณยังคงต้องใช้วงเล็บเมื่อใช้ รูปแบบการทำลายล้างเป็นพารามิเตอร์เดียวของฟังก์ชัน ตัวอย่างร่วมกับผู้อื่น แม่แบบ:

วาร์ ก = ((ก)) => ก; var b = ([b]) => ข;

การใช้บริบทการตั้งค่าฟังก์ชันลูกศร สถานการณ์ทั่วไปประการหนึ่งใน JavaScript คือการตั้งค่าที่ถูกต้องภายในฟังก์ชัน (การเชื่อมโยง) เนื่องจากค่าของสิ่งนี้สามารถเปลี่ยนแปลงได้ ขึ้นอยู่กับบริบทที่ฟังก์ชันถูกดำเนินการ จึงเป็นไปได้ที่จะดำเนินการกับวัตถุหนึ่งอย่างผิดพลาดเมื่อคุณหมายถึงบางสิ่งที่แตกต่างไปจากเดิมอย่างสิ้นเชิง ดูตัวอย่างต่อไปนี้:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", function(event) ( this.doSomething(event.type); // error )); ) , doSomething: function( ประเภท) ( console.log("การจัดการ " + type + " สำหรับ " + this.id) ) );
ในโค้ดด้านบน วัตถุ pageHandler ควรจัดการการคลิกบนเพจ เมธอด init() แนบตัวจัดการเข้ากับเหตุการณ์ที่ต้องการ ซึ่งเรียกภายในว่า this.doSomething() อย่างไรก็ตาม รหัสจะทำงานไม่ถูกต้อง การอ้างอิงถึง this.doSomething() ไม่ถูกต้องเนื่องจากสิ่งนี้ชี้ไปที่วัตถุเอกสารภายในตัวจัดการเหตุการณ์แทนที่จะเป็น pageHandler ที่ต้องการ หากคุณพยายามเรียกใช้โค้ดนี้ คุณจะได้รับข้อผิดพลาดเนื่องจากวัตถุเอกสารไม่มีวิธีการ doSomething

คุณสามารถผูกค่านี้กับอ็อบเจ็กต์ pageHandler ได้โดยใช้ handleEvent หรือโดยการเรียกเมธอด bind() มาตรฐานบนฟังก์ชัน:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", (function(event) ( this.doSomething(event.type); // error )).bind(this)) ; ) , ทำบางสิ่งบางอย่าง: function(type) ( console.log("Handling " + type + " for " + this.id) ) );
ตอนนี้โค้ดทำงานได้ตามที่ตั้งใจไว้ แต่ดูยุ่งยากมากขึ้น นอกจากนี้ โดยการเรียก bind(this) แต่ละครั้งที่คุณสร้างฟังก์ชันใหม่ซึ่งค่านี้เชื่อมโยงกับค่าของ pageHandler แต่โค้ดทำงานได้ตามที่คุณต้องการ

ฟังก์ชันลูกศรช่วยแก้ปัญหาด้วยวิธีที่หรูหรายิ่งขึ้น เนื่องจากใช้การเชื่อมโยงคำศัพท์กับค่าของสิ่งนี้ (รวมถึง super และ arguments ) และค่าของมันจะถูกกำหนดโดยค่าของสิ่งนี้ ณ ตำแหน่งที่สร้างฟังก์ชันลูกศร ตัวอย่างเช่น:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", event => this.doSomething(event.type)); ) , doSomething: function(type) ( console.log( "การจัดการ " + ประเภท + " สำหรับ " + this.id) ) );
ในตัวอย่างนี้ ตัวจัดการคือฟังก์ชันลูกศรที่เรียก this.doSomething() ค่านี้จะเหมือนกับในฟังก์ชัน init() และโค้ดใน ในตัวอย่างนี้จะทำงานได้อย่างถูกต้อง คล้ายกับอันที่ใช้ bind() ไม่ว่าการเรียก this.doSomething() จะส่งคืนค่าหรือไม่ก็ตาม นิพจน์ภายในเนื้อความของฟังก์ชันลูกศรไม่จำเป็นต้องอยู่ในวงเล็บปีกกา

นอกจากนี้ ตัวอย่างข้างต้นยังมีประสิทธิภาพมากกว่าการเรียกbind() เนื่องจากเป็นโค้ดเดียวกับโค้ดต่อไปนี้สำหรับเบราว์เซอร์:

Var pageHandler = ( id: "123456" , init: function() ( var self = this; document.addEventListener("click", function(event) ( return self.doSomething(event.type) )); ) , ทำบางอย่าง: ฟังก์ชั่น (ประเภท) ( console.log ("การจัดการ " + ประเภท + " สำหรับ " + this.id) ) );
นั่นคือการสร้างไม่เกิดขึ้น คุณลักษณะใหม่เช่นเดียวกับกรณีที่มีการเรียก bind()

“การขว้าง” บริบทระหว่างการโทรหลายครั้ง แน่นอนว่าคุณสามารถซ้อนฟังก์ชันลูกศรหนึ่งไว้ในอีกฟังก์ชันหนึ่งได้ ดังนั้นจึง “โยน” ค่านี้ผ่านฟังก์ชันเหล่านั้น:

Var obj = ( arr1: , arr2: ["a", "b", "c"] , ต่อกัน: function(a, b)( return a + "|" + b ) , จุดตัด: function() ( return this .arr1.reduce((sum, v1) => // ฟังก์ชั่นลูกศร 1 this.arr2.reduce((sum, v2) => ( // ฟังก์ชั่นลูกศร 2 sum.push(this.concatenate(v1, v2)) กลับ ผลรวม; ) ผลรวม) , ) ) ); var arrSum = obj.intersection();//["1|a", "1|b", "1|c", "2|a", "2|b", "2|c", "3 |ก", "3|ข", "3|ค"]

ใช้เป็นอาร์กิวเมนต์ ไวยากรณ์แบบสั้นของฟังก์ชันลูกศรทำให้ฟังก์ชันเหล่านี้เหมาะสมที่สุดสำหรับการส่งผ่านเป็นอาร์กิวเมนต์ไปยังการเรียกใช้ฟังก์ชันอื่นๆ ตัวอย่างเช่น หากคุณต้องการเรียงลำดับอาร์เรย์ คุณมักจะเขียนดังนี้:

ผลลัพธ์ Var =values.sort(function(a, b) ( return a - b ));
ค่อนข้างละเอียดสำหรับการใช้งานที่เรียบง่าย เปรียบเทียบกับสัญกรณ์สั้นสำหรับฟังก์ชันลูกศร:

ผลลัพธ์ Var =values.sort((a, b) => a - b);
การใช้เมธอดต่างๆ เช่น array() , map() , ลด() และอื่นๆ สามารถทำให้ง่ายขึ้นโดยใช้ไวยากรณ์ของฟังก์ชันลูกศรสั้น

คุณสมบัติอื่นๆ ของฟังก์ชันลูกศร แม้ว่าฟังก์ชันลูกศรจะแตกต่างจากฟังก์ชันทั่วไป แต่ก็มีคุณสมบัติทั่วไปบางประการ:

• ตัวดำเนินการ typeof จะส่งกลับ "function" สำหรับฟังก์ชันลูกศร
• ฟังก์ชันลูกศรก็เป็นอินสแตนซ์ของฟังก์ชัน "คลาส" ด้วยเช่นกัน ดังนั้น instanceof จะทำงานเหมือนกับฟังก์ชันแบบเดิม
• คุณยังคงสามารถใช้เมธอด call() , Apply() และ bind() ได้ แต่จำไว้ว่ามันจะไม่ส่งผลกระทบต่อค่าของสิ่งนี้
• คุณสามารถใช้เมธอด toMethod() ได้ แต่จะไม่เปลี่ยนค่าของ super ( วิธีการ toMethod() ถูกนำมาใช้ใน es6 และไม่ได้กล่าวถึงในบทความนี้).

ความแตกต่างที่สำคัญจากฟังก์ชันแบบเดิมคือการพยายามเรียกใช้ฟังก์ชันลูกศรโดยใช้โอเปอเรเตอร์ใหม่จะทำให้เกิดข้อผิดพลาดรันไทม์ ฟังก์ชันลูกศรสรุปเป็นหนึ่งในนวัตกรรมที่น่าสนใจที่สุดใน ECMAScript 6 ซึ่งมีไวยากรณ์คำจำกัดความที่กระชับ การส่งผ่านฟังก์ชันเป็นค่าพารามิเตอร์ไปยังฟังก์ชันอื่น

ไวยากรณ์ที่กระชับจะทำให้คุณสามารถเขียนสิ่งที่ซับซ้อนให้ซับซ้อนยิ่งขึ้นด้วยวิธีที่ง่ายกว่า ตัวอย่างเช่น นี่คือลักษณะของตัวสร้างตัวระบุ (ซึ่งดูละเอียดกว่ามากใน es5):

ให้ idGen = (start = 0, id = start, reset = (newId = start) => id = newId, next = () => id++) => ((รีเซ็ต, ถัดไป)); ให้ gen = idGen(100); console.log (gen.next (), gen.next (), gen.reset (10), gen.next ()); // 100 101 10 10
และการเชื่อมโยงคำศัพท์จะปิดหนึ่งในแหล่งที่มาของความเจ็บปวดและความหงุดหงิดที่ใหญ่ที่สุดสำหรับนักพัฒนา และยังจะปรับปรุงประสิทธิภาพด้วยการปรับให้เหมาะสมในระดับเอ็นจิ้น js


หากคุณต้องการลองใช้ฟังก์ชันลูกศร คุณสามารถเรียกใช้ตัวอย่างข้างต้นได้ในคอนโซล Firefox ซึ่งเปิดอยู่ ช่วงเวลานี้(02.2014 FF28) รองรับฟังก์ชั่นลูกศรเกือบทั้งหมด (FF28 คำนวณค่าของข้อโต้แย้งไม่ถูกต้อง)

คุณยังสามารถลองใช้ฟังก์ชันลูกศรและฟีเจอร์ es6 อื่นๆ ใน Traceur นักแปลออนไลน์ได้

แท็ก: เพิ่มแท็ก