Contoh terperinci kaedah Tatasusunan baharu dalam kemahiran ECMAScript5_javascript

ECMAScript5 menyediakan satu siri antara muka API yang baharu. Kebanyakan antara muka ini disokong dalam pelayar baharu IE9, dan FirFor semua menyokongnya. Terdapat juga beberapa API yang tidak disokong oleh semua penyemak imbas hanya Memperkenalkan kebanyakan API yang disokong. Menggunakan API baharu kami boleh mereka bentuk kelas yang sangat boleh dipercayai sambil mengekalkan gaya JavaScript asal.

Standard ECMAScript5 telah dikeluarkan pada 3 Disember 2009. Ia membawa beberapa kaedah baharu untuk menambah baik operasi tatasusunan Array sedia ada. (nota keserasian)

Dalam ES5, terdapat sejumlah 9 kaedah Tatasusunan: http://kangax.github.io/compat-table/es5/

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight 

7 daripada kaedah disenaraikan di bawah 5 kaedah pertama adalah sangat biasa dan digunakan oleh banyak pembangun:

1. indexOf()

Kaedah indexOf() mengembalikan kedudukan elemen pertama yang ditemui dalam tatasusunan, atau -1 jika ia tidak wujud.

var arr = ['apple', 'orange', 'pear'],
found = false;
// 未使用
for (var i = 0, l = arr.length; i < l; i++) {
if (arr[i] === 'orange') {
found = true;
}
}
console.log("found:", found); // ==> found: true
// 使用后
console.log("found:", arr.indexOf("orange") != -1); // ==> found: true 

2. penapis()

Kaedah penapis() mencipta tatasusunan baharu yang sepadan dengan keadaan penapis.

Apabila penapis() tidak digunakan:

var arr=[{"name":"apple", "count": 2},{"name":"orange", "count": 5},{"name":"pear", "count": 3},{"name":"orange", "count": 16},]
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].name === "orange") {
newArr.push(arr[i]);
}
}
console.log("Filter results:", newArr); 

penapis terpakai():

var newArr = arr.filter(function(item) {
return item.name === "orange";
});
console.log("Filter results:", newArr); 

3 untukSetiap()

forEach melaksanakan kaedah yang sepadan untuk setiap elemen dan digunakan untuk menggantikan gelung for.

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
// 使用for循环
for (var i = 0, l = arr.length; i < l; i++) {
console.log(arr[i]);
}
// 使用forEach循环
arr.forEach(function(item, index) {
console.log(item);
}); 

4. map()

Selepas map() melakukan operasi tertentu (pemetaan) pada setiap elemen tatasusunan, ia akan mengembalikan tatasusunan baharu.

var oldArr = [{first_name: "Colin",last_name: "Toh"}, {first_name: "Addy",last_name: "Osmani"}, {first_name: "Yehuda",last_name: "Katz"}];
function getNewArr() {
var newArr = [];
for (var i = 0; i < oldArr.length; i++) {
var item = oldArr[i];
item.full_name = [item.first_name, item.last_name].join(" ");
newArr[i] = item;
}
return newArr;
}
var personName = getNewArr();
personName.forEach(function(item, index) {
console.log(item);
})
/****输出结果：
Object {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
Object {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
Object {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}
****/ 

Gunakan kaedah map():

function getNewArr() {
return oldArr.map(function(item, index) {
item.full_name = [item.first_name, item.last_name].join(" ");
return item;
})
}
var personName = getNewArr();
personName.forEach(function(item, index) {
console.log(item);
})
/****输出结果：
Object {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
Object {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
Object {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}
****/ 

5. kurangkan()

reduce() boleh melaksanakan fungsi penumpuk, mengurangkan setiap nilai tatasusunan (dari kiri ke kanan) kepada nilai. Ia juga boleh difahami sebagai: biarkan item sebelumnya dan seterusnya dalam tatasusunan melakukan beberapa jenis operasi dan mengumpul nilai akhir

Senario: Kira berapa banyak perkataan unik yang terdapat dalam tatasusunan

var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];
function getWordCnt() {
var obj = {};
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
obj[item] = (obj[item] + 1) || 1;
}
return obj;
}
console.log(getWordCnt());
// 输出结果：
// Object {apple: 2, orange: 3, pear: 1} 

Selepas menggunakan reduce():

var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];
function getWordCnt() {
return arr.reduce(function(prev, next) {
prev[next] = (prev[next] + 1) || 1;
return prev;
}, {});
}
console.log(getWordCnt());
// 输出结果：
// Object {apple: 2, orange: 3, pear: 1} 

6, array.some(panggilan balik[, thisObject]); panggilan balik: fungsi yang digunakan untuk menguji elemen tertentu.

thisObject: Objek digunakan sebagai panggilan balik pelaksanaan.

Kesan sama ada item tertentu dalam tatasusunan memenuhi syarat

var scores = [45, 60, 70, 65, 95, 85];
var current = 60;
function passed(score) {
return score > current;
}
console.log(scores.some(passed)); // == > true 

7. array.every(panggilan balik[, thisObject]); panggilan balik : fungsi digunakan untuk menguji setiap elemen. thisObject: Objek digunakan sebagai panggilan balik pelaksanaan.

Semak sama ada setiap item dalam tatasusunan memenuhi syarat;

var scores = [45, 60, 70, 65, 95, 85];
var current = 60;
function passed(score) {
return score > current;
}
console.log(scores.every(passed)); // == > false

Contoh di atas memperkenalkan anda kepada kaedah Tatasusunan baharu dalam ECMAScript5 saya harap ia akan membantu anda!