அவை மிகவும் நாகரீகமாகிவிட்டன, எல்லா புதிய கட்டுரைகளிலும் அவற்றைப் பார்க்கிறோம். மேலும், நீங்கள் அவற்றைப் பயன்படுத்தவில்லை என்றால், அம்பு செயல்பாடுகளைக் கொண்ட நவீன (ES6) குறியீட்டைப் புரிந்துகொள்வது உங்களுக்கு கடினமாக இருக்கும்.

அவற்றை எப்போது அல்லது எப்படிப் பயன்படுத்த வேண்டும் என்பதை இந்தக் கட்டுரை உங்களுக்குக் கூறவில்லை. புதிய தொடரியலை முதல்முறையாகப் பார்ப்பவர்களுக்கு விளக்க முயற்சிக்கிறேன். நீங்கள் அதைப் பயன்படுத்துகிறீர்களா இல்லையா என்பது முக்கியமல்ல, ஆனால் விரைவில் அல்லது பின்னர் நீங்கள் அதை எங்காவது சந்திப்பீர்கள். எனவே இந்த புதிய தொடரியல் இயக்கவியலைப் புரிந்துகொள்வது நல்லது.

இதோ ஒரு சிறிய உதாரணம்:

கான்ஸ்ட் addOne = செயல்பாடு(n) ( திரும்ப n + 1; )

மேலே உள்ள குறியீட்டை இப்படி எழுதலாம்:

கான்ஸ்ட் addOne = (n) => ( திரும்ப n + 1; )

அல்லது உள்ளே இந்த வழக்கில், இன்னும் குறுகியது:

கான்ஸ்ட் addOne = (n) => n + 1;

இரண்டாவது உதாரணம் (... ) சுருள் பிரேஸ்களைப் பயன்படுத்துகிறது, ஆனால் இது ஒரே ஒரு வரி குறியீடு என்பதால், மூன்றாவது எடுத்துக்காட்டில் காணப்படுவது போல் சுருள் பிரேஸ்கள் தவிர்க்கப்படலாம் மற்றும் திரும்புவதைக் குறிக்கும்.

ஒரு அளவுரு

அம்புக்குறி செயல்பாடு ஒரு அளவுருவைக் கொண்டிருக்கும் போது, ​​அடைப்புக்குறிகளைத் தவிர்க்கலாம்:

// இருந்தது: someCallBack((முடிவுகள்) => ( ... )) // இப்போது: someCallBack(முடிவுகள் => ( ... ))

ஆனால், அளவுருக்கள் இல்லை என்றால், நீங்கள் திறப்பதற்கும் மூடுவதற்கும் அடைப்புக்குறிகளைப் பயன்படுத்த வேண்டும்:

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

திரும்ப திரும்ப செயல்பாடுகள்

செயல்பாடு அம்புகள் குறிப்பாக கால்பேக்குகளுக்கு பயனுள்ளதாக இருக்கும். ஜாவாஸ்கிரிப்டை நன்கு அறிந்தவர்கள் அதன் லெக்சிகல் நோக்கத்தை நன்கு அறிந்திருக்கிறார்கள், இது மிகவும் நேர்த்தியானது, ஆனால் இது போன்ற தந்திரங்களைச் செய்ய முடியும் ( இது):

வர்_திஸ் = இது; someCallBack(function() (_this.accessOuterScope(); ))

இந்த "_திஸ்" ("சுய" அல்லது "அது" போன்றவை) பல வேறுபாடுகள் உள்ளன, ஆனால் யோசனை ஒன்றுதான். கால்பேக் செயல்பாடுகளில், வெளிப்புற ஸ்கோப் பதிப்பிற்கான அணுகல் நமக்குத் தேவை, ஆனால் யோசனை ஒன்றுதான். கால்பேக் செயல்பாடுகளில், இதன் வெளிப்புற ஸ்கோப்பின் பதிப்பிற்கான அணுகல் நமக்குத் தேவை , இது முன்பு இருந்ததை விட இப்போது வேறுபட்டது, ஏனெனில் நாங்கள் திரும்பப் பெறும் செயல்பாட்டைப் பற்றி பேசுகிறோம்.

பயன்படுத்தி அம்பு செயல்பாடுகள், நாங்கள் "பிளாக் ஸ்கோப்" மற்றும் "இது" ஆகியவற்றைப் பெறுகிறோம், இது இரண்டு நிகழ்வுகளிலும் ஒரே "இது" ஆகும். அதாவது மேலே உள்ள குறியீட்டை _திஸ் = இது இல்லாமல் மீண்டும் எழுதலாம்:

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

"ரேப்பர்"

ரியாக்ட் போன்ற ஒரு சூழ்நிலையை கற்பனை செய்யலாம், அங்கு நிகழ்வு மீது கிளிக் செய்யவும் doSomething() , () என்று அழைக்க வேண்டும், ஆனால் doSomething() க்கு வாதங்களையும் அனுப்ப வேண்டும் (எ.கா. ஐடி). இந்த உதாரணம் உண்மையில் வேலை செய்யாது:

சில பயனர்)))

குறியீடு இயங்கும், ஆனால் தொழில்நுட்ப ரீதியாக அது பக்கம் ஏற்றப்படும் போது உடனடியாக doSomething() என்று அழைக்கும். இந்தச் சிக்கலைத் தீர்க்க, சில டெவலப்பர்கள் ரேப்பர் செயல்பாட்டைக் குறிப்பிடுகின்றனர்:

Const User = React.createClass(function() ( render: function() ( சில பயனர்களை திரும்பவும்), onClick: function() ( doSomething(this.props.userId); ) ))

this.onClick இல் அடைப்புக்குறி இல்லாததால், இது ஒரு செயல்பாட்டு அழைப்பைக் காட்டிலும் ஒரு செயல்பாட்டுக் குறிப்பு என்று அர்த்தம்.

onClick() செயல்பாடு இப்போது doSomething()க்கான ரேப்பராக உள்ளது. அம்பு செயல்பாடுகளுடன் நீங்கள் இந்த வகை "ரேப்பர்களை" உருவாக்கலாம்:

Const User = React.createClass(function() ( render: function() ( doSomething(this.props.userId))>சில பயனர் ))

மாற்றாக, நாம் .bind() ஐயும் பயன்படுத்தலாம், இதற்கு ரேப்பர்கள் தேவையில்லை (அம்பு செயல்பாடுகள் அல்லது எதுவும்):

கான்ஸ்ட் யூசர் = React.createClass(function() ( render: function() ( சில பயனர்களை திருப்பி ) ))

அம்புக்குறி செயல்பாடுகளுக்கான உலாவி ஆதரவு

உங்களுக்கு உலாவி ஆதரவு தேவைப்பட்டால் சமீபத்திய பதிப்புகள் குரோம்மற்றும் பயர்பாக்ஸ், பயன்படுத்தவும் பேபல் டிரான்ஸ்பைலர்நீங்கள் எழுதிய ES6 குறியீட்டை ES5 ஆக மாற்ற.

செயல்பாடுகளை உருவாக்க ES6 புதிய வழியைக் கொண்டுள்ளது - அம்பு => ஆபரேட்டரைப் பயன்படுத்துதல். இத்தகைய செயல்பாடுகள் அம்பு செயல்பாடுகள் என்று அழைக்கப்படுகின்றன. அவை மிகவும் கச்சிதமான தொடரியல் வழங்குகின்றன. அவர்களுக்கு பெயர் இல்லை, அவர்கள் இதை வைத்து வித்தியாசமாக வேலை செய்கிறார்கள்.

முதலில் நாம் செய்வோம் Babel ஸ்கிரிப்டை இயக்குவது, கோப்புகளை கண்காணிக்கும் மற்றும் அவை மாறும்போது புதிய பதிப்புகளை உருவாக்கும்.

திட்ட கோப்புறையை திறக்கவும் கட்டளை வரி(கேஎஸ்). கட்டளையை உள்ளிடவும்:

மற்றும் Enter ஐ அழுத்தவும்

src கோப்புறையில் arr.js என்ற கோப்பை உருவாக்கி உடனடியாக அதை index.html கோப்பில் குறிப்பிடுவோம்.

</script>

உலாவிகளின் சமீபத்திய பதிப்புகள் டிரான்ஸ்பிலேஷன் இல்லாமல் அம்புக்குறி செயல்பாடுகளை ஆதரிக்கின்றன, அவற்றில் எனது உலாவியும் ஒன்றாகும்.

இரண்டு எண்களைச் சேர்த்து அவற்றின் கூட்டுத்தொகையை வழங்கும் செயல்பாட்டை எழுதுவோம். செயல்பாட்டை சேர் என்று அழைப்போம்.

செயல்பாடு சேர் (x, y) ( திரும்ப x + y; ) console.log (சேர் (3, 6));

கன்சோலில் முடிவைக் காண்போம் - 9

இப்போது, ​​இந்த செயல்பாட்டை அம்பு செயல்பாடாக மாற்றுவோம்.

செயல்பாடு என்ற வார்த்தையை அகற்றி, செயல்பாட்டு பெயரை அகற்றி, சுருள் பிரேஸ்களை அகற்றுவோம், மற்றும் வார்த்தை - திரும்ப . அளவுருக்களுக்குப் பிறகு நாம் ஒரு அம்புக்குறியை வைப்போம்.

சேர்க்கலாம் = (x, y) => x + y; console.log(சேர்(4, 6));

ஆபரேட்டரின் வகையைப் பயன்படுத்தி சேர் மாறியின் வகையைப் பார்த்தால்:

Console.log(typeof(சேர்));

இதைத்தான் ஃபங்ஷன் கன்சோலில் பார்ப்போம்

இதன் பொருள் அம்பு செயல்பாடுகள் சாதாரண செயல்பாடுகள். டிரான்ஸ்பைல் செய்யப்பட்ட குறியீட்டைப் பார்த்து இதை நீங்கள் சரிபார்க்கலாம்.

"கண்டிப்பாக பயன்படுத்தவும்"; var _typeof = சின்னத்தின் வகை === "செயல்பாடு" && typeof Symbol.iterator === "சின்னம்" ? செயல்பாடு (obj) ( திரும்ப வகை obj; ) : செயல்பாடு (obj) ( திரும்ப obj && வகை சின்னம் === "செயல்பாடு" && obj. கன்ஸ்ட்ரக்டர் === சின்னம் && obj !== Symbol.prototype ? "symbol" : வகை obj ;); var சேர் = செயல்பாடு சேர்(x, y) (திரும்ப x + y; ); console.log(சேர்(4, 6)); console.log(சேர்ப்பு வகை === "வரையறுக்கப்படவில்லை" ? "வரையறுக்கப்படவில்லை" : _typeof(சேர்க்கவும்));

பேபல் நமது குறியீட்டை எளிய செயல்பாட்டு வெளிப்பாடாக மாற்றியிருப்பதைக் காணலாம்.

கொடுக்கப்பட்ட எண்ணை வர்க்கப்படுத்தும் ஒரு எளிய செயல்பாட்டை எழுதுவோம்.

சேர்க்கலாம் = (x, y) => x + y; console.log(சேர்(4, 6)); console.log(typeof(சேர்)); சதுரத்தை விடுங்கள் = செயல்பாடு(a) (ஒரு * a; ) console.log(சதுரம் (4))

கன்சோலில் பார்க்கலாம்:

அம்புக்குறி செயல்பாடு இப்படி இருக்கும்:

சதுரம் = x => x * x;

ஒரு அம்பு செயல்பாடு ஒரு அளவுருவை மட்டுமே எடுத்தால், அதை அடைப்புக்குறிக்குள் இணைக்க வேண்டிய அவசியமில்லை!

எந்த அளவுருவும் எடுக்காத செயல்பாட்டை எழுதுவோம்.

செயல்பாடு givNumer () ( return 33; ) console.log(givNumer ());

இந்தச் செயல்பாடு 33 என்ற எண்ணை கன்சோலில் அச்சிடுகிறது.

givNumer = () => 33; console.log(givNumer());

எதையும் திரும்பப் பெறாத செயல்பாட்டை உருவாக்குவோம். இது உலாவி கன்சோலில் ஒரு செய்தியைக் காண்பிக்கும்.

பதிவு = செயல்பாடு () ( console.log("Hello World!"); ); பதிவு ();

சொடுக்கி:

பதிவை விடுங்கள் = () => console.log("ஹலோ வேர்ல்ட்!!!"); பதிவு ();

இரண்டு கோடுகளைக் கொண்ட ஒரு செயல்பாட்டை உருவாக்குவோம்.

செயல்பாடு இரண்டு அளவுருக்கள் எடுக்கும். செயல்பாட்டின் உடலில் ஒரு மாறியை உருவாக்குவோம். அதன் பிறகு, முடிவைத் திருப்பித் தருவோம்.

Mult = செயல்பாடு (a, b) (முடிவு = a * b; ரிட்டர்ன் ரிசல்ட்; ) console.log(mult (4, 5));

அம்பு செயல்பாட்டில் பல கோடுகள் இருந்தால், சுருள் பிரேஸ்கள் - () தேவை! திரும்பும் முக்கிய சொல்லைப் பயன்படுத்தி இந்த செயல்பாடு என்ன திரும்பும் என்பதை வரையறுக்கவும்

சொடுக்கி:

Mult = (a, b) => (முடிவு = a * b; ரிட்டர்ன் ரிசல்ட்; ) console.log(mult (4, 5));

இப்போது ஒரு பொருளை நேரடியாக வழங்கும் செயல்பாட்டை உருவாக்குவோம்:

லிட்டரல் = செயல்பாடு () ( திரும்ப (பெயர்: "ஜான்"); ) console.log (literal ());

கன்சோலில் நாம் பார்ப்போம்:

இப்போது ஒரு அம்பு செயல்பாட்டை உருவாக்க முயற்சிப்போம், அது ஒரு பொருளை உண்மையில் திருப்பித் தரும்.

ஒரு அம்புக்குறி செயல்பாடு ஒரு பொருளை எழுத்துப்பூர்வமாக வழங்கினால், அடைப்புக்குறிகள் தேவை என்பதை நினைவில் கொள்ள வேண்டும் - ()

அம்பு செயல்பாடு ஒரு பொருளை நேரடியாக திருப்பி அனுப்புகிறது:

எழுத்துச்சொல் = () => ((பெயர்: "ஜான்")); console.log(லிட்டரல்());

இப்போது அம்பு செயல்பாட்டை IIFE ஆகப் பயன்படுத்த முயற்சிப்போம் - உடனடியாக செயல்படுத்தப்பட்ட செயல்பாடு வெளிப்பாடு

சுருக்கமாக, இது அறிவிப்புக்குப் பிறகு உடனடியாக செயல்படுத்தப்படும் ஒரு செயல்பாடு

இது போல் தெரிகிறது:

(செயல்பாடு () ( console.log("IIFE"); ))();

அம்புக்குறி IIFE செயல்பாடு இப்படி இருக்கும்:

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

அம்பு செயல்பாடுகளின் ஒரு முக்கிய அம்சம் என்னவென்றால், அம்புக்குறி அளவுருக்களுக்குப் பிறகு உடனடியாக வர வேண்டும்!

நீங்கள் அதை எடுத்து கீழே ஒரு வரிக்கு கீழே நகர்த்த முடியாது. அது பிழையைக் கொடுக்கும்!

அம்பு செயல்பாடுகளின் நடைமுறை பயன்பாடு. அம்பு செயல்பாடுகள் வரிசைகளுடன் பயன்படுத்த மிகவும் வசதியானவை.

சில எண்களுடன் ஒரு வரிசையை உருவாக்கி அதை எண்கள் என்று அழைப்போம். வரிசைகள் வரிசையின் மூலம் மீண்டும் மீண்டும் செய்ய, அதை வடிகட்டுதல் போன்றவற்றை அனுமதிக்கும் பயனுள்ள முறைகள் உங்களுக்குத் தெரியும் என்று நினைக்கிறேன்.

அனைத்து வரிசை மாறிகளின் கூட்டுத்தொகையைக் கணக்கிடுவோம். இதைச் செய்ய, நான் மற்றொரு மாறியை அறிவிப்பேன் - தொகை = 0;

ஒவ்வொரு வரிசையிலும் இருக்கும் forEach() முறையைப் பயன்படுத்துவோம், உறுப்புகளின் மீது மீண்டும் மீண்டும் சேர்த்து கூட்டுத்தொகையைச் சேர்ப்போம்.

எண்களை விடுங்கள் = ; தொகை = 0; எண்கள்.ஒவ்வொருவருக்கும்(செயல்பாடு(எண்) (தொகை += எண்; )); console.log(தொகை);

கன்சோலில் 55ஐக் காண்போம். இந்த செயல்பாட்டை அம்பு செயல்பாடாக மாற்றுவோம்: numbers.forEach(num => sum += num); console.log(தொகை);

எனவே, முன்பு மூன்று வரிகளை எடுத்தது இப்போது ஒன்றை எடுக்கிறது.

வரிசையின் ஒவ்வொரு உறுப்பையும் நாம் சதுரப்படுத்தலாம்.

சதுர = எண்களை விடுங்கள்.வரைபடம்(n => n * n); console.log(squared);

அம்பு செயல்பாடுகள் மற்றும் இது. இதைச் செய்ய, நபர் மாறியில் சேமிக்கும் ஒரு பொருளை எழுத்துப்பூர்வமாக உருவாக்குவேன்.

நபர் பொருளுக்கு 'பாப்' மதிப்புடன் பெயர் சொத்து இருக்கும் மற்றும் 'வாழ்த்து' மதிப்புடன் வாழ்த்து சொத்து இருக்கும். நாங்கள் வாழ்த்துக்களை கன்சோலில் அச்சிட்டு, இதன் நோக்கத்தையும் பார்ப்போம்.

நபர் = (பெயர்: "பாப்", வாழ்த்து: செயல்பாடு () ( console.log("ஹலோ! என் பெயர் " + this.name); console.log(this); ) ); நபர்.வாழ்த்து();

பிரவுசர் கன்சோலில் நாம் வாழ்த்துக்களையும், அந்த நபர் தன்னையே ஆட்சேபிப்பதையும் பார்ப்போம்.

இப்போது நாம் செயல்பாட்டை அம்புக்குறியால் மாற்றுவோம், இதற்கு என்ன நடக்கிறது என்று பார்ப்போம்.

நபர் = (பெயர்: "பாப்", வாழ்த்து: () => ( console.log("ஹலோ! என் பெயர் " + this.name); console.log(this); ) ); நபர்.வாழ்த்து();

இப்போது நாம் பெயரின் மதிப்பைப் பெறவில்லை, இதன் மதிப்பு சாளரம்!

ஆனால் ஏன்? அம்சம் என்னவென்றால், செயல்பாடு அறிவிக்கப்பட்ட சூழலில் இருந்து இதன் மதிப்பு எடுக்கப்பட்டது. ! இந்த செயல்பாடு எங்கு செய்யப்படும் என்பது முக்கியமல்ல. இதை படத்தில் காணலாம்:

எங்களிடம் ஒரு திட்டம் உள்ளது.

இதுவரை ஜன்னல் பொருளைத் தவிர அதில் எதுவும் இல்லை. ஒரு நபர் பொருள் சேர்க்கப்பட்டது. முறைக்கு அம்புக்குறி செயல்பாட்டைப் பயன்படுத்துகிறோம் என்பதைக் கவனியுங்கள். நாங்கள் சொன்னது போல், இதன் மதிப்பு சூழலிலிருந்து எடுக்கப்படும். சூழல் என்பது சூழல். இந்த வழக்கில், நபர் பொருளின் சூழல், அதன் அனைத்து பண்புகள் மற்றும் முறைகள், இருக்கும் சாளர பொருள். மேலும் இதன் மதிப்பு சூழலிலிருந்து எடுக்கப்பட்டால், இது சாளர பொருளைக் குறிக்கும்.

நாம் ஒரு வழக்கமான செயல்பாட்டைப் பார்த்தால், இது நபரின் பொருளையே குறிக்கிறது என்பதை நாம் அறிவோம். அம்பு செயல்பாடுகளில் இதன் மதிப்பு ஏன் சூழலில் இருந்து எடுக்கப்படுகிறது என்று நீங்கள் கேட்கலாம்? பதில் மிகவும் எளிது - அவர்கள் அதை அப்படியே செய்தார்கள்! :-) வித்தியாசமான சூழ்நிலையில் சிக்கல்களைத் தீர்க்க அம்பு செயல்பாடுகள் உருவாக்கப்பட்டன என்பதுதான் புள்ளி. ஒரு உதாரணத்தைப் பார்ப்போம். சிக்கலைப் பார்க்க, நாங்கள் எங்கள் அம்பு செயல்பாட்டிற்குத் திரும்புவோம்.

நபர் = (பெயர்: "பாப்", வாழ்த்து: செயல்பாடு () ( console.log("ஹலோ! என் பெயர் " + this.name); console.log(this); ) );

எங்கள் பாப் மிகவும் பிஸியாக இருக்கிறார் மற்றும் அவரது வேலையை முடிக்க சில வினாடிகள் தேவை என்று கற்பனை செய்யலாம். 2 வினாடிகள் காத்திருக்கவும். setTimeout() செயல்பாட்டைப் பயன்படுத்தி உருவகப்படுத்துகிறோம்; .இந்தச் செயல்பாடு ஒரு செயல்பாட்டை முதல் அளவுருவாகவும், காத்திருக்க வேண்டிய மில்லி விநாடிகளின் எண்ணிக்கையை இரண்டாவது அளவுருவாகவும் எடுத்துக்கொள்கிறது.

நபர் = (பெயர்: "பாப்", வாழ்த்து: செயல்பாடு () ( setTimeout(function () ( console.log("Hello! My name is " + this.name); console.log(this); ), 2000) ;)); நபர்.வாழ்த்து();

ஜாவாஸ்கிரிப்டில் உங்களுக்கு அனுபவம் இருந்தால், பிரச்சனை என்னவென்று உங்களுக்குப் புரியும் என்று நினைக்கிறேன். எப்படியிருந்தாலும், உலாவியில் என்ன நடக்கும் என்று பார்ப்போம். சரியாக இரண்டு வினாடிகள் கழித்து இந்த படத்தை உலாவியில் பார்ப்போம்.

ஆனால் ஏன்? நீங்கள் எங்கள் குறியீட்டைப் பார்த்தால், அது தர்க்கரீதியானது. நாம் வழக்கமான செயல்பாட்டைப் பயன்படுத்துவதால் இது நபரின் பொருளைக் குறிக்கிறது. விஷயம் என்னவென்றால், setTimeout() சாளர பொருளுக்கு சொந்தமானது. நீங்கள் இதை இப்படி எழுதினால்: window.setTimeout() , அப்படி எதைக் குறிக்கிறது என்று நினைக்கிறீர்கள்? கன்சோலில் நாம் அதே முடிவைப் பெறுவோம்! ES5 இல் இந்த சிக்கலை தீர்க்க பல வழிகள் உள்ளன. நாம் மிகவும் பொதுவான ஒன்றைப் பார்ப்போம்: setTimeout(), நான் மற்றொரு மாறியை அறிவித்து, இதை மதிப்பாக ஒதுக்குவேன். இப்போது, ​​செயல்பாட்டின் உடலில், இதற்குப் பதிலாக, அதைக் குறிப்பிடுவோம்.

நபர் = (பெயர்: "பாப்", வாழ்த்து: செயல்பாடு () ( அது = இதுவாக இருக்கட்டும்; setTimeout(செயல்பாடு () ( console.log("ஹலோ! என் பெயர் " + that.name); console.log(அது) ;), 2000);)); நபர்.வாழ்த்து();

இப்போது, ​​மூடப்பட்டதற்கு நன்றி, நாம் setTimeout() க்கு அனுப்பும் செயல்பாடு மாறியின் அணுகலைப் பெறும், அதன் மதிப்பு இதுவாக இருக்கும், அதாவது, இந்த விஷயத்தில், நபர் பொருள்.

தெளிவுக்காக, அதுவும் இதுவும் எதைக் குறிக்கிறது என்பதை நீங்கள் பார்க்கலாம்.

நபர் = (பெயர்: "பாப்", வாழ்த்து: செயல்பாடு () ( அது = இது; setTimeout(செயல்பாடு () ( console.log("ஹலோ! என் பெயர் " + that.name); console.log("இது. இது என்னுடையது = " + அது); console.log("இது என்னுடையது = " + இது); 2000); ) ); நபர்.வாழ்த்து();

கன்சோலில் உறுதிப்படுத்தலைப் பார்ப்போம்:

இது சாளர பொருளாக இருக்கும் என்பதை நாங்கள் காண்கிறோம் - இது = , அது நமது தனிப்பட்ட பொருளாக இருக்கும் - அது = .

ES6 இல், இந்தச் சிக்கலைத் தீர்க்க அம்புக்குறி செயல்பாட்டைப் பயன்படுத்தலாம்.

நபர் = (பெயர்: "பாப்", வாழ்த்து: செயல்பாடு () ( setTimeout(() => ( console.log("வணக்கம்! என் பெயர் " + this.name); console.log("இது எனது இது = "+ இது);), 2000);) ); நபர்.வாழ்த்து();

இதன் விளைவாக, கன்சோலில் பார்ப்போம்:

IN கிராஃபிக் உதாரணம்ஒரு அம்பு செயல்பாட்டிற்கு, சூழல் ஒரு நபர் பொருளாக இருக்கும், ஒரு சாளர பொருளாக அல்ல. அதனால்தான் இது நபரைக் குறிக்கும்.

சிறிய தொடரியல் கூடுதலாக, இது போன்ற சிக்கல்களைத் தீர்க்க அம்பு செயல்பாடுகள் அறிமுகப்படுத்தப்பட்டன.

குறிப்புக்கு, பாபெல் இதை எவ்வாறு தீர்த்தார் என்பதை நீங்கள் பார்க்கலாம்

Var நபர் = (பெயர்: "பாப்", வாழ்த்து: செயல்பாடு வாழ்த்து() (var _this = இது; setTimeout(செயல்பாடு () ( console.log("வணக்கம்! எனது பெயர் " + _this.name); console.log(" இது என்னுடையது = " + _இது); ), 2000);) ); நபர்.வாழ்த்து(); ES5 இல் நாங்கள் பயன்படுத்திய அதே முறையை Babel பயன்படுத்தினார். ஒரே வித்தியாசம் என்னவென்றால், மாறியை நாம் என்று அழைத்தோம், மற்றும் பேபல் அதை - _இது என்று அழைத்தோம். மூடப்பட்டதற்கு நன்றி, நாம் 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" ));

சுய-அழைப்பு செயல்பாடு இதுபோல் தெரிகிறது:

அம்பு செயல்பாடு வெளிப்பாடு என்பது வழக்கமான செயல்பாடு வெளிப்பாட்டிற்கு ஒரு தொடரியல் ரீதியாக கச்சிதமான மாற்றாகும், இருப்பினும் இது , வாதங்கள் , சூப்பர் , அல்லது 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.map (செயல்பாடு(உறுப்பு) ( return element.length; )); // மேலே உள்ள வழக்கமான செயல்பாட்டை உறுப்புகளுக்கு கீழே உள்ள அம்பு செயல்பாடாக எழுதலாம்.map((உறுப்பு) => ( return element.length; )); // // ஒரே ஒரு அளவுரு இருக்கும் போது, ​​சுற்றியிருக்கும் அடைப்புக்குறி உறுப்புகளை அகற்றலாம்.map (Element => ( return element.length; )); // // அம்பு செயல்பாட்டின் ஒரே அறிக்கை `திரும்ப` ஆக இருக்கும் போது, ​​நாம் `திரும்ப` அகற்றி // சுற்றியுள்ள சுருள் அடைப்புக்குறிகளை அகற்றலாம் உறுப்புகள்.map(உறுப்பு => உறுப்பு.நீளம்); // // இந்த விஷயத்தில், நமக்கு நீளமான சொத்து மட்டுமே தேவைப்படுவதால், நாம் சிதைக்கும் அளவுருவைப் பயன்படுத்தலாம்: // `நீளம்` என்பது நாம் பெற விரும்பும் சொத்துக்கு ஒத்திருப்பதைக் கவனிக்கவும், அதேசமயம் // வெளிப்படையாக சிறப்பு இல்லாத `lengthFooBArX` ஒரு மாறியின் பெயரை மட்டும் மாற்றலாம் // நீங்கள் கூறுகள் விரும்பும் எந்த செல்லுபடியாகும் மாறி பெயருக்கும்.map ((((நீளம்:lengthFooBArX)) => lengthFooBArX); // // இந்த டிஸ்ட்ரக்சரிங் பாராமீட்டர் ஒதுக்கீட்டை கீழே காணும் படியும் எழுதலாம். இருப்பினும், // இந்த எடுத்துக்காட்டில் நாங்கள் உருவாக்கப்பட்ட சொத்திற்கு `நீளம்` மதிப்பை ஒதுக்கவில்லை என்பதை நினைவில் கொள்ளவும். மாறாக, `நீளம்` மாறியின் நேரடிப் பெயர் // பொருளிலிருந்து நாம் பெற விரும்பும் சொத்தாகப் பயன்படுத்தப்படுகிறது. உறுப்புகள்.வரைபடம் (((நீளம்)) => நீளம்); //இதை தனித்தனியாக இல்லை

அம்பு செயல்பாடுகளுக்கு முன், ஒவ்வொரு புதிய சார்பும் அதன் சொந்த இந்த மதிப்பை எவ்வாறு அழைக்கப்படுகிறது என்பதை அடிப்படையாகக் கொண்டது:

• ஒரு கட்டமைப்பாளரின் விஷயத்தில் ஒரு புதிய பொருள்.
• கண்டிப்பான பயன்முறை செயல்பாடு அழைப்புகளில் வரையறுக்கப்படவில்லை.
• செயல்பாடு "பொருள் முறை" என அழைக்கப்பட்டால் அடிப்படை பொருள்.

இது ஒரு பொருள் சார்ந்த நிரலாக்க பாணியுடன் சிறந்ததை விட குறைவானது என நிரூபிக்கப்பட்டுள்ளது.

Function Person() ( // Person() கன்ஸ்ட்ரக்டர், `இது` என்பதை தானே ஒரு நிகழ்வாக வரையறுக்கிறது. this.age = 0; setInterval(function growUp() ( // non-strict modeல், growUp() function `ஐ வரையறுக்கிறது இது` // உலகளாவிய பொருளாக (ஏனென்றால் அது"எங்கே க்ரோஅப்() செயல்படுத்தப்படுகிறது.), // இது நபரின்() கட்டமைப்பாளரால் வரையறுக்கப்பட்ட `திஸ்` // இலிருந்து வேறுபட்டது. this.age++; ), 1000) ;) var p = புதிய நபர்();

ECMAScript 3/5 இல், இதில் உள்ள மதிப்பை ஒரு மாறிக்கு ஒதுக்குவதன் மூலம் இந்த சிக்கலை சரிசெய்ய முடியும்.

செயல்பாட்டு நபர்() ( var that = this; that.age = 0; setInterval(function growUp() ( // callback என்பது ` that` variable ஐக் குறிக்கிறது // இதன் மதிப்பு எதிர்பார்க்கப்படும் பொருளாகும். that.age++; ) , 1000); ) "கண்டிப்பாக பயன்படுத்தவும்"; var obj = (a: 10); Object.defineProperty(obj, "b", ( get: () => ( console.log(this.a, typeof this.a, this); // undefined "defined" Window (...) (அல்லது உலகளாவிய பொருள்) இதை திருப்பி அனுப்பு.

புதிய ஆபரேட்டரின் பயன்பாடு

அம்பு செயல்பாடுகளை கன்ஸ்ட்ரக்டர்களாகப் பயன்படுத்த முடியாது மேலும் புதியவற்றைப் பயன்படுத்தும்போது பிழை ஏற்படும்.

வர் ஃபூ = () => (); var foo = புதிய Foo(); // தட்டச்சுப் பிழை: ஃபூ ஒரு கட்டமைப்பாளர் அல்ல

முன்மாதிரி சொத்து பயன்பாடு

அம்பு செயல்பாடுகளுக்கு முன்மாதிரி பண்பு இல்லை.

வர் ஃபூ = () => (); console.log(Foo.prototype); // வரையறுக்கப்படவில்லை

மகசூல் முக்கிய வார்த்தையின் பயன்பாடு

அம்பு செயல்பாட்டின் உடலில் மகசூல் முக்கிய சொல்லைப் பயன்படுத்த முடியாது (அதில் உள்ள செயல்பாடுகளுக்குள் அனுமதிக்கப்படும் போது தவிர). இதன் விளைவாக, அம்பு செயல்பாடுகளை ஜெனரேட்டர்களாகப் பயன்படுத்த முடியாது.

செயல்பாட்டு உடல்

அம்பு செயல்பாடுகள் "சுருக்கமான உடல்" அல்லது வழக்கமான "பிளாக் பாடி" ஆகியவற்றைக் கொண்டிருக்கலாம்.

ஒரு சுருக்கமான உடலில், ஒரு வெளிப்பாடு மட்டுமே குறிப்பிடப்பட்டுள்ளது, இது மறைமுகமான வருவாய் மதிப்பாக மாறும். பிளாக் பாடியில், நீங்கள் ஒரு வெளிப்படையான அறிக்கையைப் பயன்படுத்த வேண்டும்.

Var func = x => x * x; // சுருக்கமான உடல் தொடரியல், "திரும்ப" var func = (x, y) => (திரும்ப x + y; ); // பிளாக் பாடியுடன், வெளிப்படையான "திரும்ப" தேவை

பொருள் எழுத்துக்களை திரும்பப் பெறுதல்

சுருக்கமான உடல் தொடரியல் அளவுருக்கள் => (object:literal) ஐப் பயன்படுத்தி பொருள் எழுத்துக்களை திரும்பப் பெறுவது எதிர்பார்த்தபடி செயல்படாது என்பதை நினைவில் கொள்ளவும்.

Var func = () => (foo: 1 ); // அழைப்பு func() வரையறுக்கப்படாமல் திரும்பும்! var func = () => (foo: செயல்பாடு () () ); // தொடரியல் பிழை: செயல்பாட்டு அறிக்கைக்கு ஒரு பெயர் தேவை

ஏனென்றால், பிரேஸ்களுக்குள் உள்ள குறியீடு (()) அறிக்கைகளின் வரிசையாகப் பாகுபடுத்தப்படுகிறது (அதாவது foo என்பது ஒரு லேபிளாகக் கருதப்படுகிறது, ஒரு பொருளின் சாவி அல்ல).

அடைப்புக் குறிக்குள் பொருளைச் சுருக்க வேண்டும்:

Var func = () => (( foo: 1 ));

வரி முறிவுகள்

ஒரு அம்பு செயல்பாடு அதன் அளவுருக்கள் மற்றும் அதன் அம்புக்கு இடையில் ஒரு கோடு இடைவெளியைக் கொண்டிருக்க முடியாது.

Var func = (a, b, c) => 1; // தொடரியல் பிழை: எதிர்பார்க்கப்படும் வெளிப்பாடு, கிடைத்தது "=>"

இருப்பினும், அம்புக்குறிக்குப் பிறகு கோடு இடைவெளியை வைப்பதன் மூலம் அல்லது குறியீடு அழகாகவும் பஞ்சுபோன்றதாகவும் இருப்பதை உறுதிசெய்ய கீழே காணப்படுவது போல் அடைப்புக்குறிகள்/பிரேஸ்களைப் பயன்படுத்தி இதைத் திருத்தலாம். நீங்கள் வாதங்களுக்கு இடையில் வரி இடைவெளிகளை வைக்கலாம்.

Var func = (a, b, c) => 1; var func = (a, b, c) => (1); var func = (a, b, c) => (திரும்ப 1 ); var func = (a, b, c) => 1; // தொடரியல் பிழை எறியப்படவில்லை

பாகுபடுத்தும் வரிசை

அம்பு செயல்பாட்டில் உள்ள அம்பு ஒரு ஆபரேட்டராக இல்லாவிட்டாலும், வழக்கமான செயல்பாடுகளுடன் ஒப்பிடும்போது ஆபரேட்டர் முன்னுரிமையுடன் வித்தியாசமாக செயல்படும் சிறப்பு பாகுபடுத்தும் விதிகளை அம்பு செயல்பாடுகள் கொண்டிருக்கின்றன.

திரும்ப அழைக்கலாம்; அழைப்பு = திரும்ப திரும்ப || செயல்பாடு (); // சரி அழைப்பு = திரும்ப திரும்ப || () => (); // தொடரியல் பிழை: செல்லுபடியாகாத அம்பு-செயல்பாட்டு வாதங்கள் கால்பேக் = கால்பேக் || (() => ()); // சரி

மேலும் எடுத்துக்காட்டுகள் // ஒரு வெற்று அம்பு செயல்பாடு வரையறுக்கப்படாமல் காலியாக இருக்கும் = () => (); (() => "foobar")(); // "foobar" என்பதைத் தருகிறது // (இது உடனடியாக செயல்படுத்தப்பட்ட செயல்பாடு வெளிப்பாடு) var simple = a => a > 15 ? 15: a; எளிய(16); // 15 எளிய (10); // 10 அதிகபட்சம் = (a, b) => a > b ? a: b; // எளிதான வரிசை வடிகட்டுதல், மேப்பிங், ... var arr = ; var தொகை = arr.reduce((a, b) => a + b); // 66 var கூட = arr.filter(v => v % 2 == 0); // var இரட்டை = arr.map(v => v * 2); // // மேலும் சுருக்கமான வாக்குறுதி சங்கிலிகள் உறுதியளிக்கின்றன.அதன் (a => ( // ... )).பின் (b => ( // ... )); // செட் டைம்அவுட்(() => (console.log("எனக்கு விரைவில் நடக்கும்"); setTimeout(() => (// deeper code console.log("நான் பின்னர் நடக்கும்") ;), பதினொரு); விவரக்குறிப்புகள் விவரக்குறிப்பு நிலை கருத்து

ECMAScript 2015 (6வது பதிப்பு, ECMA-262)	தரநிலை	ஆரம்ப வரையறை.
ECMAScript சமீபத்திய வரைவு (ECMA-262) அந்த விவரக்குறிப்பில் "அம்பு செயல்பாடு வரையறைகள்" என்பதன் வரையறை.	வரைவு

உலாவி இணக்கத்தன்மை

இந்தப் பக்கத்தில் உள்ள பொருந்தக்கூடிய அட்டவணை கட்டமைக்கப்பட்ட தரவிலிருந்து உருவாக்கப்பட்டது. நீங்கள் தரவுக்கு பங்களிக்க விரும்பினால், தயவுசெய்து https://github.com/mdn/browser-compat-data ஐப் பார்க்கவும் மற்றும் எங்களுக்கு இழுக்கும் கோரிக்கையை அனுப்பவும்.

GitHub இல் பொருந்தக்கூடிய தரவைப் புதுப்பிக்கவும்

டெஸ்க்டாப் மொபைல் சர்வர் Chrome எட்ஜ் பயர்பாக்ஸ் இன்டர்நெட் எக்ஸ்ப்ளோரர் ஓபரா சஃபாரி ஆண்ட்ராய்டு வெப்வியூ ஆண்ட்ராய்டுக்கான குரோம் பயர்பாக்ஸிற்கான ஆண்ட்ராய்டு ஓபரா ஆண்ட்ராய்டு சஃபாரி ஐஓஎஸ் சாம்சங் இன்டர்நெட் Node.js இல்அம்பு செயல்பாடுகள் அளவுருக்களில் காற்புள்ளியைப் பின்தொடரும்

குரோம் முழு ஆதரவு 45

எட்ஜ் முழு ஆதரவு ஆம்

பயர்பாக்ஸ் முழு ஆதரவு 22 குறிப்புகள் முழு ஆதரவு 22 குறிப்புகள் குறிப்புகள் Firefox 39 க்கு முன், அம்பு செயல்பாடு வாதங்களுக்குப் பிறகு ஒரு வரி டெர்மினேட்டர் (\n) தவறாக அனுமதிக்கப்பட்டது. ES2015 விவரக்குறிப்பு மற்றும் () \n => போன்ற குறியீட்டிற்கு இணங்க இது சரி செய்யப்பட்டது

IE ஆதரவு இல்லை

ஓபரா முழு ஆதரவு 32

சஃபாரி முழு ஆதரவு 10

WebView Android முழு ஆதரவு 45

Chrome Android முழு ஆதரவு 45

பயர்பாக்ஸ் ஆண்ட்ராய்டு முழு ஆதரவு 22 குறிப்புகள் முழு ஆதரவு 22 குறிப்புகள் குறிப்புகள் பயர்பாக்ஸில் அம்புக்குறி செயல்பாடுகளின் ஆரம்ப செயலாக்கம் அவற்றை தானாகவே கடுமையாக்கியது. பயர்பாக்ஸ் 24 இல் இருந்து இது மாற்றப்பட்டது. "கண்டிப்பானதைப் பயன்படுத்து"; இப்போது தேவைப்படுகிறது. குறிப்புகள் Firefox 39 க்கு முன், அம்பு செயல்பாடு வாதங்களுக்குப் பிறகு ஒரு வரி டெர்மினேட்டர் (\n) தவறாக அனுமதிக்கப்பட்டது. ES2015 விவரக்குறிப்புக்கு இணங்க இது சரி செய்யப்பட்டது மற்றும் () \n => () போன்ற குறியீடு இப்போது இந்த மற்றும் பிற பதிப்புகளில் ஒரு தொடரியல் பிழையை வீசும்.

Opera Android முழு ஆதரவு 32

சஃபாரி iOS முழு ஆதரவு 10

சாம்சங் இணைய ஆண்ட்ராய்டு முழு ஆதரவு 5.0

nodejs முழு ஆதரவு ஆம்

Chrome முழு ஆதரவு 58

விளிம்பு?

பயர்பாக்ஸ் முழு ஆதரவு 52

IE ஆதரவு இல்லை

ஓபரா முழு ஆதரவு 45

சஃபாரி?

WebView Android முழு ஆதரவு 58

Chrome Android முழு ஆதரவு 58

பயர்பாக்ஸ் ஆண்ட்ராய்டு முழு ஆதரவு 52

ஓபரா ஆண்ட்ராய்டு முழு ஆதரவு 43

சஃபாரி iOS?

சாம்சங் இணைய ஆண்ட்ராய்டு முழு ஆதரவு 7.0

nodejs முழு ஆதரவு ஆம்

Legend முழு ஆதரவு முழு ஆதரவு இல்லை ஆதரவு இல்லை இணக்கத்தன்மை தெரியவில்லை இணக்கத்தன்மை தெரியவில்லை செயல்படுத்தல் குறிப்புகளை பார்க்கவும். செயல்படுத்தல் குறிப்புகளைப் பார்க்கவும்.

• பயிற்சி

புதிய ECMAScript 6 தரநிலையின் மிகவும் சுவாரஸ்யமான பகுதிகளில் ஒன்று அம்பு செயல்பாடுகள் ஆகும். அம்பு செயல்பாடுகள், பெயர் குறிப்பிடுவது போல, அம்புக்குறி => ஐப் பயன்படுத்தும் புதிய தொடரியல் மூலம் வரையறுக்கப்படுகிறது. இருப்பினும், அவற்றின் சிறந்த தொடரியல் கூடுதலாக, அம்பு செயல்பாடுகள் மற்ற வழிகளில் பாரம்பரிய செயல்பாடுகளிலிருந்து வேறுபடுகின்றன:

• லெக்சிகல் பிணைப்பு. மதிப்புகள் சிறப்பு மாறிகள்இது , சூப்பர் , மற்றும் வாதங்கள் அம்பு செயல்பாடுகள் எவ்வாறு அழைக்கப்பட்டன என்பதன் அடிப்படையில் அல்ல, ஆனால் அவை எவ்வாறு உருவாக்கப்பட்டன என்பதன் மூலம் தீர்மானிக்கப்படுகிறது.
• மாறாத இந்த , சூப்பர் மற்றும் வாதங்கள் . அம்பு செயல்பாடுகளுக்குள் இருக்கும் இந்த மாறிகளின் மதிப்புகள் முழுவதும் மாறாமல் இருக்கும் வாழ்க்கை சுழற்சிசெயல்பாடுகள்.
• அம்பு செயல்பாடுகளை ஒரு கட்டமைப்பாளராகப் பயன்படுத்த முடியாது மற்றும் புதிய ஆபரேட்டருடன் பயன்படுத்தும்போது பிழையை எறியுங்கள்.
• வாதங்கள் மாறியின் "நேட்டிவ்" மதிப்பு கிடைக்காதது.

இந்த வேறுபாடுகளை அறிமுகப்படுத்த பல காரணங்கள் இருந்தன. முதலாவது ஜாவாஸ்கிரிப்ட்டில் பைண்டிங் அடிக்கடி பயன்படுத்தப்படுகிறது. பாரம்பரிய செயல்பாடுகளைப் பயன்படுத்தும் போது சரியான இந்த மதிப்பை இழப்பது மிகவும் எளிதானது, இது எதிர்பாராத விளைவுகளுக்கு வழிவகுக்கும். மற்றொரு காரணம், JS என்ஜின்கள் இந்த கட்டுப்பாடுகள் காரணமாக அம்பு செயல்பாடுகளை எளிதாக மேம்படுத்த முடியும் (ஒரு கட்டமைப்பாளராகப் பயன்படுத்தக்கூடிய மற்றும் மாற்றியமைக்க இலவசமான பாரம்பரிய செயல்பாடுகளுக்கு மாறாக சிறப்பு மாறிகள்).

குறிப்பு: இந்தக் கட்டுரை ECMAScript 6 அம்பு செயல்பாடுகளைப் புரிந்துகொள்வது என்ற கட்டுரையின் இலவச மொழிபெயர்ப்பிலிருந்தும், விவரக்குறிப்பின் சமீபத்திய வரைவின் வாசிப்பிலிருந்தும் (ஜனவரி 20, 2014 வரைவு Rev 22) தொகுப்பாகும்.

தொடரியல் பொதுவாக, அம்பு செயல்பாடுகளின் தொடரியல் இது போல் தெரிகிறது:

வர் வேடிக்கை = (x) => x;
இது Scala, CoffeeScript போன்ற மொழிகளில் உள்ள ஒத்த தொடரியல் மற்றும் C# இலிருந்து லாம்ப்டா வெளிப்பாடுகளின் தொடரியல் போன்றது.

நீங்கள் செயல்பாட்டை எவ்வாறு அறிவிக்கிறீர்கள் என்பதைப் பொறுத்து அம்பு செயல்பாடுகளின் தொடரியல் மாறுபடும். அறிவிப்பு எப்போதும் வாதங்களின் பட்டியலுடன் தொடங்குகிறது, அதைத் தொடர்ந்து அம்புக்குறி மற்றும் செயல்பாட்டின் உடல். நீங்கள் எழுதுவதைப் பொறுத்து வாதப் பட்டியல் மற்றும் செயல்பாட்டு அமைப்பு இரண்டும் வெவ்வேறு வடிவங்களை எடுக்கலாம்.

ஒரு அளவுரு, ஒரு வாதத்தை எடுத்து, அதை வெறுமனே திருப்பி அளிக்கும் அம்பு செயல்பாட்டை அறிவிப்பது மிகவும் எளிது:

Var பிரதிபலிக்கும் = மதிப்பு => மதிப்பு; // var பிரதிபலிப்புக்கு சமமானது = செயல்பாடு (மதிப்பு) (திரும்ப மதிப்பு; )
ஒரு அம்பு செயல்பாட்டிற்கு ஒரே ஒரு வாதம் இருந்தால், அடைப்புக்குறி இல்லாமல் அதை அறிவிக்க முடியும். அம்புக்குறியைப் பின்தொடரும் செயல்பாட்டுப் பொருளில் சுருள் பிரேஸ்கள் இல்லாமல் இருக்கலாம் மற்றும் ரிட்டர்ன் கீவேர்டு இல்லாமல் இருக்கலாம்.

பல அளவுருக்கள் ஆனால் நீங்கள் ஒன்றுக்கு மேற்பட்ட அளவுருக்களை அறிவிக்க விரும்பினால், நீங்கள் அளவுரு பட்டியலை அடைப்புக்குறிக்குள் இணைக்க வேண்டும்:

வர் தொகை = (எண்1, எண்2) => எண்1 + எண்2; // var தொகைக்கு சமம் = செயல்பாடு(எண்1, எண்2) (திரும்ப எண்1 + எண்2; );
கூட்டுச் செயல்பாடு இரண்டு வாதங்களைச் சேர்க்கிறது. முந்தைய எடுத்துக்காட்டில் இருந்து ஒரே வித்தியாசம் அடைப்புக்குறிகள் மற்றும் கமா (பாரம்பரிய செயல்பாடுகளைப் போலவே) இருப்பதுதான்.

அளவுருக்கள் இல்லை இதேபோல், எந்த வாதங்களும் இல்லாத ஒரு செயல்பாடு அடைப்புக்குறிக்குள் ஒரு வெற்று அளவுரு பட்டியலைக் கொண்டிருக்க வேண்டும்:

வர் தொகை = () => 1 + 2; // var sum = செயல்பாடு () ( திரும்ப 1 + 2; );

பாரம்பரிய செயல்பாடு உடல் தொடரியல் அம்பு செயல்பாட்டின் உடலுக்கான பாரம்பரிய செயல்பாடு தொடரியல் ஒன்றுக்கு மேற்பட்ட வெளிப்பாடுகளைக் கொண்டிருக்கும் போது நீங்கள் பயன்படுத்தலாம். அதாவது, செயல்பாட்டை சுருள் பிரேஸ்களில் போர்த்தி, திரும்பும் முக்கிய சொல்லைச் சேர்க்கவும்:

வர் தொகை = (எண்1, எண்2) => (எண்1 + எண்2; ) // வார் தொகைக்கு சமம் = செயல்பாடு(எண்1, எண்2) (எண்1 + எண்2; );
செயல்பாட்டின் உடல், மதிப்புகள் தவிர, உன்னதமான செயல்பாடுகளைப் போலவே அதே வழியில் செயலாக்கப்படும் சிறப்பு மாறிகள்இது, சூப்பர் மற்றும் வாதங்கள் வித்தியாசமாக மதிப்பிடப்படும்.

பொருள் தனித்தனியாக, சுருள் பிரேஸ்கள் இல்லாத ஒரு செயல்பாட்டின் உடல் அடைப்புக்குறிக்குள் இணைக்கப்பட வேண்டும் என்பதைக் குறிப்பிட வேண்டும்:

Var getTempItem = ஐடி => (( ஐடி: ஐடி, பெயர்: "டெம்ப்" )); // var getTempItem = செயல்பாடு(ஐடி) க்கு சமமானது (திரும்ப (ஐடி: ஐடி, பெயர்: "டெம்ப்") );
அடைப்புக்குறிக்குள் ஒரு பொருளை வைப்பது, சுருள் பிரேஸ்கள் ஒரு செயல்பாட்டு உடலுக்கான பாரம்பரிய தொடரியல் தொடக்கம் அல்ல, மாறாக ஒரு எழுத்தின் தொடக்கம் என்று பாகுபடுத்தி கூறுகிறது.

அம்பு செயல்பாட்டிற்குள் "நேட்டிவ்" ஆர்குமெண்ட்ஸ் ஆப்ஜெக்ட் கிடைக்காததால் அளவுருக்களின் மாறி எண்ணிக்கை நீங்கள் மீதமுள்ள வடிவத்தைப் பயன்படுத்த வேண்டிய அளவுருக்களின் மாறி எண்ணிக்கை சிதைக்கும் வடிவங்கள். உதாரணமாக:

Var getTempItems = (...ஓய்வு) => ஓய்வு; // var getTempItems = செயல்பாடு () ( திரும்ப .slice.apply(arguments) );

அளவுருவாக டெம்ப்ளேட்டை சிதைக்கிறது இந்தக் கட்டுரையின் நோக்கங்களுக்காக, சிதைக்கும் வடிவங்களை நாங்கள் கருத்தில் கொள்ளவில்லை - ஜாவாஸ்கிரிப்ட்டின் அடுத்த பதிப்பான ECMAScript 6 இன் மேலோட்டம் என்ற கட்டுரையில் அவற்றைப் பற்றி நீங்கள் படிக்கலாம், இருப்பினும் இந்தத் தகவல் ஓரளவு காலாவதியானது.

முந்தைய எடுத்துக்காட்டில் இருந்து நீங்கள் பார்க்க முடியும், அம்பு செயல்பாடு ஒரே ஒரு வாதத்தைக் கொண்டிருந்தாலும், பயன்படுத்தும்போது நீங்கள் அடைப்புக்குறிகளைப் பயன்படுத்த வேண்டும். சிதைக்கும் வடிவங்கள்செயல்பாட்டின் ஒரே அளவுருவாக. மற்றவர்களுடன் எடுத்துக்காட்டுகள் வார்ப்புருக்கள்:

Var a = ((a)) => a; var b = ([b]) => b;

அம்பு செயல்பாடுகளைப் பயன்படுத்துதல் சூழலை அமைத்தல் ஜாவாஸ்கிரிப்டில் உள்ள ஒரு பொதுவான காட்சியானது இந்த மதிப்பை ஒரு செயல்பாட்டிற்குள் (பைண்டிங்) அமைக்கிறது. செயல்பாடு செயல்படுத்தப்படும் சூழலைப் பொறுத்து இதன் மதிப்பை மாற்ற முடியும் என்பதால், நீங்கள் முற்றிலும் வேறுபட்ட ஒன்றைக் குறிப்பிடும்போது ஒரு பொருளின் மீது தவறாகச் செயல்பட முடியும். பின்வரும் உதாரணத்தைப் பாருங்கள்:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", function(event) ( this.doSomething(event.type); // error )); ) , doSomething: செயல்பாடு( வகை) ( console.log(" கையாளுதல் " + வகை + "க்கு " + this.id) ) );
மேலே உள்ள குறியீட்டில், பக்கத்தில் உள்ள கிளிக்குகளை pageHandler ஆப்ஜெக்ட் கையாள வேண்டும். init() முறையானது, விரும்பிய நிகழ்வில் ஒரு கையாளியை இணைக்கிறது, இது உள்நாட்டில் இதை அழைக்கிறது.doSomething() . இருப்பினும், குறியீடு சரியாக வேலை செய்யாது. this.doSomething()க்கான குறிப்பு செல்லுபடியாகாது, ஏனெனில் இது நோக்கம் கொண்ட pageHandler க்குப் பதிலாக நிகழ்வு கையாளுதலுக்குள் இருக்கும் ஆவணப் பொருளைக் குறிக்கிறது. இந்தக் குறியீட்டை இயக்க முயற்சித்தால், ஆவணப் பொருளில் doSomething முறை இல்லாததால் பிழை ஏற்படும்.

இந்த மதிப்பை நீங்கள் handleEvent ஐப் பயன்படுத்தி பேஜ்ஹேண்ட்லர் பொருளுடன் பிணைக்கலாம் அல்லது செயல்பாட்டில் நிலையான பைண்ட்() முறையை அழைப்பதன் மூலம்:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", (function(event) ( this.doSomething(event.type); // error )).bind(this)) ; ), doSomething: செயல்பாடு(வகை) ( console.log(" கையாளுதல் " + வகை + "க்கு " + this.id) ) );
இப்போது குறியீடு நோக்கம் போல் செயல்படுகிறது, ஆனால் அது மிகவும் சிக்கலானதாகத் தெரிகிறது. கூடுதலாக, ஒவ்வொரு முறையும் பைண்ட்(இதை) அழைப்பதன் மூலம், நீங்கள் ஒரு புதிய செயல்பாட்டை உருவாக்கும் போது, ​​இந்த மதிப்பு பேஜ்ஹேண்ட்லரின் மதிப்புடன் இணைக்கப்பட்டுள்ளது, ஆனால் குறியீடு நீங்கள் விரும்பியபடி செயல்படுகிறது.

அம்பு செயல்பாடுகள் சிக்கலை மிகவும் நேர்த்தியான முறையில் தீர்க்கின்றன, ஏனெனில் அவை இதன் மதிப்புக்கு லெக்சிகல் பைண்டிங்கைப் பயன்படுத்துகின்றன (அதே போல் சூப்பர் மற்றும் வாதங்கள் ) மேலும் அதன் மதிப்பு அம்பு செயல்பாடு உருவாக்கப்பட்ட இடத்தில் இதன் மதிப்பால் தீர்மானிக்கப்படுகிறது. உதாரணத்திற்கு:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", event => this.doSomething(event.type)); ) , doSomething: function(type) ( console.log( "" + this.id க்கு " + வகை + " கையாளுதல்) );
இந்த எடுத்துக்காட்டில், ஹேண்ட்லர் என்பது இதை அழைக்கும் அம்பு செயல்பாடு ஆகும்.doSomething() . இதன் மதிப்பு init() செயல்பாட்டிலும், குறியீட்டிலும் உள்ளதைப் போலவே இருக்கும் இந்த எடுத்துக்காட்டில்பைண்ட்() பயன்படுத்தியதைப் போலவே சரியாக வேலை செய்யும். this.doSomething()க்கான அழைப்பு ஒரு மதிப்பை அளிக்கிறதா இல்லையா என்பதைப் பொருட்படுத்தாமல், அம்பு செயல்பாட்டின் உடலில் உள்ள வெளிப்பாடு சுருள் பிரேஸ்களில் இணைக்கப்பட வேண்டியதில்லை.

கூடுதலாக, மேலே உள்ள எடுத்துக்காட்டு bind() ஐ அழைப்பதை விட மிகவும் திறமையானது, ஏனெனில் இது உலாவிக்கான பின்வரும் குறியீட்டைப் போலவே உள்ளது:

Var pageHandler = ( id: "123456" , init: function() ( var self = this; document.addEventListener("click", function(event) ( return self.doSomething(event.type) )); ) , doSomething: செயல்பாடு(வகை) ( console.log(" கையாளுதல் " + வகை + "க்கு " + this.id) ) );
அதாவது படைப்பு நிகழாது புதிய அம்சம், பைண்ட்() அழைப்பைப் போலவே.

பல அழைப்புகளுக்கு இடையேயான சூழலை "எறிதல்" வெளிப்படையாக, நீங்கள் ஒரு அம்புக்குறியின் செயல்பாட்டை மற்றொன்றிற்குள் சேர்க்கலாம், அதன் மூலம் இந்த மதிப்பை "எறிந்து":

Var obj = ( arr1: , arr2: ["a", "b", "c"] , concatenate: function(a, b)( return a + "|" + b ) , வெட்டும்: செயல்பாடு() ( இதைத் திருப்பி .arr1.reduce((தொகை, v1) => // அம்பு செயல்பாடு 1 this.arr2.reduce((தொகை, 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 |a", "3|b", "3|c"]

ஒரு வாதமாகப் பயன்படுத்தவும் அம்புக்குறி செயல்பாடுகளின் குறுகிய தொடரியல் மற்ற செயல்பாடு அழைப்புகளுக்கு வாதங்களாக அனுப்புவதற்கு சிறந்த வேட்பாளர்களை உருவாக்குகிறது. எடுத்துக்காட்டாக, நீங்கள் ஒரு வரிசையை வரிசைப்படுத்த விரும்பினால், நீங்கள் பொதுவாக இதுபோன்ற ஒன்றை எழுதுவீர்கள்:

Var முடிவு = மதிப்புகள்.sort(function(a, b) ( return a - b ));
ஒரு எளிய செயல்பாட்டிற்கு மிகவும் வாய்மொழி. அம்பு செயல்பாட்டிற்கான குறுகிய குறியீட்டுடன் ஒப்பிடுக:

Var முடிவு = மதிப்புகள்.sort((a, b) => a - b);
array() , map() , reduce() மற்றும் பல முறைகளின் பயன்பாடு குறுகிய அம்பு செயல்பாடு தொடரியல் மூலம் எளிமைப்படுத்தப்படலாம்.

அம்பு செயல்பாடுகளின் பிற அம்சங்கள் பாரம்பரிய செயல்பாடுகளிலிருந்து அம்பு செயல்பாடுகள் வேறுபட்டாலும், அவை சில பொதுவான அம்சங்களைக் கொண்டுள்ளன:

• ஆபரேட்டர் வகை அம்பு செயல்பாட்டிற்கு "செயல்பாடு" என்பதை வழங்கும்
• அம்பு செயல்பாடு "வகுப்பு" செயல்பாட்டின் ஒரு நிகழ்வாகும், எனவே நிகழ்வு ஒரு பாரம்பரிய செயல்பாட்டைப் போலவே செயல்படும்.
• நீங்கள் இன்னும் call() , apply() , and bind() முறைகளைப் பயன்படுத்தலாம், ஆனால் அவை இதன் மதிப்பை பாதிக்காது என்பதை நினைவில் கொள்ளுங்கள்
• நீங்கள் toMethod() முறையைப் பயன்படுத்தலாம், இருப்பினும் இது சூப்பர் () இன் மதிப்பை மாற்றாது toMethod() முறை es6 இல் அறிமுகப்படுத்தப்பட்டது மற்றும் இந்தக் கட்டுரையில் குறிப்பிடப்படவில்லை).

பாரம்பரிய செயல்பாடுகளிலிருந்து குறிப்பிடத்தக்க வேறுபாடு என்னவென்றால், புதிய ஆபரேட்டரைப் பயன்படுத்தி அம்புக்குறி செயல்பாட்டை அழைக்கும் முயற்சியானது இயக்க நேரப் பிழையை ஏற்படுத்தும். சுருக்கமான அம்பு செயல்பாடுகள் ECMAScript 6 இல் மிகவும் சுவாரஸ்யமான கண்டுபிடிப்புகளில் ஒன்றாகும், இது ஒரு சுருக்கமான வரையறை தொடரியல் கொண்ட, எளிதாக்கும். செயல்பாடுகளை ஒரு அளவுரு மதிப்பாக மற்றொரு செயல்பாட்டிற்கு அனுப்புதல்.

சுருக்கமான தொடரியல் சிக்கலான விஷயங்களை இன்னும் சிக்கலான எளிய முறையில் எழுத அனுமதிக்கும். எடுத்துக்காட்டாக, அடையாளங்காட்டி ஜெனரேட்டர் இப்படித்தான் இருக்கும் (இது es5 இல் மிகவும் வாய்மொழியாகத் தெரிகிறது):

idGen = (தொடக்கம் = 0, id = தொடக்கம், மீட்டமை = (newId = தொடக்கம்) => id = newId, next = () => id++) => ((மீட்டமை, அடுத்தது)); ஜென் = idGen(100); console.log(gen.next(), gen.next(), gen.reset(10), gen.next());//100 101 10 10
லெக்சிகல் பைண்டிங் டெவலப்பர்களுக்கு வலி மற்றும் விரக்தியின் மிகப்பெரிய ஆதாரங்களில் ஒன்றை மூடும், மேலும் js இன்ஜின் மட்டத்தில் மேம்படுத்தல் காரணமாக செயல்திறனை மேம்படுத்தும்.


நீங்கள் அம்பு செயல்பாடுகளை முயற்சிக்க விரும்பினால், மேலே உள்ள எடுத்துக்காட்டுகளை Firefox கன்சோலில் இயக்கலாம். இந்த நேரத்தில்(02.2014 FF28) அம்புக்குறி செயல்பாடுகளை முழுமையாக ஆதரிக்கிறது (FF28 வாதங்களின் மதிப்பை தவறாக கணக்கிடுகிறது ).

ஆன்லைன் மொழிபெயர்ப்பாளர் ட்ரேசியரில் அம்பு செயல்பாடுகள் மற்றும் பிற es6 அம்சங்களையும் முயற்சி செய்யலாம்.

குறிச்சொற்கள்: குறிச்சொற்களைச் சேர்க்கவும்