1、引言
ES5中數組新增了不少東西,現在ES5使用也比較普及,了解這些新增的方法,對我們使用JavaScript也有不少的好處
下面的ES5新增寫的數組方法:
1、forEach
2、map
3、filter
4、some
5、every
6、indexOf
7、lastIndexOf
8、reduce
9、reduceRight
2、forEach、map、filter
1、forEach()方法是Array中最基本的一個,簡單的循環和遍歷;但也可以對數組的每個元素執行一次提供的函數
語法:
array.forEach(callback(currentValue, index, array){
//do something
}, this)
array.forEach(callback[, thisArg])
補充衍生:對比jQuery中的$.each
方法(callback中第一個參數正好和第二個參數相反)
$.each(array,callback(index, currentValue,array){
//do something
})
forEach方法中的callback函數接受三個參數:
- currentValue:數組當前項的值
- index : 數組當前項的索引
- arrry : 數組對象本身
thisArg :可選參數,當給forEach傳遞了thisArg參數,調用時,將傳遞給callback函數,作為它的this值。
demo1 :一個簡單的例子
var sum = 0
var arr = [1,2,3,4]
arr.forEach(function(item,index,arr) {
console.log(arr[index] == item)
sum += item;
})
console.log(sum)
demo2 :使用thisArg的小例子
function Counter() {
this.sum = 0;
this.count = 0;
}
Counter.prototype.add = function(array) {
array.forEach(function(entry){
this.sum += entry
++this.count;
},this)
console.log(this);
}
var obj = new Counter();
obj.add([1,3,5,7]);
當我們new一個新的對象時,構造函數的this將綁定到新對象上,那么這里的thisArg參數(this)即在new新對象時,綁定到了新對象上
demo3 :使用thisArg升級版例子
var database = {
users: ["hello", "world", "wu"],
sendEmail: function (user) {
if (this.isValidUser(user)) {
console.log("你好," + user);
} else {
console.log("抱歉,"+ user +",你不是本家人");
}
},
isValidUser: function (user) {
return /^w/.test(user);
}
};
// 給每個人法郵件
database.users.forEach( // database.users中人遍歷
database.sendEmail, //callback函數 -> 發送郵件
database // thisArg ->calllback函數中的this指向database
);
2、 map 這里的map不是’地圖‘的意思,而指的’映射‘,
[].map();
,基本的用法和forEach類似
mdn: map() 方法創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數后返回的結果
語法:
var new_array = arr.map(function callback(currentValue, index, array) {
// return element for new_array
}[, thisArg])
demo1:一個簡單的小例子
var data = [1,2,3,4]
var arrSquares = data.map(function(item){
return item*item //callback需要有return值,若無則返回undefined
})
console.log(arrSquares)
demo2:利用map方法獲取對象數組中的特性屬性值
var users = [
{name: "wolrd", "email": "world@gmail.com"},
{name: "hello", "email": "hello@gmail.com"},
{name: "wu", "email": "wu@gmail.com"}
];
var emails = user.map(function(user) {
return user.email //遍歷數組內的每一個對象
})
console.log(emails)
console.log(emails.join(","))
延伸:在字符串String中使用map方法
demo1:獲取字符串中每一個字符的ASCII碼
var a = Array.prototype.map.call('hello world',function(x){
return x.charCodeAt(0);
})
console.log(a)
通過call方法使String->'hello world'有通過map方法來執行轉換操作,將this綁定到’hello world‘字符串上
demo1:反轉字符串
var str = '12345';
var a = Array.prototype.map.call(str,function(x) {
return x
}).reverse().join('')
console.log(a)
3、filter為“過濾”、“篩選”之意。指數組filter后,返回過濾后的新數組。用法與map類似
mdn:filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。
***語法:var new_array = arr.filter(callback[, thisArg])
demo:
function isBigEnough(value) {
return value>10;
}
var filtered = [12,5,8,101].filter(isBigEnough)
console.log(filtered)