Mari kita bincangkan tentang fungsi JavaScript kari

Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu yang berkaitan dengan fungsi kari dalam JavaScript ialah transformasi fungsi yang menerima berbilang parameter dan mengembalikan fungsi baharu yang menerima parameter yang tinggal dan mengembalikan hasilnya. Saya harap ia akan membantu semua orang.

Cadangan berkaitan: tutorial javascript

1. Fahamkan secara ringkas memohon dan hubungi

• panggil dan gunakan kedua-duanya wujud untuk menukar konteks apabila fungsi sedang berjalan, dengan kata lain, mereka perlu menukar penunjuk ini di dalam badan fungsi.

• Fungsi panggilan dan guna adalah sama, tetapi cara menerima parameter adalah berbeza. panggilan sebenarnya adalah sejenis gula sintaksis untuk digunakan.

• Format: apply(context,[arguments]),call(context,param1,param2,...).

2. Apakah fungsi karipap?

Kari adalah untuk mengubah fungsi yang menerima berbilang parameter kepada fungsi yang menerima satu parameter (parameter pertama fungsi asal), dan mengembalikan fungsi baharu yang menerima parameter yang tinggal dan mengembalikan teknologi .

Sebagai contoh di sini, terdapat fungsi add(), iaitu fungsi yang digunakan untuk memproses penambahan dan jumlah parameter (param1, params2,...) yang kami hantar kepadanya.

// 在这里第一个具有两个参数`x`、`y`的`add(x , y)`函数
function add(x , y){
	return x + y;
}

// 调用`add()`函数，并给定两个参数`4`和`6`
add(4,6);

// 模拟计算机操作，第一步 传入第一个参数 4
function add(4 , y){
	return 4 + y;
}

// 模拟计算机操作，第二步 传入第一个参数 6
function add(4 , 6){
	return 4 + 6;
}

Apakah yang akan kelihatan jika kita menggunakan fungsi add()? Berikut ialah pelaksanaan ringkas:

// 柯里化过的add()函数，可以接受部分参数
function add(x ,y){
	if (typeof y === 'undefined') {
		return function (newy){
			return x + newy;
		}
	}
	// 完整应用
	return x + y;
}

// 测试调用
console.log(typeof add(4)); // [Function]
console.log(add(4)(6)); // 10

// 可以创建保存函数
let saveAdd = add(4);
console.log(saveAdd(6)); // 10

Seperti yang dapat dilihat daripada fungsi kari ringkas add() di atas, fungsi tersebut boleh menerima sebahagian daripada fungsi dan kemudian mengembalikan fungsi baharu untuk meneruskan pemprosesan fungsi yang lain .

3. Tulis fungsi kari awam

Di sini kami mencipta fungsi kari awam, supaya kami tidak perlu melaksanakan fungsi yang kompleks di dalamnya setiap kali Proses kari.

// 定义一个createCurry的函数function createCurry(fn){
	var slice = Array.prototype.slice,
	stored_args = slice.call(arguments,1);
	
	return function () {
		let new_args = slice.call(arguments),
		args = stored_args.concat(new_args);
		return fn.apply(null,args);
	}}

Dalam fungsi karipap awam di atas:

• arguments, bukan tatasusunan sebenar, hanya objek dengan atribut length, jadi Kami meminjam Array.prototype kaedah daripada slice untuk membantu kami menukar arguments kepada tatasusunan sebenar untuk memudahkan operasi kami yang lebih baik.
• Apabila kita memanggil fungsi createCurry buat kali pertama, pembolehubah stored_args memegang parameter kecuali parameter pertama, kerana parameter pertama ialah fungsi yang perlu kita kari.
• Apabila kita melaksanakan fungsi yang dikembalikan dalam fungsi createCurry, pembolehubah new_args mendapat parameter dan menukarnya kepada tatasusunan. Fungsi yang dikembalikan di dalam
• mengakses nilai yang disimpan dalam pembolehubah stored_args melalui penutupan dan menggabungkan nilai pembolehubah new_args ke dalam tatasusunan baharu dan memberikannya kepada pembolehubah args.
• Akhirnya memanggil kaedah fn.apply(null,args) untuk melaksanakan fungsi kari.

Sekarang mari kita uji fungsi karipap awam

// 普通函数add()
function add(x , y){
	return x + y;
}

// 柯里化得到一个新的函数
var newAdd = createCurry(add,4);
console.log(newAdd(6)); // 10


//另一种简便方式
console.log(createCurry(add,4)(6));// 10

Sudah tentu, ini tidak terhad kepada kari dua parameter, ia juga boleh menjadi Berbilang parameter :

// 多个参数的普通函数
function add(a,b,c,d){
	return a + b + c + d;
}

// 柯里化函数得到新函数，多个参数可以随意分割
console.log(createCurry(add,4,5)(5,6)); // 20

// 两步柯里化
let add_one = createCurry(add,5);
console.log(add_one(5,5,5));// 20
let add_two = createCurry(add_one,4,6);
console.log(add_two(6)); // 21

Melalui contoh di atas, kita boleh mencari had, iaitu, sama ada dua parameter atau berbilang parameter, ia hanya boleh dilaksanakan dalam dua langkah, seperti yang ditunjukkan dalam formula berikut:

• fn(x,y) ==> fn(x)(y);
• fn(x,y,z,w) ==> ( y,z,w) ||. fn(x,y)(z,w)||…

Jika kita mahu menjadi lebih fleksibel:

• fn (x ,y) ==> fn(x)(y);
• fn(x,y,z) ==> fn(x,y)(z) ||. (y )(z);
• fn(x,y,z,w) ==> fn(x,y)(z)(w) || )( w) ||. …;

Bagaimana kita melaksanakannya?

4. Cipta fungsi kari yang fleksibel

Selepas latihan di atas, kami mendapati bahawa fungsi kari yang kami cipta mempunyai had tertentu Kami berharap fungsi itu boleh dilaksanakan dalam beberapa langkah:

// 创建一个可以多步执行的柯里化函数，当参数满足数量时就去执行它：
// 函数公式：fn(x,y,z,w) ==> fn(x)(y)(z)(w);
let createCurry = (fn,...params)=> {
	let args = parsms || [];
	let fnLen = fn.length; // 指定柯里化函数的参数长度
	
	return (...res)=> {
		// 通过作用域链获取上一次的所有参数
		let allArgs = args.slice(0);
		// 深度拷贝闭包共用的args参数，避免后续操作影响（引用类型）
		allArgs.push(...res);
		if(allArgs.length < fnLen){
		   // 当参数数量小于原函数的参数长度时，递归调用createCurry函数
		   return createCurry.call(this,fn,...allArgs);
		}else{
		  // 当参数数量满足时，触发函数执行
		  return fn.apply(this,allArgs);
		}
	}
}


// 多个参数的普通函数
function add(a,b,c,d){
	return a + b + c + d;
}

// 测试柯里化函数

let curryAdd = createCurry(add,1);
console.log(curryAdd(2)(3)(4)); // 10

Kami telah melaksanakan fungsi kari yang fleksibel di atas, tetapi di sini kami dapati satu lagi masalah:

• Jika saya lulus semua parameter untuk kali pertama, tetapi ia tidak mengembalikan a hasil, tetapi fungsi.
• Hanya apabila kita memanggil fungsi yang dikembalikan sekali lagi, hasilnya boleh dikembalikan: curryAdd(add,1,2,3,4)();
• Sesetengah orang mungkin mengatakan bahawa jika semua parameter diluluskan, panggil sahaja fungsi add() asal . Ini juga merupakan satu cara; tetapi kerana kami berada di sini untuk memenuhi bilangan parameter, kami masih menangani situasi ini.

Di sini kita hanya perlu membuat pertimbangan sebelum mengembalikan fungsi:

let createCurry = (fn,...params)=> {
	let args = parsms || [];
	let fnLen = fn.length; // 指定柯里化函数的参数长度
	
	if(length === _args.length){
	   // 加入判断，如果第一次参数数量以经足够时就直接调用函数获取结果
           return fn.apply(this,args);
        }
	return (...res)=> {
		let allArgs = args.slice(0);
		allArgs.push(...res);
		if(allArgs.length < fnLen){
		   return createCurry.call(this,fn,...allArgs);
		}else{
		  return fn.apply(this,allArgs);
		}
	}}

Di atas boleh dianggap sebagai melengkapkan fungsi kari yang fleksibel, tetapi di sini Ia tidak begitu fleksibel, kerana kita tidak boleh mengawal apabila ia dilaksanakan, ia akan dilaksanakan secara automatik selagi bilangan parameter mencukupi. Apakah yang perlu kita lakukan jika kita ingin melaksanakan pemasaan yang boleh mengawal pelaksanaannya?

5 Tulis fungsi kari dengan masa pelaksanaan yang boleh dikawal

Mari jelaskan formula fungsi secara langsung di sini:

• fn(a,b,c) ==> fn(a)(b)(c )();
• fn(a,b,c) ==> fn(a);fn(b);fn(c );fn();
• 当我们参数足够时它并不会执行，只有我们再次调用一次函数它才会执行并返回结果。在这里我们在以上例子中加一个小小的条件就可以实现。

// 当参数满足，再次执行时调用函数
let createCurry = (fn,...params)=> {
	let args = parsms || [];
	let fnLen = fn.length; // 指定柯里化函数的参数长度
	
	//当然这里的判断需要注释掉，不然当它第一次参数数量足够时就直接执行结果了
	//if(length === _args.length){
	   // 加入判断，如果第一次参数数量以经足够时就直接调用函数获取结果
           //return fn.apply(this,args);
        //}
	return (...res)=> {
		let allArgs = args.slice(0);
		allArgs.push(...res);
		// 在这里判断输入的参数是否大于0，如果大于0在判断参数数量是否足够，
		// 这里不能用 && ，如果用&& 也是参数数量足够时就执行结果了。
		if(res.length > 0 || allArgs.length < fnLen){
		   return createCurry.call(this,fn,...allArgs);
		}else{
		  return fn.apply(this,allArgs);
		}
	}
}


// 多个参数的普通函数
function add(a,b,c,d){
	return a + b + c + d;
}

// 测试可控制的柯里化函数

let curryAdd = createCurry(add,1);
console.log(curryAdd(2)(3)(4)); // function
console.log(curryAdd(2)(3)(4)()); // 10
console.log(curryAdd(2)(3)()); // 当参数不足够时返回 NaN

相关推荐：javascript学习教程


Atas ialah kandungan terperinci Mari kita bincangkan tentang fungsi JavaScript kari. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!