kemahiran toolset_javascript pengaturcaraan berfungsi javascript-tutorial js-php.cn

Jika anda melihat dengan teliti pada kod sampel yang telah muncul setakat ini, anda akan mendapati bahawa beberapa kaedah di sini tidak biasa. Ia adalah fungsi map(), filter(), dan reduce(), yang penting untuk pengaturcaraan berfungsi dalam mana-mana bahasa. Mereka membenarkan anda menulis kod yang lebih bersih tanpa menggunakan gelung dan pernyataan.

Fungsi map(), filter() dan reduce() membentuk bahagian teras set alat pengaturcara berfungsi ini termasuk satu siri fungsi tertib tinggi tulen yang menjadi tunjang kepada pendekatan berfungsi. Malah, ia adalah tipikal bagi fungsi tulen dan fungsi tertib lebih tinggi Ia mengambil fungsi sebagai input, mengembalikan hasil keluaran dan tidak menghasilkan kesan sampingan.

Walau bagaimanapun, ia adalah piawaian pelaksanaan ECMAScript 5.1 dalam penyemak imbas dan ia hanya berfungsi dengan tatasusunan. Setiap kali mereka dipanggil, tatasusunan baharu akan dibuat dan dikembalikan, manakala tatasusunan sedia ada tidak akan diubah. Mereka mengambil fungsi sebagai input, selalunya menggunakan fungsi tanpa nama sebagai fungsi panggil balik. Mereka melelar melalui tatasusunan dan menggunakan fungsi itu pada setiap elemen tatasusunan!

myArray = [1,2,3,4];
newArray = myArray.map(function(x) {return x*2});
console.log(myArray); // Output: [1,2,3,4]
console.log(newArray); // Output: [2,4,6,8]

Salin selepas log masuk

Perkara lain ialah ia hanya berfungsi pada tatasusunan dan tidak boleh berfungsi pada struktur data boleh lelar lain, seperti objek. Jangan risau, terdapat banyak perpustakaan seperti Underscore.js, Lazy.js, stream.js, dsb. yang melaksanakan map(), filter() dan reduce() mereka sendiri yang lebih berkuasa.

Panggil balik

Jika anda tidak pernah menggunakan panggilan balik sebelum ini, konsepnya mungkin agak mengelirukan. Terutama dalam Javascript, Javascript menyediakan beberapa cara untuk mengisytiharkan fungsi.

Fungsi panggil balik digunakan untuk menghantar ke fungsi lain untuk kegunaannya Ini adalah cara untuk menghantar logik seperti objek yang lulus:

var myArray = [1,2,3];
function myCallback(x){return x+1};
console.log(myArray.map(myCallback));

Salin selepas log masuk

Untuk tugasan yang lebih mudah anda boleh menggunakan fungsi tanpa nama:

console.log(myArray.map(function(x){return x+1}));

Salin selepas log masuk

Panggil balik bukan sahaja digunakan dalam pengaturcaraan berfungsi, ia boleh melakukan banyak perkara dalam Javascript. Sebagai contoh, inilah fungsi panggil balik() untuk panggilan AJAX jQuery:

function myCallback(xhr) {
 console.log(xhr.status);
 return true;
}
$.ajax(myURI).done(myCallback);

Salin selepas log masuk

Perhatikan bahawa hanya nama fungsi yang digunakan di sini, kerana kami tidak memanggil fungsi tetapi menghantar fungsi tersebut adalah salah untuk menulisnya seperti ini:

$.ajax(myURI).fail(myCallback(xhr)); 
// 或者
$.ajax(myURI).fail(myCallback());

Salin selepas log masuk

Apa yang berlaku jika kita memanggil fungsi tersebut? Dalam contoh ini, myCallback(xhr) akan cuba untuk melaksanakan, konsol akan mencetak "undefined", dan akan kembali benar. Apabila ajax() melengkapkan panggilan, fungsi panggil balik yang ditemui berdasarkan namanya akan menjadi "benar" dan ralat akan dilaporkan.

Maksudnya, kami tidak boleh menentukan parameter yang hendak dihantar ke fungsi panggil balik Jika fungsi panggil balik kami memerlukan fungsi ajax() untuk menghantarnya parameter yang kami mahu, kami boleh membungkus fungsi pulangan dalam fungsi tanpa nama: <. 🎜>

function myCallback(status) {
 console.log(status);
 return true;
}
$.ajax(myURI).done(function(xhr) {
 myCallback(xhr.status)
});

Salin selepas log masuk

Array.prototype.map()

map() ialah peneraju fungsi ini. Ia hanya menggunakan fungsi panggil balik pada elemen dalam tatasusunan.

Sintaks: arr.map(panggilan balik [, thisArg]);

Parameter:

•callback(): Fungsi ini menjana elemen untuk tatasusunan baharu Parameter yang diterima: ◦currentValue: elemen yang sedang dilalui dalam tatasusunan
. ◦indeks: nombor elemen semasa dalam tatasusunan
◦array: tatasusunan sedang diproses

•thisArg: Ini ialah parameter pilihan Apabila panggilan balik dilaksanakan, ia berfungsi sebagai ini

fungsi panggil balik.

Contoh:

var
 integers = [1, -0, 9, -8, 3],
 numbers = [1, 2, 3, 4],
 str = 'hello world how ya doing&#63;';
 
// 将整数映射为他们自己的绝对值
console.log(integers.map(Math.abs));

// 将数组中的元素与自己的位置序数相乘
console.log(numbers.map(function(x, i) {
 return x * i
}));
// 单词隔一个变一个大写
console.log(str.split(' ').map(function(s, i) {
 if (i % 2 == 0)
  return s.toUpperCase();
 else
  return s;
}));

Salin selepas log masuk

Walaupun kaedah Array.prototype.map ialah kaedah standard untuk objek tatasusunan dalam Javascript, anda boleh memanjangkan objek anda sendiri dengan mudah.

MyObject.prototype.map = function(f) {
 &#8195;return new MyObject(f(this.value));
 };

Salin selepas log masuk

Array.prototype.filter()

Fungsi penapis() digunakan untuk menapis beberapa elemen dalam tatasusunan. Fungsi panggil balik mesti mengembalikan benar (simpan dalam tatasusunan baharu) atau palsu (buangnya). Anda boleh menggunakan map() untuk melakukan sesuatu yang serupa, iaitu mengembalikan null sebagai null untuk elemen yang anda ingin buang Walau bagaimanapun, fungsi filter() akan memadamkan elemen yang tidak perlu ini dalam tatasusunan baharu dan bukannya meninggalkan null untuk mendudukinya. kedudukan.

Sintaks: arr.filter(panggilan balik [, thisArg]);

•panggilan balik(): Fungsi ini digunakan untuk menguji setiap elemen dalam tatasusunan Ia sepatutnya mengembalikan benar, jika tidak ia mengembalikan palsu. Ia mempunyai parameter berikut: ◦currentValue: elemen yang sedang dilalui dalam tatasusunan

◦indeks: nombor ordinal unsur semasa dalam tatasusunan
◦array: tatasusunan sedang diproses

•thisArg: Ini ialah parameter pilihan Apabila panggilan balik dilaksanakan, ia berfungsi sebagai

fungsi panggil balik.

Contoh:

var myarray = [1, 2, 3, 4]
words = 'hello 123 world how 345 ya doing'.split(' ');
re = '[a-zA-Z]';
// 筛选整数
console.log([-2, -1, 0, 1, 2].filter(function(x) {
 return x > 0
}));
// 筛选所有含字母的单词
console.log(words.filter(function(s) {
 return s.match(re);
}));
// 随机移除数组中的元素
console.log(myarray.filter(function() {
 return Math.floor(Math.random() * 2)
}));

Salin selepas log masuk

Array.prototype.reduce()

reduce()函数，有时也称为fold，它用于把数组中的所有值聚集到一起。回调需要返回组合对象的逻辑。对于数字来说，它们往往会被加到一起或者乘到一起。对于字符串来说，它们往往是被追加到一起。

语法：arr.reduce(callback [, initialValue]);

参数
•callback()：此函数把两个对象合并成一个对象，并将其返回。参数有： ◦previousValue：上一次回调函数被调用时返回的值，或者是初始值（如果有的话）
◦currentValue：数组当前正在处理的元素
◦index：数组中当前元素的序数
◦array：当前正在处理的数组

•initialValue：可选。第一次回调所传入参数的初始值

例子

var numbers = [1, 2, 3, 4];

// 把数组中所有的值加起来
console.log([1, 2, 3, 4, 5].reduce(function(x, y) {
 return x + y
}, 0));

// 查找数组中最大的值
console.log(numbers.reduce(function(a, b) {
  return Math.max(a, b) // max()函数只能有两个参数
 }) 
);

Salin selepas log masuk

其它函数

map()、filter()和reduce()函数在我们辅助函数的工具箱里并不孤单。这里还有更多的函数几乎在所有函数式应用里都会被使用。

Array.prototype.forEach

forEach()函数本质上是map()函数的非纯版本，它会遍历整个数组，并对每个元素应用回调。然而这些回调函数不返回值。它是实现for循环的一个更纯粹的方式。

语法：arr.forEach(callback [, thisArg]);

参数：
•callback()：对数组中每一个元素所应用的。参数有： ◦currentValue：数组中当前正在处理的元素
◦index：数组中当前元素的序数
◦array：正在处理的数组

•thisArg：可选。回调函数中作为this的值

例子：

var arr = [1, 2, 3];
var nodes = arr.map(function(x) {
 var elem = document.createElement("div");
 elem.textContent = x;
 return elem;
});

// 对每一个元素的值输出日志
arr.forEach(function(x) {
 console.log(x)
});

// 把节点追加到DOM上
nodes.forEach(function(x) {
 document.body.appendChild(x)
});

Salin selepas log masuk

Array.prototype.concat

如果不用for或while处理数组，你会经常需要把数组拼接起来。另一个Javascript内建函数concat就是专门干这事儿的。 concat函数会返回一个新数组但不改变旧数组。它可以把你传入的所有参数拼接到一起。
console.log([1, 2, 3].concat(['a','b','c']) // 拼接两个数组
// Output: [1, 2, 3, 'a','b','c']

它返回两个数组拼接成的数组，同时原来的那些数组没有被改变。这就意味着concat函数可以链式调用。

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
var x = arr1.concat(arr2, arr3);
var y = arr1.concat(arr2).concat(arr3));
var z = arr1.concat(arr2.concat(arr3)));
console.log(x);
console.log(y);
console.log(z);

Salin selepas log masuk

变量x、y、z的值最后都是[1,2,3,4,5,6,7,8,9]。

Array.prototype.reverse

这个Javascript内建函数是用于数组变形的。reverse函数用于将一个数组反转，也就是第个一元素会跑到最后，而最后一个元素变成了第一个元素。

然而，这个函数并不会返回一个新的数组，而是把原来的数组替换掉了。我们可以做个更好的。下面是一个纯的反转数组函数

var invert = function(arr) {
 return arr.map(function(x, i, a) {
  return a[a.length - (i + 1)];
 });
};
var q = invert([1, 2, 3, 4]);
console.log(q);

Salin selepas log masuk

Array.prototype.sort

与map()、filter()和reduce()函数相似，排序函数sort()需要传入一个回调函数来定义数组如何排序。但是，跟reverse()一样，它也会把原来的数组替换。这可不太好。
arr = [200, 12, 56, 7, 344];
console.log(arr.sort(function(a,b){return a–b}) );
// arr现在是: [7, 12, 56, 200, 344];

我们可以写一个纯函数的sort()，但是排序算法的源代码很麻烦。对于特别大的数组，应当根据特定的数据结构来选用适合的算法，比如快速排序、合并排序、冒泡排序等等。

Array.prototype.every 和 Array.prototype.some

Array.prototype.every() 和 Array.prototype.some() 都是纯的高阶函数，它们是Array对象的方法，通过回调函数根据数组各元素返回的布尔值（或相当于布尔的值）来进行测试。如果数组中所有的元素通过回调函数计算都返回True， every()函数就返回true；如果数组中有一个元素返回True，some()函数就返回True。

例子：

function isNumber(n) {
 return !isNaN(parseFloat(n)) && isFinite(n);
}
console.log([1, 2, 3, 4].every(isNumber)); // Return: true
console.log([1, 2, 'a'].every(isNumber)); // Return: false
console.log([1, 2, 'a'].some(isNumber)); // Return: true

Salin selepas log masuk