jS:關於對象遍歷和數組遍歷的那些事

多是因爲職業的關係,下班以後徹底不想Open PC,但不少知識點有必要本身作個小小總結。本人以前對原生Array和Object徹底沒概念。數組


  • 遍歷對象的方法:函數

Object.keys(Object) | for(item in Object)| object.getOwnPropertyNames(o)this

  • 遍歷數組的方法:spa

Array.forEach() | Array.map() | Array.filter() | Array.some() | Array.every()prototype

下面一一來講說每種遍歷方法都是幹啥子用的code


遍歷對象,枚舉一個對象的全部屬性:

從 ECMAScript 5 開始,有三種原生的方法用於列出或枚舉對象的屬性:對象

  • for…in 循環blog

該方法依次訪問一個對象及其原型鏈中全部可枚舉的屬性。圖片

Object.keys(o)
圖片描述
該方法返回一個對象 o 自身包含(不包括原型中)的全部屬性的名稱的數組。ip

Object.getOwnPropertyNames(o)
該方法返回一個數組,它包含了對象 o 全部擁有的屬性(不管是否可枚舉)的名稱。

pay attention:Object.keys(object)返回的是一個數組。如圖:
圖片描述

遍歷數組(interating over array)

遍歷數組元素並以某種方式處理每一個元素是一個常見的操做。如下是最簡單的方式:

var colors = ['red', 'green', 'blue'];
for (var i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}
array.forEach()
  • forEach()

對數組中的而每一項運行傳入的函數,沒有返回值,本質是與for循環迭代數組同樣,通常的用法:

var numbers =[111,11,2,3];
numbers.forEach(function(item,index,array){
    //console.log(item,index,array)
})
或者:
var arr = [3, 5, 7];
arr.forEach(item => {
    console.log(item);
})

因爲 arrow function 的特性,自動綁定父 scope 的 this, 會更加簡潔,並且少了個function關鍵字,可讀性更好。

  • array.some() 和array.every()

var arr=[1,2,3,4];
var everyresult =arr.every((item,index,array) => item>2);
console.log(everyresult)//false

二者用法比較類似,用於查詢數組中的項是否知足某個條件,二者都有返回值,且返回值是boolean,true or false,every()只有每一項都知足才能返回true,不然返回false,some()則是相反的。切記返回值是true或者false;

  • array.map()和array.filter()

兩個方法比較類似,都有返回值,且返回的還都是數組,不是布爾類型。filter(),利用指定的函數肯定是否在返回的數組中包含某一項。用來數組去重比較靈活

var arr1=[11,22,223,24,3,42,3,11,11,2,3333,3333333,2];
var arr2 = arr1.filter((k,index) => arr1.indexOf(k) === index).sort((a,b) => a-b > 1);
Result: [3, 2, 11, 22, 24, 42, 223, 3333, 3333333]

又或者用法某一項值返回true的狀況下:
圖片描述

map() 也返回一個數組,不過,map有一點很差的地方在於不能控制循環的流程,若是不能完成,就返回undefined繼續下一次迭代。因此遇到可能會返回undefined的狀況應該用forEach或者for循環遍歷。
如圖:
圖片描述
不過,JQ裏的$.map()功能比較強大,能夠遍歷並且返回值是undefined的則被省略掉
圖片描述

var obj={"send_message":{"1":false,"2":true},"audit_type":{"1":true,"2":false,"3":true}};
var res={};
for(item in obj){
    var value =obj[item];
    var arr =Object.keys(value);
    var arr2 = $.map(arr,function(kk,vv){
    if(vv){
    return kk
}
})
    res[item]=arr2.join();}
console.log(res,'res');

總結

1.遍歷對象,Object.keys(object)遍歷出來的是鍵名,而不是鍵值,參數必須是對象。
2.遍歷數組,前提必須是數組,才能用filter/map/every/some/forEach等這幾個方法,且注意map()和filter()是有返回值的,map()有本身的缺陷,有可能返回undefined,而filter()返回的則是爲true的某一項
3.join()則是使用不一樣的分隔符來構建字符串,數組默認狀況下以逗號分隔的形式返回數組項。
4.雖然數組也是對象的一種,但確是Array類型,檢測數組的幾種方法:

if(arr instanceof Array){console.log('shuzu')};
or:
if(Array.isArray (arr)){console.log('shuzu')}
or:
if(Object.prototype.toString.call(arr) == '[object Array]'){console.log('我是數組')}

第三種辦法比較萬能,推薦使用!!

相關文章
相關標籤/搜索