JavaScript數組筆記2:ES5中新增Array方法(一)

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)
image.png

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新對象時,綁定到了新對象上


這里的thisArg參數即為this

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
);

console結果

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)
console結果

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(","))
console結果

延伸:在字符串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‘字符串上


console結果

demo1:反轉字符串

var str = '12345';
var a = Array.prototype.map.call(str,function(x) {
  return x
}).reverse().join('')

console.log(a)
console結果

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)
console結果
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,247評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,520評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,362評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,805評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,541評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,896評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,887評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,062評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,608評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,356評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,555評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,077評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,769評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,175評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,489評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,289評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,516評論 2 379

推薦閱讀更多精彩內容