এই "হ্যাক" বোঝার জন্য কয়েকটি বিষয় বোঝার প্রয়োজন:
- কেন আমরা শুধু করি না
Array(5).map(...)
- কিভাবে
Function.prototype.applyআর্গুমেন্ট পরিচালনা করে
- কীভাবে
Arrayএকাধিক যুক্তি পরিচালনা করে
- কীভাবে
Numberফাংশন আর্গুমেন্ট পরিচালনা করে
- কি
Function.prototype.callকরে
এগুলি জাভাস্ক্রিপ্টে বরং উন্নততর বিষয়, তাই এটি বরং-দীর্ঘতর হবে। আমরা উপর থেকে শুরু করব। বকল!
১.কেন না কেন Array(5).map?
আসলে কি অ্যারে? একটি নিয়মিত অবজেক্ট, পূর্ণসংখ্যা কীগুলি ধারণ করে, যা মানকে মানচিত্র করে। lengthএটিতে অন্যান্য বিশেষ বৈশিষ্ট্য রয়েছে, উদাহরণস্বরূপ theন্দ্রজালিক ভেরিয়েবল, তবে এটির মূল বিষয় এটি key => valueঅন্য নিয়মের মতো একটি নিয়মিত মানচিত্র। একটু অ্যারে নিয়ে খেলি, আমরা কি?
var arr = ['a', 'b', 'c'];
arr.hasOwnProperty(0); //true
arr[0]; //'a'
Object.keys(arr); //['0', '1', '2']
arr.length; //3, implies arr[3] === undefined
//we expand the array by 1 item
arr.length = 4;
arr[3]; //undefined
arr.hasOwnProperty(3); //false
Object.keys(arr); //['0', '1', '2']
আমরা অ্যারে আইটেমের সংখ্যা এবং অ্যারেতে arr.lengthথাকা key=>valueম্যাপিংয়ের সংখ্যার মধ্যে অন্তর্নিহিত পার্থক্য পেয়েছি, যা এর চেয়ে আলাদা হতে পারে arr.length।
অ্যারের মাধ্যমে প্রসারিত করার ফলে কোনও নতুন ম্যাপিং তৈরি arr.length হয় নাkey=>value , সুতরাং অ্যারের অপরিজ্ঞাত মান রয়েছে না, এটির কীগুলি নেই । এবং যখন আপনি অস্তিত্বহীন সম্পত্তি অ্যাক্সেস করার চেষ্টা করবেন তখন কী ঘটে? আপনি পেতে undefined।
এখন আমরা আমাদের মাথা arr.mapকিছুটা উপরে তুলতে পারি , এবং দেখি কেন এই বৈশিষ্ট্যগুলির উপরে চলতে পছন্দ করে না। যদি arr[3]কেবল অপরিবর্তিত থাকে এবং কীটি বিদ্যমান থাকে তবে এই সমস্ত অ্যারে ফাংশনগুলি অন্য মানগুলির মতো এটির উপরে চলে যাবে:
//just to remind you
arr; //['a', 'b', 'c', undefined];
arr.length; //4
arr[4] = 'e';
arr; //['a', 'b', 'c', undefined, 'e'];
arr.length; //5
Object.keys(arr); //['0', '1', '2', '4']
arr.map(function (item) { return item.toUpperCase() });
//["A", "B", "C", undefined, "E"]
আমি ইচ্ছাকৃতভাবে একটি পদ্ধতি কলটি ব্যবহার করে এই পয়েন্টটি আরও প্রমাণ করতে চাইছিলাম যে কীটি নিজেই কখনও ছিল না: কলিংয়ের undefined.toUpperCaseফলে কোনও ত্রুটি বাড়ানো হত, তবে তা হয়নি। এটি প্রমাণ করার জন্য :
arr[5] = undefined;
arr; //["a", "b", "c", undefined, "e", undefined]
arr.hasOwnProperty(5); //true
arr.map(function (item) { return item.toUpperCase() });
//TypeError: Cannot call method 'toUpperCase' of undefined
এবং এখন আমরা আমার বক্তব্য: কীভাবে Array(N)জিনিসগুলি হয়। বিভাগ 15.4.2.2 প্রক্রিয়া বর্ণনা করে। এখানে প্রচুর পরিমাণে জাম্বু রয়েছে যা আমরা যত্ন করি না, তবে আপনি যদি লাইনগুলির মধ্যে পড়তে পরিচালনা করেন (বা আপনি কেবল আমার উপর এটি বিশ্বাস করতে পারেন তবে তা করবেন না), এটি মূলত এটিকে ফুটিয়ে তোলে:
function Array(len) {
var ret = [];
ret.length = len;
return ret;
}
(অনুমানের অধীনে কাজ করে (যা প্রকৃত অনুমানে যাচাই করা হয়) যা lenবৈধ uint32, এবং কেবলমাত্র কোনও সংখ্যার মান নয়)
সুতরাং এখন আপনি দেখতে পাচ্ছেন কেন কেন কাজ করা Array(5).map(...)হবে না - আমরা lenঅ্যারেতে আইটেমগুলি সংজ্ঞায়িত করি না , আমরা key => valueম্যাপিংগুলি তৈরি করি না , আমরা কেবল lengthসম্পত্তি পরিবর্তন করি ।
এখন যে আমাদের বাইরে চলে গেছে, আসুন দ্বিতীয় যাদুবিদ্যার দিকে নজর দিন:
2. কিভাবে Function.prototype.applyকাজ করে
applyমূলত যা হয় তা হল একটি অ্যারে নেওয়া এবং এটি একটি ফাংশন কলের আর্গুমেন্ট হিসাবে আনরোল করুন। এর অর্থ হ'ল নিম্নলিখিতগুলি বেশ কিছুটা একই:
function foo (a, b, c) {
return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3
এখন, আমরা applyকেবল argumentsবিশেষ ভেরিয়েবল লগ করে কীভাবে কাজ করে তা দেখার প্রক্রিয়াটি সহজ করতে পারি :
function log () {
console.log(arguments);
}
log.apply(null, ['mary', 'had', 'a', 'little', 'lamb']);
//["mary", "had", "a", "little", "lamb"]
//arguments is a pseudo-array itself, so we can use it as well
(function () {
log.apply(null, arguments);
})('mary', 'had', 'a', 'little', 'lamb');
//["mary", "had", "a", "little", "lamb"]
//a NodeList, like the one returned from DOM methods, is also a pseudo-array
log.apply(null, document.getElementsByTagName('script'));
//[script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script]
//carefully look at the following two
log.apply(null, Array(5));
//[undefined, undefined, undefined, undefined, undefined]
//note that the above are not undefined keys - but the value undefined itself!
log.apply(null, {length : 5});
//[undefined, undefined, undefined, undefined, undefined]
দ্বিতীয় থেকে শেষের উদাহরণে আমার দাবি প্রমাণ করা সহজ:
function ahaExclamationMark () {
console.log(arguments.length);
console.log(arguments.hasOwnProperty(0));
}
ahaExclamationMark.apply(null, Array(2)); //2, true
(হ্যাঁ, পাং উদ্দেশ্য) key => valueম্যাপিং অ্যারে আমরা ধরে পাশ অস্তিত্ব পারে নি apply, কিন্তু এটা অবশ্যই বিদ্যমান argumentsপরিবর্তনশীল। শেষ উদাহরণটি একই কারণে এটি কাজ করে: আমরা যে বস্তুটি পাস করি তার মধ্যে কীগুলি বিদ্যমান নেই, তবে সেগুলিতে রয়েছে arguments।
কেন এমন? আসুন অনুচ্ছেদ 15.3.4.3 দেখুন , যেখানে Function.prototype.applyসংজ্ঞায়িত করা হয়েছে। বেশিরভাগ জিনিসগুলির জন্য আমরা যত্ন করি না, তবে এখানে আকর্ষণীয় অংশটি রয়েছে:
- আর্গুমেন্টের "দৈর্ঘ্য" সহ আर्गারির অভ্যন্তরীণ পদ্ধতিটিকে [[পান]] কল করার ফলাফল হতে দেওয়া যাক।
যা মূলত অর্থ: argArray.length। স্পেকটি আইটেমগুলির forউপর একটি সাধারণ লুপ করতে এগিয়ে চলেছে length, যার listসাথে সম্পর্কিত মানগুলি তৈরি হয় ( listএটি কিছু অভ্যন্তরীণ ভুডু তবে এটি মূলত একটি অ্যারে)। খুব, খুব আলগা কোডের ক্ষেত্রে:
Function.prototype.apply = function (thisArg, argArray) {
var len = argArray.length,
argList = [];
for (var i = 0; i < len; i += 1) {
argList[i] = argArray[i];
}
//yeah...
superMagicalFunctionInvocation(this, thisArg, argList);
};
সুতরাং argArrayএই ক্ষেত্রে আমাদের যেহেতু নকল করা দরকার তা হ'ল lengthসম্পত্তি সহ একটি বস্তু । এবং এখন আমরা দেখতে পাচ্ছি যে মানগুলি কেন সংজ্ঞায়িত হয় তবে কীগুলি অন হয় না arguments: আমরা key=>valueম্যাপিংগুলি তৈরি করি ।
ভাই, সুতরাং এটি পূর্ববর্তী অংশের চেয়ে কম না হতে পারে। আমরা শেষ করার পরে কেক থাকবে, তাই ধৈর্য ধরুন! তবে, নিম্নলিখিত বিভাগের পরে (যা সংক্ষিপ্ত হবে, আমি প্রতিশ্রুতি দিচ্ছি) আমরা অভিব্যক্তিটি ছিন্ন করতে শুরু করতে পারি। আপনি যদি ভুলে গেছেন তবে প্রশ্নটি ছিল নিম্নলিখিত কাজগুলি কীভাবে করে:
Array.apply(null, { length: 5 }).map(Number.call, Number);
3. কীভাবে Arrayএকাধিক যুক্তি পরিচালনা করে
তাই! আপনি যখন কোনও lengthযুক্তিটি পাস করেন তখন কী ঘটেছিল আমরা তা দেখেছি Array, তবে অভিব্যক্তিতে আমরা বেশ কিছু জিনিসকে আর্গুমেন্ট হিসাবে (পাসওয়ার্ডের 5 টি অ্যারে, undefinedসঠিক হিসাবে) পাস করি । বিভাগ 15.4.2.1 আমাদের কী করতে হবে তা বলে। শেষ অনুচ্ছেদটি আমাদের কাছে গুরুত্বপূর্ণ, এবং এটি সত্যই অদ্ভুতভাবে শব্দযুক্ত, তবে এটি এক প্রকারে ফোটে:
function Array () {
var ret = [];
ret.length = arguments.length;
for (var i = 0; i < arguments.length; i += 1) {
ret[i] = arguments[i];
}
return ret;
}
Array(0, 1, 2); //[0, 1, 2]
Array.apply(null, [0, 1, 2]); //[0, 1, 2]
Array.apply(null, Array(2)); //[undefined, undefined]
Array.apply(null, {length:2}); //[undefined, undefined]
Tada! আমরা বেশ কয়েকটি অপরিবর্তিত মানগুলির একটি অ্যারে পাই এবং আমরা এই অপরিজ্ঞাত মানগুলির একটি অ্যারে ফিরিয়ে আনি।
ভাবের প্রথম অংশ
পরিশেষে, আমরা নিম্নলিখিতটি বোঝাতে পারি:
Array.apply(null, { length: 5 })
আমরা দেখেছি যে এটি 5 টি অপরিজ্ঞাত মান সমেত একটি অ্যারে প্রদান করে, যা সমস্ত অস্তিত্বে রয়েছে keys
এখন, প্রকাশের দ্বিতীয় অংশে:
[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)
এটি এত সহজ, অ-সংশ্লেষিত অংশ হবে, কারণ এটি এতটা অস্পষ্ট হ্যাকগুলির উপর নির্ভর করে না।
4. কীভাবে Numberইনপুট আচরণ করে
এরকম Number(something)( অধ্যায় 15.7.1 ) ধর্মান্তরিত somethingএকটি সংখ্যা, এবং যে সব হয়। এটি কীভাবে কিছুটা দোষযুক্ত হয়, বিশেষত স্ট্রিংগুলির ক্ষেত্রে, তবে আপনার আগ্রহের ক্ষেত্রে অপারেশনটি 9.3 বিভাগে সংজ্ঞায়িত করা হয়েছে ।
5. গেমস Function.prototype.call
callহয় applyএর ভাই সংজ্ঞায়িত অধ্যায় 15.3.4.4 । আর্গুমেন্টগুলির অ্যারে নেওয়ার পরিবর্তে, এটি প্রাপ্ত হওয়া আর্গুমেন্টগুলি কেবল নেয় এবং তাদের এগিয়ে যায়।
আপনি যখন একের বেশি callএকসাথে শৃঙ্খলাবদ্ধ হন তখন বিষয়গুলি আকর্ষণীয় হয়ে ওঠে, 11 অবধি অদ্ভুতভাবে ক্র্যাঙ্ক করুন:
function log () {
console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^ ^-----^
// this arguments
যা চলছে তা আপনি উপলব্ধি না করা পর্যন্ত এটি বেশ ডাব্লুএইচএফ যোগ্য worthy log.callকেবল একটি ফাংশন, অন্য কোনও ফাংশনের callপদ্ধতির সমতুল্য এবং এর মতো callনিজেই একটি পদ্ধতিও রয়েছে :
log.call === log.call.call; //true
log.call === Function.call; //true
এবং কি করে call? এটি একটি thisArgএবং একগুচ্ছ আর্গুমেন্ট গ্রহণ করে এবং এর প্যারেন্ট ফাংশনটিকে কল করে। আমরা এর মাধ্যমে এটি সংজ্ঞায়িত করতে পারি apply (আবার, খুব আলগা কোড, কাজ করবে না):
Function.prototype.call = function (thisArg) {
var args = arguments.slice(1); //I wish that'd work
return this.apply(thisArg, args);
};
কীভাবে এটি নিচে যায় তা ট্র্যাক করা যাক:
log.call.call(log, {a:4}, {a:5});
this = log.call
thisArg = log
args = [{a:4}, {a:5}]
log.call.apply(log, [{a:4}, {a:5}])
log.call({a:4}, {a:5})
this = log
thisArg = {a:4}
args = [{a:5}]
log.apply({a:4}, [{a:5}])
পরবর্তী অংশ, বা .mapএটি সমস্ত
এখনও শেষ হয়নি। আসুন দেখা যাক আপনি যখন বেশিরভাগ অ্যারে পদ্ধতিতে কোনও ফাংশন সরবরাহ করেন তখন কী হয়:
function log () {
console.log(this, arguments);
}
var arr = ['a', 'b', 'c'];
arr.forEach(log);
//window, ['a', 0, ['a', 'b', 'c']]
//window, ['b', 1, ['a', 'b', 'c']]
//window, ['c', 2, ['a', 'b', 'c']]
//^----^ ^-----------------------^
// this arguments
যদি আমরা thisনিজেরাই যুক্তি সরবরাহ না করি তবে এটি ডিফল্ট হয় window। আমাদের কলব্যাকটিতে তর্কগুলি যে অর্ডারে সরবরাহ করা হয়েছে সেটির জন্য নোট করুন, এবং আসুন এটি আবার 11 টি করে অদ্ভুত করুন:
arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^ ^
হু হু হুয়া ... আসুন কিছুটা ব্যাকআপ দিন। এখানে কি হচ্ছে? আমরা বিভাগ 15.4.4.18 এ দেখতে পাচ্ছি , যেখানে forEachসংজ্ঞায়িত করা হয়েছে, নিম্নলিখিতটি অনেক কিছু ঘটে:
var callback = log.call,
thisArg = log;
for (var i = 0; i < arr.length; i += 1) {
callback.call(thisArg, arr[i], i, arr);
}
সুতরাং, আমরা এটি পেয়েছি:
log.call.call(log, arr[i], i, arr);
//After one `.call`, it cascades to:
log.call(arr[i], i, arr);
//Further cascading to:
log(i, arr);
এখন আমরা দেখতে পারি কীভাবে .map(Number.call, Number)কাজ করে:
Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);
যা iবর্তমান সূচকে একটি সংখ্যায় রূপান্তর করে ।
উপসংহারে,
অভিব্যক্তি
Array.apply(null, { length: 5 }).map(Number.call, Number);
দুটি অংশে কাজ করে:
var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2
প্রথম অংশে 5 টি অপরিবর্তিত আইটেমের অ্যারে তৈরি করা হয়। দ্বিতীয়টি অ্যারের উপরে চলে যায় এবং সূচকগুলি গ্রহণ করে, ফলস্বরূপ উপাদান সূচকগুলির একটি অ্যারে:
[0, 1, 2, 3, 4]
Array.apply(null, Array(30)).map(Number.call, Number)পড়তে সহজ কারণ এটি সরল বস্তুটি একটি অ্যারে বলে ভান করা এড়ায়।