摘要:如圖遍歷數(shù)組遍歷數(shù)組元素并以某種方式處理每個元素是一個常見的操作。如圖不過,里的功能比較強大,可以遍歷而且返回值是的則被省略掉總結(jié)遍歷對象,遍歷出來的是鍵名,而不是鍵值,參數(shù)必須是對象。
可能是由于職業(yè)的關(guān)系,下班之后完全不想Open PC,但很多知識點有必要自己做個小小總結(jié)。本人之前對原生Array和Object完全沒概念。
遍歷對象的方法:
Object.keys(Object) | for(item in Object)| object.getOwnPropertyNames(o)
遍歷數(shù)組的方法:
Array.forEach() | Array.map() | Array.filter() | Array.some() | Array.every()
下面一一來說說每種遍歷方法都是干啥子用的
遍歷對象,枚舉一個對象的所有屬性:從 ECMAScript 5 開始,有三種原生的方法用于列出或枚舉對象的屬性:
for…in 循環(huán)
該方法依次訪問一個對象及其原型鏈中所有可枚舉的屬性。
Object.keys(o)
該方法返回一個對象 o 自身包含(不包括原型中)的所有屬性的名稱的數(shù)組。
Object.getOwnPropertyNames(o)
該方法返回一個數(shù)組,它包含了對象 o 所有擁有的屬性(無論是否可枚舉)的名稱。
pay attention:Object.keys(object)返回的是一個數(shù)組。如圖:
遍歷數(shù)組元素并以某種方式處理每個元素是一個常見的操作。以下是最簡單的方式:
var colors = ["red", "green", "blue"]; for (var i = 0; i < colors.length; i++) { console.log(colors[i]); } array.forEach()
forEach()
對數(shù)組中的而每一項運行傳入的函數(shù),沒有返回值,本質(zhì)是與for循環(huán)迭代數(shù)組一樣,一般的用法:
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關(guān)鍵字,可讀性更好。
array.some() 和array.every()
var arr=[1,2,3,4]; var everyresult =arr.every((item,index,array) => item>2); console.log(everyresult)//false
兩者用法比較相似,用于查詢數(shù)組中的項是否滿足某個條件,兩者都有返回值,且返回值是boolean,true or false,every()只有每一項都滿足才能返回true,否則返回false,some()則是相反的。切記返回值是true或者false;
array.map()和array.filter()
兩個方法比較相似,都有返回值,且返回的還都是數(shù)組,不是布爾類型。filter(),利用指定的函數(shù)確定是否在返回的數(shù)組中包含某一項。用來數(shù)組去重比較靈活
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() 也返回一個數(shù)組,不過,map有一點不好的地方在于不能控制循環(huán)的流程,如果不能完成,就返回undefined繼續(xù)下一次迭代。所以遇到可能會返回undefined的情況應(yīng)該用forEach或者for循環(huán)遍歷。
如圖:
不過,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");總結(jié)
1.遍歷對象,Object.keys(object)遍歷出來的是鍵名,而不是鍵值,參數(shù)必須是對象。
2.遍歷數(shù)組,前提必須是數(shù)組,才能用filter/map/every/some/forEach等這幾個方法,且注意map()和filter()是有返回值的,map()有自己的缺陷,有可能返回undefined,而filter()返回的則是為true的某一項
3.join()則是使用不同的分隔符來構(gòu)建字符串,數(shù)組默認情況下以逗號分隔的形式返回數(shù)組項。
4.雖然數(shù)組也是對象的一種,但確是Array類型,檢測數(shù)組的幾種方法:
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("我是數(shù)組")}
第三種辦法比較萬能,推薦使用?。?/p>
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/84274.html
摘要:一前言記錄語言類型的一些問題。其它瀏覽器則完全按照對象定義的順序遍歷屬性。所以,順序這種事,還是要用數(shù)組來保證。詳細請參考對象遍歷順序三后記參考鏈接對象遍歷順序 一 前言 記錄javascript語言object類型的一些問題。 1. typeof []; // object 2. typeof {};// object 3. typeof null; //objec...
摘要:委托上面的代碼結(jié)合了構(gòu)造函數(shù)和原型兩種方式去創(chuàng)建對象,首先聊聊構(gòu)造函數(shù)構(gòu)造函數(shù)構(gòu)造函數(shù)本質(zhì)上還是函數(shù),只不過為了區(qū)分將其首字母大寫了而已。注意注釋掉的代碼是自動執(zhí)行的,但這并不是構(gòu)造函數(shù)獨有的,每個函數(shù)在聲明時都會自動生成。 首先看看下面兩個1+1=2的問題: 問題一:為什么改變length的值,數(shù)組的內(nèi)容會變化? var arr = [1]; arr.length = 3; aler...
摘要:的擴展知識對于哈希表來說,最重要的莫過于生成哈希串的哈希算法和處理沖突的策略了。由于鏈表的查找需要遍歷,如果我們將鏈表換成樹或者哈希表結(jié)構(gòu),那么就能大幅提高沖突元素的查找效率。 最近在整理數(shù)據(jù)結(jié)構(gòu)和算法相關(guān)的知識,小茄專門在github上開了個repo https://github.com/qieguo2016...,后續(xù)內(nèi)容也會更新到這里,歡迎圍觀加星星! js對象 js中的對象是基...
摘要:一個對象如果要有可被循環(huán)調(diào)用的接口,就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。阮大神案例上面代碼是一個類部署接口的寫法。屬性對應(yīng)一個函數(shù),執(zhí)行后返回當前對象的遍歷器對象。 最近看阮一峰阮大神的ES6,剛剛看到Iterator和for...of循環(huán)這一章,小作筆記跟大家略微分享一下,不足之處還望大家多多指正 Iterator(遍歷器)就是一種機制;任何數(shù)據(jù)結(jié)構(gòu)只要是...
摘要:獲得當前元素相對于的位置。返回一個對象含有和當給定一個含有和屬性對象時,使用這些值來對集合中每一個元素進行相對于的定位。獲取對象集合中第一個元素相對于其的位置。結(jié)尾以上就是中與偏移相關(guān)的幾個的解析,歡迎指出其中的問題和有錯誤的地方。 前言 這篇文章主要想說一下Zepto中與偏移相關(guān)的一些事,很久很久以前,我們經(jīng)常會使用offset、position、scrollTop、scrollLe...
閱讀 3784·2021-11-25 09:43
閱讀 2202·2021-11-23 10:13
閱讀 835·2021-11-16 11:44
閱讀 2382·2019-08-29 17:24
閱讀 1393·2019-08-29 17:17
閱讀 3488·2019-08-29 11:30
閱讀 2591·2019-08-26 13:23
閱讀 2353·2019-08-26 12:10