මොන කරන්නේ ...
මේ කේතය හා එය හැඳින්වේ? (JSX භාවිතා කරමින්) ක්රියාත්මක වෙන්න එපා
<Modal {...this.props} title='Modal heading' animation={false}>
මොන කරන්නේ ...
මේ කේතය හා එය හැඳින්වේ? (JSX භාවිතා කරමින්) ක්රියාත්මක වෙන්න එපා
<Modal {...this.props} title='Modal heading' animation={false}>
...
ක්රියාකරු විවිධ සන්දර්භයන් තුළ වෙනස් ලෙස හැසිරේ. මෙම සන්දර්භය තුළ, එය @TJ Crowder විසින් පහත විස්තර කර ඇති “පැතිරීමේ” ක්රියාකරු වේ. වෙනත් සන්දර්භයක් තුළ මෙය @ ටොමාස් නිකොඩිම් විසින් පහත විස්තර කර ඇති "විවේක" ක්රියාකරු විය හැකිය.
Answers:
එය දේපල ව්යාප්ති අංකනයයි . එය ES2018 හි එකතු කරන ලදි (අරා / පුනරාවර්තන සඳහා පැතිරීම මීට පෙර, ES2015 විය), නමුත් එය සම්ප්රේෂණ හරහා ප්රතික්රියා ව්යාපෘති වල දීර් time කාලයක් තිස්සේ සහාය ලබා දී ඇත (“ JSX පැතිරීමේ ගුණාංග ” ලෙස ඔබට එය වෙනත් තැනක කළ හැකි වුවද, ගුණාංග පමණක් නොවේ ).
{...this.props}
පිටතට ව්යාප්ත වූ "තමන්ගේ ම" ගණ්ය තුළ දේපළ props
මත විවික්ත ගුණ ලෙස Modal
ඔබ නිර්මාණය කරන්නේ අංගයක්. නම් උදාහරණයක් වශයෙන්, this.props
අඩංගු a: 1
හා b: 2
, එසේ නම්
<Modal {...this.props} title='Modal heading' animation={false}>
සමාන වනු ඇත
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
නමුත් එය ගතිකය, එබැවින් ඕනෑම "තමන්ගේම" ගුණාංග props
ඇතුළත් වේ.
සිට children
දී "තමන්ගේ ම" දේපළ වේ props
පැතිර එය ඇතුලත් වනු ඇත. එබැවින් මෙය දිස්වන සංරචකයේ ළමා අංග තිබේ නම්, ඒවා වෙත යවනු ලැබේ Modal
. ආරම්භක ටැගය හා සංවෘත ටැග් අතර ළමා අංග තැබීම සින්ටැක්ටික් සීනි - හොඳ වර්ගයක් - children
ආරම්භක ටැගය තුළ දේපලක් තැබීම සඳහා . උදාහරණයක්:
පැතිරීමේ අංකනය එම භාවිත අවස්ථාව සඳහා පමණක් නොව, පවතින වස්තුවක බොහෝ (හෝ සියල්ලම) ගුණාංග සහිත නව වස්තුවක් නිර්මාණය කිරීම සඳහා පහසුය - ඔබ තත්වය වෙනස් කරන විට එය බොහෝ දුරට පැමිණේ, ඔබට තත්වය වෙනස් කළ නොහැකි බැවින් කෙලින්ම:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
එය this.state.foo
නව වස්තුවක් සමඟ දේපල foo
හැර අනෙක් සියලුම ගුණාංග සමඟ ප්රතිස්ථාපනය a
වේ "updated"
.
children
දේපල හෝ ඔවුන් ඒකාබද්ධ කරන්නේ?
children
. අත්හදා බැලීම් මට කියන්නේ ඔබ හඳුන්වන ගුණාංගයක් හරහා ලබා දෙන ළමයින්ට children
ආරම්භක සහ අවසාන ටැග් අතර ඔබ විසින් නියම කරන ලද (ය) මගින් අතික්රමණය වන නමුත් එය නිර්වචනය නොකළ හැසිරීමක් නම්, මම එය මත විශ්වාසය නොතබන බවට සහතික වෙමි.
ඔබ දන්නා පරිදි නම නිරූපණය කරන පැතිරුම් ගුණාංග...
ලෙස හැඳින්වෙන අතර එය ප්රකාශනයක් පුළුල් කිරීමට ඉඩ දෙයි.
var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]
මේ අවස්ථාවේ දී (මම එය සරල කරන්නෙමි).
//just assume we have an object like this:
var person= {
name: 'Alex',
age: 35
}
මෙය:
<Modal {...person} title='Modal heading' animation={false} />
සමාන වේ
<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />
ඒ නිසා කෙටි එය තියෙන්නේ පිළිවෙළකට කෙටි-සැපයුම අත්හිටුවන, අපට කිව හැකි .
තිත් තුන ES6 හි පැතිරීමේ ක්රියාකරු නියෝජනය කරයි . එය අපට ජාවාස්ක්රිප්ට් හි දේවල් කිහිපයක් කිරීමට ඉඩ දෙයි:
සංයුක්ත අරා
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
var games = [...shooterGames, ...racingGames];
console.log(games) // ['Call of Duty', 'Far Cry', 'Resident Evil', 'Need For Speed', 'Gran Turismo', 'Burnout']
අරාව විනාශ කිරීම
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
var [first, ...remaining] = shooterGames;
console.log(first); //Call of Duty
console.log(remaining); //['Far Cry', 'Resident Evil']
වස්තු දෙකක් ඒකාබද්ධ කිරීම
var myCrush = {
firstname: 'Selena',
middlename: 'Marie'
};
var lastname = 'my last name';
var myWife = {
...myCrush,
lastname
}
console.log(myWife); // {firstname: 'Selena',
// middlename: 'Marie',
// lastname: 'my last name'}
තිත් තුන සඳහා තවත් භාවිතයක් ඇති අතර එය රෙස්ට් පරාමිතීන් ලෙස හැඳින්වේ. එමඟින් සියලු තර්ක එක් අරාවක් ලෙස ශ්රිතයකට ගෙනයාමට හැකි වේ.
අරාව ලෙස ක්රියාකාරී තර්ක
function fun1(...params) {
}
ජාවාස්ක්රිප්ට් හි තිත් තුන පැතිරීම / විවේක ක්රියාකරු වේ.
පැතිරුණු ක්රියාකරු
මෙම ව්යාප්තිය කාරක රීති ප්රකාශනයක් බහු තර්ක ඇතැයි අපේක්ෂා කෙරේ ස්ථානවල පුළුල් කිරීමට ඉඩ ලබා දෙයි.
myFunction(...iterableObj);
[...iterableObj, 4, 5, 6]
[...Array(10)]
විවේක පරාමිතීන්
මෙම ඉතිරි කාරක රීති පරාමිතිය තර්ක විචල්ය සංඛ්යාවක් සමග කටයුතු සඳහා භාවිතා කරනු ඇත.
function(a, b, ...theArgs) {
// ...
}
අරා සඳහා පැතිරීමේ / විවේක ක්රියාකරු ES6 හි හඳුන්වා දෙන ලදී. වස්තු පැතිරීම / විවේක ගුණාංග සඳහා රාජ්ය 2 යෝජනාවක් ඇත.
ටයිප්ස්ක්රිප්ට් ද පැතිරෙන සින්ටැක්ස් සඳහා සහය දක්වන අතර එය කුඩා සමඟ ECMAScript හි පැරණි අනුවාද වලට සම්ප්රේෂණය කළ හැකිය ගැටළු .
මෙය ES6 හි අංගයක් වන අතර එය ප්රතික්රියා වලදීද භාවිතා වේ. පහත උදාහරණය දෙස බලන්න:
function Sum(x,y,z) {
return x + y + z;
}
console.log(Sum(1,2,3)); //6
අපට උපරිම පරාමිති 3 ක් තිබේ නම් මෙම ක්රමය හොඳයි. නමුත්, උදාහරණයක් ලෙස පරාමිති 110 ක් එකතු කිරීමට අවශ්ය නම් කුමක් කළ යුතුද? අපි ඒවා සියල්ලම නිර්වචනය කර ඒවා එකින් එක එකතු කළ යුතුද?
ඇත්ත වශයෙන්ම කිරීමට පහසු ක්රමයක් ඇත, එය SPREAD ලෙස හැඳින්වේ . ඔබ ලියන සියලු පරාමිතීන් පසුකර යනවා වෙනුවට:
function (...numbers){}
අපට පරාමිතීන් කීයක් තිබේදැයි අපට අදහසක් නැත, නමුත් අපි දන්නවා ඒවායේ ගොඩවල් ඇති බව. ES6 මත පදනම්ව, අපට ඉහත ශ්රිතය පහත පරිදි නැවත ලිවිය හැකි අතර කේක් කැබැල්ලක් තරම් පහසු කිරීම සඳහා ඒවා අතර පැතිරීම හා සිතියම් ගත කිරීම භාවිතා කළ හැකිය:
let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45
එය ඔබ වෙනුවෙන් ජේඑස්එක්ස් හි වෙනත් ආකාරයකින් මුක්කු නිර්වචනය කිරීම පමණි !
එය භාවිතා කරයි ...
ES6 අරාව සහ වස්තු ක්රියාකරු කරයි (වස්තුව එකක් තවමත් පූර්ණ සහය නොදක්වයි), එබැවින් මූලික වශයෙන් ඔබ දැනටමත් ඔබේ මුක්කු නිර්වචනය කර ඇත්නම්, ඔබට එය මේ ආකාරයෙන් ඔබේ මූලද්රව්යයට යැවිය හැකිය.
එබැවින් ඔබේ නඩුවේදී, කේතය මේ වගේ දෙයක් විය යුතුය:
function yourA() {
const props = {name='Alireza', age='35'};
<Modal {...props} title='Modal heading' animation={false} />
}
එබැවින් ඔබ නිර්වචනය කළ මුක්කු දැන් වෙන් කොට අවශ්ය නම් නැවත භාවිතා කළ හැකිය.
එය සමාන ය:
function yourA() {
<Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}
JSX හි පැතිරීමේ ක්රියාකරු ගැන ප්රතික්රියා කණ්ඩායමෙන් උපුටා දැක්වීම් මේවා ය:
JSX පැතිරීමේ ගුණාංග ඔබට කලින් සංරචකයක් මත තැබීමට අවශ්ය සියලුම ගුණාංග ඔබ දන්නේ නම්, JSX භාවිතා කිරීම පහසුය:
var component = <Component foo={x} bar={y} />;
මුක්කු විකෘති කිරීම නරකයි
ඔබට සැකසීමට අවශ්ය ගුණාංග ඔබ නොදන්නේ නම්, පසුව ඒවා වස්තුවට එක් කිරීමට ඔබ පෙළඹෙනු ඇත:
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad
මෙය ප්රති-රටාවකි, මන්ද එයින් අදහස් කරන්නේ නිවැරදි ප්රොප් ටයිප් පරීක්ෂා කිරීමට අපට ඔබට උදව් කළ නොහැකි බවයි. මෙයින් අදහස් කරන්නේ ඔබේ propTypes දෝෂ අවසන් වන්නේ ගුප්ත සිරස් හෝඩුවාවක් සමඟ බවයි.
මුක්කු වෙනස් කළ නොහැකි යැයි සැලකිය යුතුය. මුක්කු වස්තුව වෙනත් තැනක විකෘති කිරීම අනපේක්ෂිත ප්රතිවිපාක ඇති කළ හැකි බැවින් එය මේ මොහොතේ ශීත කළ වස්තුවක් වනු ඇත.
පැතිර ගුණාංග
දැන් ඔබ පැතිර ගුණාංග ලෙස JSX නව අංගය භාවිතා කළ හැකි වේ:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
ඔබ ඇතුළු වන වස්තුවේ ගුණාංග සංරචකයේ මුක්කු මත පිටපත් කරනු ලැබේ.
ඔබට මෙය කිහිප වතාවක් භාවිතා කළ හැකිය හෝ වෙනත් ගුණාංග සමඟ ඒකාබද්ධ කළ හැකිය. පිරිවිතර අනුපිළිවෙල වැදගත් ය. පසුකාලීන ගුණාංග පෙර ඒවා අභිබවා යයි.
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
අමුතු ... අංකනය සමඟ ඇත්තේ කුමක්ද?
... ක්රියාකරු (හෝ පැතිරීමේ ක්රියාකරු) දැනටමත් ES6 හි අරා සඳහා සහය දක්වයි. වස්තු විවේකය සහ පැතිරීමේ ගුණාංග සඳහා ECMAScript යෝජනාවක් ද ඇත. JSX හි පිරිසිදු වාක්ය ඛණ්ඩයක් සැපයීම සඳහා අපි මෙම සහය දක්වන සහ සංවර්ධනය කරන ප්රමිතීන්ගෙන් ප්රයෝජන ගන්නෙමු.
පයිතන් ලෝකයෙන් පැමිණෙන අය සඳහා, ජේඑස්එක්ස් පැතිරීමේ ගුණාංග අගුළු ඇරීමේ තර්ක ලැයිස්තු (පයිතන් **
ක්රියාකරු) ට සමාන වේ
.
මෙය JSX ප්රශ්නයක් බව මම දනිමි, නමුත් ප්රතිසම සමඟ වැඩ කිරීම සමහර විට එය වේගවත් කිරීමට උපකාරී වේ.
මෙම ...
(පැතිර ක්රියාකරු) ප්රතික්රියා භාවිතා වේ:
දෙමව්පියන්ගේ සිට ළමා සංරචක දක්වා මුක්කු යැවීමට පිළිවෙලක් සපයයි. උදා: මෙම මුක්කු මව් සංරචකයකින් ලබා දී ඇත,
this.props = {
username: "danM",
email: "dan@mail.com"
}
ඒවා පහත පරිදි දරුවාට ලබා දිය හැකිය,
<ChildComponent {...this.props} />
මේකට සමානයි
<ChildComponent username={this.props.username} email={this.props.email} />
නමුත් මාර්ගය පිරිසිදු කරන්න.
තිත් තුනක් ...
නියෝජනය කරන්නේ පැතිරුම් ක්රියාකරුවන් හෝ විවේක පරාමිතීන් ය ,
එය කළ හැකි මාලාවක් ප්රකාශ කිරීම හෝ, සංගීත හෝ කිසිම දෙයක් ඉඩ එල්ලාවල මහතා අරාව සඳහා වන ශ්රිත කැඳවුම් හෝ මූලද්රව්ය සඳහා ශුන්ය හෝ ඊට වඩා වැඩි තර්ක ඇතැයි අපේක්ෂා කෙරේ ස්ථානවල පුළුල් කර ගත යුතු.
var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1 = [...arr1, ...arr2];
console.log(arr1); //[1, 2, 3, 4, 5, 6]
var arr = [1, 2, 3];
var arr2 = [...arr];
console.log(arr); //[1, 2, 3]
සටහන: අරාව පිටපත් කිරීමේදී පැතිරුම් සින්ටැක්ස් effectively ලදායී ලෙස එක් මට්ටමකට යයි. එමනිසා, පහත උදාහරණයෙන් දැක්වෙන පරිදි බහුමානීය අරා පිටපත් කිරීම නුසුදුසු විය හැකිය (එය Object.assign () හා පැතිරෙන සින්ටැක්ස් සමඟ සමාන වේ).
var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2); // [1, 2, 3, 4, 5, 6]
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);
console.log(d);
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
console.log(clonedObj); //{foo: "bar", x: 42}
var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); //{foo: "baz", x: 42, y: 13}
බව සටහන foo
obj1 දේපල obj2 විසින් එය උඩින් ලීවීම වී ඇතfoo
දේපල
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3)); //6
console.log(sum(1, 2, 3, 4)); //10
සටහන: පැතිරුණු සින්ටැක්ස් (පැතිරීමේ ගුණාංග හැර) යෙදිය හැක්කේ නැවත ලබා ගත හැකි වස්තූන් සඳහා පමණි: එබැවින් පහත දැක්වෙන්නේ දෝෂයකි
var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable
කුඩෝස් සිට බ්රැන්ඩන් මොරෙලි. ඔහු මෙහි පරිපූර්ණ ලෙස පැහැදිලි කළේය , නමුත් සබැඳි මිය යා හැකි බැවින් මම පහත අන්තර්ගතය අලවන්නෙමි:
පැතිරීමේ වාක්ය ...
ඛණ්ඩය හුදෙක් තිත් තුනකි: එය 0+ තර්ක බලාපොරොත්තු වන ස්ථානවල නැවත ව්යාප්ත කිරීමට ඉඩ දෙයි. සන්දර්භය නොමැතිව අර්ථ දැක්වීම් දැඩි ය. මෙහි තේරුම තේරුම් ගැනීමට විවිධ භාවිත අවස්ථා ගවේෂණය කරමු.
උදාහරණ # 1 - අරා ඇතුල් කිරීම පහත කේතය දෙස බලන්න. මෙම කේතය තුළ, අපි පැතිරීමේ සින්ටැක්ස් භාවිතා නොකරමු:
var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];
console.log(arr);
ඉහත, අපි නමින් පෙළක් නිර්මාණය කර ඇත්තෙමු mid
. ඉන්පසු අපි අපගේ mid
අරාව අඩංගු දෙවන අරාව නිර්මාණය කරමු . අවසාන වශයෙන්, අපි ප්රති .ලය ඉවත් කරමු. arr
මුද්රණය කිරීමට ඔබ අපේක්ෂා කරන්නේ කුමක්ද? සිදුවන්නේ කුමක්දැයි බැලීමට ඉහත ධාවනය ක්ලික් කරන්න. ප්රතිදානය මෙන්න:
[1, 2, [3, 4], 5, 6]
ඔබ අපේක්ෂා කළ ප්රති result ලය එයද? ෙයදීම විසින් mid
තුලට මාලාවක් arr
මාලාවක්, අපි මාලාවක් තුළ රැසක් සමග අවසන් කරනවා. එය ඉලක්කය නම් එය හොඳයි. 1 සිට 6 දක්වා අගයන් සහිත තනි අරාවක් පමණක් ඔබට අවශ්ය නම් කුමක් කළ යුතුද? මෙය සිදු කිරීම සඳහා, අපට පැතිරීමේ සින්ටැක්ස් භාවිතා කළ හැකිය! මතක තබා ගන්න, පැතිරීමේ වාක්ය ඛණ්ඩය අපගේ අරාවෙහි මූලද්රව්ය පුළුල් කිරීමට ඉඩ දෙයි. පහත කේතය දෙස බලමු. සෑම දෙයක්ම එක හා සමානයි - අපි දැන් mid
අරාව අරාව ඇතුල් කිරීමට පැතිරෙන සින්ටැක්ස් භාවිතා කරනවා හැර arr
:
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr);
ඔබ ධාවන බොත්තම එබූ විට, මෙහි ප්රති result ලය මෙන්න:
[1, 2, 3, 4, 5, 6]
නියමයි! ඔබ ඉහත කියවූ පැතිරීමේ සින්ටැක්ස් අර්ථ දැක්වීම මතකද? මෙන්න එය ක්රියාත්මක වන ස්ථානයයි. ඔබට පෙනෙන පරිදි, අපි arr
අරාව නිර්මාණය කර අරාවෙහි පැතිරීමේ ක්රියාකරු භාවිතා කරන විට mid
, ඇතුළත් කිරීම වෙනුවට, mid
අරාව පුළුල් වේ. මෙම ප්රසාරණය යන්නෙන් අදහස් කරන්නේ mid
අරාවෙහි ඇති සෑම අංගයක්ම අරාව තුළට ඇතුළු කර ඇති arr
බවයි. කැදැලි අරා වෙනුවට, ප්රති result ලය 1 සිට 6 දක්වා වූ තනි සංඛ්යා සමූහයකි.
උදාහරණ # 2 - ගණිත
ජාවාස්ක්රිප්ට් හි ගණිතමය වස්තුවක් ඇති අතර එය විනෝද ගණිත ගණනය කිරීම් කිරීමට අපට ඉඩ සලසයි. මෙම උදාහරණයේ දී අපි බලමු Math.max()
. ඔබට නුහුරු නම්, Math.max()
විශාලතම ශුන්ය හෝ වැඩි සංඛ්යාවක් ලබා දෙයි. මෙන්න උදාහරණ කිහිපයක්:
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100
ඔබට පෙනෙන පරිදි, ඔබට බහු සංඛ්යා වල උපරිම අගය සොයා ගැනීමට අවශ්ය නම්, Math.max()
බහු පරාමිතීන් අවශ්ය වේ. අවාසනාවකට ඔබට තනි අරාවක් ආදානය ලෙස භාවිතා කළ නොහැක. පැතිරීමේ සින්ටැක්ස් වලට පෙර, Math.max()
අරාව මත භාවිතා කිරීමට පහසුම ක්රමය භාවිතා කිරීමයි.apply()
var arr = [2, 4, 8, 6, 0];
function max(arr) {
return Math.max.apply(null, arr);
}
console.log(max(arr));
එය ක්රියාත්මක වේ, එය ඇත්තෙන්ම කරදරයකි. පැතිරීමේ වාක්ය ඛණ්ඩය සමඟ අපි එකම දේ කරන්නේ කෙසේදැයි දැන් බලන්න:
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
එහි ප්රති result ලය ලබා දීම සඳහා ශ්රිතයක් නිර්මාණය කර යෙදුම් ක්රමය භාවිතා කිරීම වෙනුවට Math.max()
අපට අවශ්ය වන්නේ කේත පේළි දෙකක් පමණි! පැතිරීමේ වාක්ය ඛණ්ඩය අපගේ අරාවෙහි මූලද්රව්ය පුළුල් කරන අතර අපගේ අරාවෙහි එක් එක් මූලද්රව්යයන් තනි තනිව Math.max()
ක්රමයට ඇතුළත් කරයි!
උදාහරණ # 3 - අරාව පිටපත් කරන්න ජාවාස්ක්රිප්ට් හි, දැනටමත් පවතින අරාවට සමාන නව විචල්යයක් සැකසීමෙන් ඔබට අරාව පිටපත් කළ නොහැක. පහත කේත උදාහරණය සලකා බලන්න:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
ඔබ ධාවනය එබූ විට, ඔබට පහත ප්රතිදානය ලැබෙනු ඇත:
['a', 'b', 'c']
දැන්, බැලූ බැල්මට එය ක්රියා කළ බවක් පෙනේ - අපි arr2 හි අගයන් පිටපත් කර ඇති බව පෙනේ. නමුත් සිදුවී ඇත්තේ එය නොවේ. ජාවාස්ක්රිප්ට් හි ඇති වස්තූන් සමඟ වැඩ කරන විට (අරා යනු වස්තුවක වර්ගයකි) අප විසින් පවරනු ලබන්නේ අගය අනුව නොව යොමු කිරීමෙනි. මෙයින් අදහස් කරන්නේ arr2, arr ලෙසම යොමු කර ඇති බවයි. වෙනත් වචන වලින් කිවහොත්, අපි arr2 වෙත කරන ඕනෑම දෙයක් මුල් අරාව (සහ අනෙක් අතට) කෙරෙහි බලපායි. පහත බලන්න:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
arr2.push('d');
console.log(arr);
ඉහත, අපි නව මූලද්රව්යයක් ar2 වෙතට තල්ලු කළෙමු. එහෙත්, අපි අර්ධයේ අගය ලොග් වූ විට, එම අගය සඳහා d අගය ද එකතු කර ඇති බව ඔබට පෙනෙනු ඇත:
['a', 'b', 'c', 'd']
කෙසේ වෙතත් බිය වීමට අවශ්ය නැත! අපට පැතිරීමේ ක්රියාකරු භාවිතා කළ හැකිය! පහත කේතය සලකා බලන්න. එය ඉහත ආකාරයටම සමාන ය. ඒ වෙනුවට, අපි වර්ග වරහන් යුගලයක් තුළ පැතිරීමේ ක්රියාකරු භාවිතා කර ඇත:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
ධාවනය කරන්න, එවිට ඔබ අපේක්ෂිත ප්රතිදානය දකිනු ඇත:
['a', 'b', 'c']
ඉහළින්, arr හි අරාව අගයන් පුළුල් වී තනි මූලද්රව්ය බවට පත් වූ අතර පසුව ඒවා arr2 වෙත පවරා ඇත. මුල් අරාවෙහි කිසිදු ප්රතිවිපාකයක් නොමැතිව අපට දැන් අවශ්ය පරිදි arr2 අරාව වෙනස් කළ හැකිය:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
arr2.push('d');
console.log(arr);
නැවතත්, මෙය ක්රියාත්මක වීමට හේතුව අපගේ arr2 අරාව අර්ථ දැක්වීමේ වරහන් පිරවීම සඳහා arr හි අගය පුළුල් වීමයි. මේ අනුව, අපි පළමු උදාහරණයේ දී කළාක් මෙන් ආආර් වෙත යොමු කිරීම වෙනුවට ආර් හි තනි අගයන් සමාන කිරීමට අපි ආර් 2 සකස් කරමු.
පාරිතෝෂික උදාහරණය - අරාව වෙත නූල් කිරීම විනෝදජනක අවසාන උදාහරණයක් ලෙස, ඔබට පැතිරෙන සින්ටැක්ස් භාවිතා කර නූලක් අරාවකට පරිවර්තනය කළ හැකිය. වර්ග වරහන් යුගලයක් තුළ පැතිරෙන සින්ටැක්ස් භාවිතා කරන්න:
var str = "hello";
var chars = [...str];
console.log(chars);
තිත් තුන (...)
පැතිරීමේ ක්රියාකරු ලෙස හැඳින්වෙන අතර, මෙය සංකල්පමය වශයෙන් ඊඑස් 6 අරා පැතිරීමේ ක්රියාකරුට සමාන වේ, ජේඑස්එක්ස් ජේඑස්එක්ස් හි පිරිසිදු වාක්ය ඛණ්ඩයක් සැපයීම සඳහා මෙම සහාය දක්වන සහ සංවර්ධනය කරන ප්රමිතීන්ගෙන් ප්රයෝජන ගනී.
වස්තු ආරම්භකවල පැතිරුණු ගුණාංග, සපයන ලද වස්තුවක සිට ගණන් කළ නොහැකි ගුණාංග අලුතින් සාදන ලද වස්තුවට පිටපත් කරයි.
let n = { x, y, ...z }; n; // { x: 1, y: 2, a: 3, b: 4 }
යොමුව:
1) https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties
මෙහි තේරුම ... ඔබ එය කේතයේ භාවිතා කරන ස්ථානය මත රඳා පවතී,
const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4]
const person = {
name: 'Max'
};
const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}
const filter = (...args) => {
return args.filter(el => el ===1);
}
console.log(filter(1,2,3)); //prints [1]
මෙය පැතිරීමේ ක්රියාකරු ...
උදාහරණයක් ලෙස ඔබට අරාවක් first=[1,2,3,4,5]
සහ තවත් එකක් second=[6,7,8]
තිබේ නම්.
[...first, ...second] //result is [1,2,3,4,5,6,7,8]
Json වස්තූන් සමඟ ද එය කළ හැකිය.
කෙටියෙන් කිවහොත්, තිත් තුන ...
ES6 (ES2015) හි පැතිරීමේ ක්රියාකරු වේ. පැතිරුම් ක්රියාකරු සියලු දත්ත ලබා ගනී.
let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];
console.log(b);
ප්රති result ලය ලබා දෙනු ඇත [1,2,3,4,5,6]
console.log(c);
ප්රති result ලය ලබා දෙනු ඇත [7,8,1,2,3,4]
...
(ජාවාස්ක්රිප්ට් හි තිත් තුනක්) ස්ප්රෙඩ් සින්ටැක්ස් හෝ ස්ප්රෙඩ් ඔපරේටර් ලෙස හැඳින්වේ. මෙය අරාව ප්රකාශනයක් හෝ නූලක් පුළුල් කිරීමට හෝ වස්තුවක් වැනි පුනරාවර්තනයකට ඉඩ දෙයි ප්රකාශනයක් ස්ථානගත කර ඇති ඕනෑම තැනක පුළුල් කිරීමට . මෙය ප්රතික්රියා කිරීමට විශේෂිත නොවේ. එය ජාවාස්ක්රිප්ට් ක්රියාකරුවෙකි.
මෙහි ඇති මෙම පිළිතුරු සියල්ලම ප්රයෝජනවත් වේ, නමුත් මට අවශ්ය වන්නේ වැඩිපුරම භාවිතා වන ප්රායෝගික භාවිත අවස්ථා පැතිරීමේ සින්ටැක්ස් (පැතිරුම් ක්රියාකරු) ලැයිස්තුගත කිරීමට ය.
1. අරා ඒකාබද්ධ කරන්න (කොන්ක්රීට් අරා)
අරා ඒකාබද්ධ කිරීම සඳහා විවිධ ක්රම තිබේ , නමුත් පැතිරීමේ ක්රියාකරු ඔබට මෙය ඕනෑම ස්ථානයක අරාවෙහි තැබීමට ඉඩ දෙයි. අරාව තුළ ඕනෑම වේලාවක අරා දෙකක් හා මූලද්රව්ය ස්ථානගත කිරීමට ඔබ කැමති නම්, ඔබට පහත පරිදි කළ හැකිය:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. අරා පිටපත් කිරීම
අපට අරාවෙහි පිටපතක් අවශ්ය වූ විට, අප සතුව Array.prototypr.slice () ක්රමය තිබුණි. නමුත්, ඔබට පැතිරීමේ ක්රියාකරු සමඟද එය කළ හැකිය.
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3. අයදුම් නොකර කාර්යයන් ඇමතීම
ES5 හි, doStuff()
ශ්රිතයට සංඛ්යා දෙකක පෙළක් යැවීමට , ඔබ බොහෝ විට පහත පරිදි Function.prototype.apply () ක්රමය භාවිතා කරයි:
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
කෙසේ වෙතත්, පැතිරීමේ ක්රියාකරු භාවිතා කිරීමෙන් ඔබට ශ්රිතයට අරාවක් ලබා දිය හැකිය.
doStuff(...args);
4. අරා විනාශ කිරීම
ඔබට අවශ්ය පරිදි විචල්යයන් වෙත තොරතුරු උකහා ගැනීම සඳහා ඔබට විනාශකාරී සහ ඉතිරි ක්රියාකරු භාවිතා කළ හැකිය:
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
5. විවේක පරාමිතීන් ලෙස ක්රියාකාරී තර්ක
ES6 හි තිත් තුන (...) ද ඇත, එය ශ්රිතයක ඉතිරිව ඇති සියලුම තර්ක අරාවකට එකතු කරන විවේක පරාමිතියකි.
function f(a, b, ...args) {
console.log(args);
}
f(1,2,3,4,5);
// [ 3, 4, 5 ]
6. ගණිත කාර්යයන් භාවිතා කිරීම
ව්යාප්තිය තර්කය ලෙස භාවිතා කරන ඕනෑම ශ්රිතයක් ඕනෑම තර්ක ගණනාවක් පිළිගත හැකි ශ්රිත භාවිතා කළ හැකිය.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. වස්තු දෙකක් ඒකාබද්ධ කිරීම
වස්තු දෙකක් ඒකාබද්ධ කිරීම සඳහා ඔබට පැතිරීමේ ක්රියාකරු භාවිතා කළ හැකිය. මෙය කිරීමට පහසු සහ පිරිසිදු ක්රමයකි.
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. නූලක් වෙනම අක්ෂරවලට වෙන් කරන්න
ඔබට වෙනම අක්ෂරවලට නූලක් පැතිරවීමට පැතිරුම් ක්රියාකරු භාවිතා කළ හැකිය.
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
පැතිරුම් ක්රියාකරු භාවිතා කිරීමට තවත් ක්රම ගැන ඔබට සිතිය හැකිය. මා මෙහි ලැයිස්තුගත කර ඇත්තේ එහි ජනප්රිය භාවිත අවස්ථා ය.
සාමාන්යයෙන් පැතිරුම් ක්රියාකරු ලෙස හැඳින්වේ, එය අවශ්ය ඕනෑම තැනක පුළුල් කිරීම සඳහා භාවිතා කරයි
උදාහරණයක්
const SomeStyle = {
margin:10,
background:#somehexa
}
පැතිරීමේ ක්රියාකරු පැතිරුම් සින්ටැක්ස් ගැන ඔබට අවශ්ය ඕනෑම තැනක ඔබට මෙය භාවිතා කළ හැකිය .
... මෙම වාක්ය ඛණ්ඩය ES6 හි කොටසක් වන අතර ඔබට ප්රතික්රියා වලදී පමණක් භාවිතා කළ හැකි දෙයක් නොවේ. එය වෙනස් ආකාර දෙකකින් භාවිතා කළ හැකිය; පැතිරුම් ක්රියාකරුවෙකු ලෙස හෝ විවේක පරාමිතියක් ලෙස. ඔබට මෙම ලිපියෙන් වැඩි විස්තර සොයාගත හැකිය: https://www.techiediaries.com/react-spread-operator-props-setstate/
ඔබ ප්රශ්නයේ සඳහන් කර ඇති දේ මේ වගේ දෙයක්, අපි මේ වගේ උපකල්පනය කරමු,
function HelloUser() {
return <Hello Name="ABC" City="XYZ" />;
}
පැතිරුම් ක්රියාකරු භාවිතා කිරීමෙන් ඔබට මේ වගේ සංරචකයට මුක්කු යැවිය හැකිය.
function HelloUser() {
const props = {Name: 'ABC', City: 'XYZ'};
return <Hello {...props} />;
}
බහු ගුණාංග සරල ආකාරයකින් සම්මත කිරීමට භාවිතා කරන පැතිරීමේ ගුණාංග
. ... this.props this යනු මෙම ප්රොප්ස් හි දේපල රඳවා ගැනීමයි
පහත දැක්වෙන මුක්කු සහිත {...} පැතිරීමේ ක්රියාකරුගේ භාවිතය
this.props = { firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA' }
නොමැතිව {...} පැතිරීම
<Child firstName={this.props.firstName} lastName={this.props.lastName} city={this.props.city} country={this.props.country} >
{...} පැතිරීම සමඟ
<Child { ...this.props } />
පැතිරීමේ ක්රියාකරු ගැන ඩෑන් ආබ්රමොව්ගේ ට්වීට් (රෙඩක්ස් නිර්මාතෘ)
ප්රතික්රියා යෙදුමක මුක්කු යැවීම සාමාන්ය සිරිතකි. මෙය සිදු කිරීමේදී ළමා සංරචකය පිරිසිදු හෝ අපිරිසිදු (රාජ්ය නොවන හෝ රාජ්ය) වේවා නොසලකා රාජ්ය වෙනස්කම් කිරීමට අපට හැකි වේ. හොඳම ප්රවේශය, මුක්කු වලින් ගමන් කරන විට, ඒකීය ගුණාංගවලින් හෝ සමස්ත දේපල වස්තුවකින් සමත් වීම. ES6 හි අරා සඳහා සහය දැක්වීමෙන් අපට "..." අංකනය ලබා දී ඇති අතර මේ සමඟ අපට සම්පූර්ණ වස්තුවක් දරුවෙකු වෙත යැවීමට හැකි වී තිබේ.
දරුවෙකුට මුක්කු යැවීමේ සාමාන්ය ක්රියාවලිය මෙම වාක්ය ඛණ්ඩය සමඟ සටහන් වේ:
var component = <Component foo={x} bar={y} />;
මුක්කු ගණන අවම වූ විට මුක්කු සංඛ්යා වැඩි වූ විට එය පාලනය කළ නොහැකි තත්වයට පත්වේ. ළමා සංරචකයක් තුළ අවශ්ය ගුණාංග ඔබ නොදන්නා විට මෙම ක්රමයේ ගැටළුවක් ඇති වන අතර සාමාන්ය ජාවාස්ක්රිප්ට් ක්රමය නම් එම ගුණාංග සරල ලෙස සකසා පසුව වස්තුවට බැඳීමයි. මෙය ප්රොප් ටයිප් පරීක්ෂාව සහ ගුප්ත තොග හෝඩුවාවේ දෝෂ ඇතිවීම ප්රයෝජනවත් නොවන අතර නිදොස්කරණය ප්රමාද කිරීමට හේතු වේ. පහත දැක්වෙන්නේ මෙම භාවිතයට උදාහරණයකි, නොකළ යුතු දේ:
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;
මෙම ප්රති result ලයම ලබා ගත හැකි නමුත් මෙය කිරීමෙන් වඩාත් සුදුසු සාර්ථකත්වයක් ලබා ගත හැකිය:
var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?
නමුත් JSX පැතිරීම හෝ JSX භාවිතා නොකරන්න, මෙය නැවත සමීකරණයට යොමු කිරීම සඳහා අපට දැන් මෙවැනි දෙයක් කළ හැකිය:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
"... මුක්කු" හි ඇතුළත් කර ඇති ගුණාංග foo: x, bar: y වේ. මෙම වාක්ය ඛණ්ඩය භාවිතා කරමින් "... මුක්කු" වල ගුණාංග අභිබවා යාමට මෙය වෙනත් ගුණාංග සමඟ ඒකාබද්ධ කළ හැකිය:
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
ඊට අමතරව අපට වෙනත් දේපල වස්තු එකිනෙකට පිටපත් කිරීමට හෝ ඒවා මේ ආකාරයෙන් ඒකාබද්ධ කිරීමට හැකිය:
var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';
නැතහොත් මේ ආකාරයට වෙනස් වස්තු දෙකක් ඒකාබද්ධ කරන්න (මෙය තවමත් සියලුම ප්රතික්රියා අනුවාදවල නොමැත):
var ab = { ...a, ...b }; // merge(a, b)
ෆේස්බුක් හි ප්රතික්රියා / ලේඛ වෙබ් අඩවියට අනුව මෙය පැහැදිලි කළ හැකි තවත් ක්රමයක් නම්:
ඔබට දැනටමත් "මුක්කු" වස්තුවක් ලෙස තිබේ නම් සහ ඔබට එය JSX හි සම්මත කිරීමට අවශ්ය නම්, ඔබට මුළු මුක්කු වස්තුව පසු කිරීමට SPREAD ක්රියාකරුවෙකු ලෙස "..." භාවිතා කළ හැකිය. පහත උදාහරණ දෙක සමාන වේ:
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
ඔබ සාමාන්ය බහාලුම් සාදන විට පැතිරීමේ ගුණාංග ප්රයෝජනවත් වේ. කෙසේ වෙතත්, ඒවා ගැන සැලකිලිමත් නොවන සංරචක වලට අදාළ නොවන මුක්කු රාශියක් යැවීම පහසු කිරීමෙන් ඔවුන්ට ඔබේ කේතය අවුල් කළ හැකිය. මෙම වාක්ය ඛණ්ඩය අරපිරිමැස්මෙන් භාවිතා කළ යුතුය.
එහි හැඳින්වෙන පැතිරුම් ක්රියාකරු. උදා සඳහා hello = {name: '', msg: '' hel let hello1 = {... hello} දැන් ආයුබෝවන් වස්තු ගුණාංග hello1 වෙත පිටපත් කර ඇත.
එය javascript හි පැතිරෙන සින්ටැක්ස් ලෙස හැඳින්වේ.
එය ජාවාස්ක්රිප්ට් හි අරාවක් හෝ වස්තුවක් විනාශ කිරීම සඳහා භාවිතා කරයි.
උදාහරණයක්:
const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)
const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)
ඔබට එය එකම ප්රති result ලයකින් කළ හැකිය Object.assign()
ජාවාස්ක්රිප්ට් හි ක්රියාකාරිත්වය ප්රති ලයක් කළ හැකිය.
යොමුව: පැතිරෙන සින්ටැක්ස්
මෙය සම්පාදනය කරනු ලබන්නේ:
React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)
එය වඩා ගුණ දෙකක් ලබා දෙන තැන title
සහ animation
ඔබ්බට props
සත්කාරක අංගයක් ඇත.
...
නම් ES6 ක්රියාකරු වේ යෙහෙලියන් .
Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax බලන්න
පැතිරුම් ක්රියාකරු (ත්රිත්ව ක්රියාකරු) ecama ස්ක්රිප්ට් 6 (ES6) හි හඳුන්වා දෙයි .එකාමා ස්ක්රිප්ට් (ES6) යනු ජාවාස්ක්රිප්ට් ඔතා.
මුක්කු වල ක්රියාකරු ගණන් කළ නොහැකි ගුණාංග පැතිරවීම. this.props = {firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA'}
{... this.props} = {firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA'}
නමුත් ප්රධාන අංග පැතිරීමේ ක්රියාකරු යොමු වර්ගය සඳහා භාවිතා කරයි.
For example
let person= {
name: 'Alex',
age: 35
}
person1= person;
person1.name = "Raheel";
console.log( person.name); // output: Raheel
මෙය යොමු වර්ගය ලෙස හැඳින්වේ, එක් වස්තුවක් අනෙක් වස්තූන් මතකයේ හුවමාරු වන බැවින් ඒවාට බලපායි. ඔබට ස්වාධීනව වටිනාකමක් ලැබෙන්නේ නම් පැතිරීමේ මතකය යන දෙකම පැතිරීමේ ක්රියාකරු භාවිතා කරයි.
let person= {
name: 'Alex',
age: 35
}
person2 = {...person};
person2.name = "Shahzad";
console.log(person.name); // output: Alex
ඔබට මූලද්රව්ය සමූහයක් තිබේ නම් සහ ඔබ භාවිතා කරන මූලද්රව්ය ප්රදර්ශනය කිරීමට අවශ්ය නම් ... අරාවමාන්ට් සහ එය සියලු මූලද්රව්ය හරහා නැවත ක්රියා කරයි
මෙය ES6 / Harmony හි නව අංගයකි. එය පැතිරීමේ ක්රියාකරු ලෙස හැඳින්වේ. එය ඔබට අරාව / වස්තුවක සං ent ටක කොටස් වෙන් කිරීමට හෝ අයිතම / පරාමිතීන් කිහිපයක් ගෙන ඒවා එකට මැලියම් කිරීමට ඉඩ දෙයි. මෙන්න උදාහරණයක්:
let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array
සහ වස්තුවක් / යතුරු සමඟ:
// lets pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// this is equal to <MyComponent myKey=5 myOtherKey=7 />
ඇත්තෙන්ම සිසිල් වන්නේ ඔබට “ඉතිරි අගයන්” යන්නෙන් එය භාවිතා කළ හැකිය.
const myFunc = (value1, value2, ...values) {
// Some code
}
myFunc(1, 2, 3, 4, 5)
// when myFunc is called, the rest of the variables are placed into the "values" array