當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...

發布時間：2025/3/12 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、給對象添加屬性：使用?object.prop 或object['prop']? 給對象添加屬性

let obj={};obj.name="zhangsan";obj["age"]=23;obj["class"]="語文";console.log(obj); //輸出：{name: "zhangsan", age: 23, class: "語文"}

2、刪除對象屬性：使用 delete 刪除對象屬性

let obj={name:"xiaohua",age:22}; delete obj.name; delete obj["age"]; console.log(obj); //輸出：{}

? 注意：：在循環中刪除對象屬性時候會報錯！！！待補充

3、對象合并：使用jquery的? $.extend(obj01,obj02)合并多個對象

4、對象合并：使用 Object.assign(o1,o2) 方法

5、遍歷對象鍵、屬性值：使用 for(變量?in 對象) 的形式遍歷對象屬性名

let obj001={name:'tom',age:26}; for(let key in obj001){console.log(key+":"+obj001[key]); //輸出：name:tom和age:26 ,key就是屬性名（鍵） } console.log(Object.keys(obj001)); //Object.keys(o1)方法數組形式返回o1對象的所有屬性名(鍵) //Object.keys(obj001)方法獲取的是對象實例屬性組成的數組，不包括原型方法和屬性！！！！

注意：for...in...遍歷的是數組或對象的索引值index，而for...of...遍歷的是數組的元素值；

6、遍歷數組：使用 for(變量?in 數組) 的形式遍歷數組

let arr01=[12,22,32,42]; let arr02=new Array(12,22,32,42); //使用Array構造函數創建數組 let arr03=new Array(5); //創建一個包含5項的數組 for(let index in arr01){ //index是數組下標，for..in..遍歷所有索引項console.log(index+":"+arr01[index]); //輸出：0:12 1:22 2:32 3:42 }

注意：for...in...更適合遍歷對象，for...of...更適合遍歷數組值

for in 遍歷數組會存在一些問題，如下：

Array.prototype.method=function(){ //原型方法console.log(this.length); } var myArray=[1,2,4,5,6,7] myArray.name="數組" for (var index in myArray) {console.log(myArray[index]); } //使用for in會遍歷數組所有的可枚舉屬性，包括原型。例如上栗的原型方法method和name屬性 //問題二：遍歷順序有可能不是按照實際數組的內部順序

for in 遍歷對象時候可以通過hasOwnPropery方法可以判斷某屬性是否是該對象的實例屬性，如下：

for (var key in myObject) {if（myObject.hasOwnProperty(key)){console.log(key);} }

或者ES5的Object.keys(myObject)獲取對象的實例屬性組成的數組，不包括原型方法和屬性。

Object.prototype.method=function(){console.log(this); } var myObject={a:1,b:2,c:3 } Object.keys(myObject).forEach(function(key,index){<br>　　console.log(key,myObject[key])<br>})

6、遍歷數組：使用 for(元素 of?數組) 的形式遍歷數組

let arr01=[12,22,32,42]; for(let ele of arr01){ //for遍歷所有的ele元素項console.log(ele); //輸出：12 22 32 42 }

7、forEach遍歷數組：使用 forEach(元素 of?數組) 的形式遍歷數組，使用如下：

//forEach(fn)方法將對數組中的每一個元素執行一次該fn匿名函數，其中ele是當前元素,index是當前元素的索引值,arr是原數組； //匿名函數中的this指向window; //forEach()方法無返回，是undefined;let arr01=['hello','world']; arr01.forEach(function(ele,index,arr){ console.log(index); console.log(ele);console.log(this); console.log(arr);//arr[1]="tom"; //可以通過索引對數組元素值進行修改}); //兩次分別輸出：0 hello window ['hello','world','tom']; 1 world window ['hello','world','tom']; console.log(arr01); //輸出：['hello','world','tom']，所以forEach（）并不會改變原數組

8、?map遍歷數組：使用?map(function(ele,index,arr){ return XXX;}) 的形式遍歷數組，使用如下：

//arr.map()中的匿名函數中的參數ele、index、arr分別表示遍歷數組時當前對象元素、當前索引值、原有數組； //arr.map()會返回一個新的數組，但不改變原有數組；方法中的this指向window； //arr.map() 和arr.forEach()方法都不會對空數組進行執行； //map()方法瀏覽器支持：ie9+ Safari1.5+let oldArr=[1,2,3]; let newArr=oldArr.map(function(ele,index,arr){console.log("原有數組元素"+index+":"+ele+"/"+arr[index]);console.log(this);return ele*2; }); console.log(newArr); //輸出：[2, 4, 6]let arr1=[]; let newArr1=arr1.map(function(){return ele; }) console.log("空數組使用map方法："+newArr1); //輸出為：空數組使用map方法：

注意：forEach() 和 map() 以及 filter() 方法只能遍歷數組；

9、?filter遍歷數組：使用?filter(fn) 方法過濾 數組中的每一項，返回滿足條件的項組成新的數組

//filter()不改變原有數組，返回符合過濾條件的項并組成新的數組；方法中的this指向window； let arr1=[1,2,3,4,5,6,7,8,9,10]; let newArr=arr1.filter(function(ele,index,arr){//console.log(this);return ele%3==0 &&ele>5; }); console.log(arr1); //輸出：[1,2,3,4,5,6,7,8,9,10] console.log(newArr); //輸出：[6,9]

10、js數組 push() 方法：使用 arr.push(ele)?方法在數組尾部添加一個或多個元素，并返回新的長度

let arr1=[1,2,3]; let b=arr1.push(55,66); console.log(arr1); //輸出：[1,2,3,55,66] 元素被添加到數組尾部 console.log(b); //輸出：5 ，返回的是新的長度

11、js數組 pop() 方法：使用 arr.pop()?方法刪除數組尾部元素，并返回被刪除的元素

let arr1=[0,2,4,6]; let b=arr1.pop(); console.log(arr1); //輸出：[0,2,4] console.log(b); //輸出：6

12、js數組 unshift() 方法：使用 arr.unshift()?方法在數組開頭添加一個或多個元素，并返回新的長度

let arr1=[0,2,4,6]; let b=arr1.unshift(77,88); console.log(arr1); //輸出：[77,880,0,2,4,6] console.log(b); //輸出：6

13、js數組 shift() 方法：使用 arr.shift()?方法刪除并返回數組的第一個元素

let arr1=[0,2,4,6]; let b=arr1.shift(); console.log(arr1); //輸出：[2,4,6] console.log(b); //輸出：0

14、js數組 slice() 方法：使用 arr.slice(index1,index2)?方法獲取數組開始下標到結束下標之間的元素組成一個新的數組

let arr1=[0,2,4,6,8]; let b=arr1.slice(2,4); let c=arr1.slice(2); console.log(arr1); //輸出：[0,2,4,6,8] console.log(b); //輸出：[4,6] //包括起始下標對應的元素，不包括結束下標對應的元素 console.log(c); //輸出：[4,6,8] //獲取數組指定下表后的數據并返回新的結果數組

15、js數組 splice() 方法：使用 splice(start,deleteCount,val1,val2)方法從start位置開始刪除deleteCount項，再插入值val1、val2 ，并返回刪除的數組

let arr1=[66,22,33,4,55,11]; let b=arr1.splice(1,2,111,222); //所以這里刪除了22和33，接著添加了111和2222 console.log(arr1); //輸出：[66,111,222,4,55,11] console.log(b); //輸出：[22,33] //返回了刪除的數組

16、js數組 concat()合并?方法：使用 arr.concat(arr1,arr2)?方法合并兩個或更多的數組，并返回合并后的結果數組。

let arr1=[1,22,33,44,55]; let arr2=[100,200] let d=arr1.concat(88,arr2); console.log(d); //輸出：[1,22,33,44,55,88,100,200] console.log(arr1); //輸出：[1,22,33,44,55] 不改變原來的數組 console.log(arr2); //輸出：[100,200] 不改變原來的數組

17、js數組 join()合并?方法：使用 arr.join(separator)?方法將數組的所有項通過separator拼接成一個字符串

let arr1=['hello','every','body']; let m=arr1.join('--'); console.log(m); //輸出：hello--every--body console.log(arr1); //原數組不變

18、js數組 sort()排序方法：使用 arr.sort()?方法會將數組的所有項toString()轉型成字符串，所以sort方法比較的是字符串，所以會出現3>13的錯誤如下，所以這里使用函數作為參數來調用解決問題

let arr1=[1,22,13,52,3]; let m=arr1.sort(); console.log(m); //輸出：[1, 13, 22, 3, 52],比較的是字符串大小let n=arr1.sort(function(a,b){return a-b;}); console.log(n); //升序輸出：[1, 3, 13, 22, 52],所以這里使用函數作為參數來調用let arr2=[1,22,13,52,3]; let k=arr2.sort(function(a,b){return b-a;}); console.log(k); //降序輸出：[52, 22, 13, 3, 1] let arr1=["hello","world","tom"]; let m=arr1.sort(); console.log(m); //輸出：["hello", "tom", "world"],可以字符串排序 console.log(arr1); //輸出：["hello", "tom", "world"],原數組改變

19、js數組 reverse()反轉方法：使用 arr.reverse()?方法反轉數組所有元素項的順序

let arr1=["hello","world","tom"]; let m=arr1.reverse(); console.log(m); //輸出：["tom", "world", "hello"] console.log(arr1); //輸出：["tom", "world", "hello"], 原數組改變

20、js數組 indexOf() 搜索位置方法：使用 arr.indexOf()?方法返回數組中指定元素所在位置，從數組開頭往結尾查找

let arr1=["hello","world","tom","world"]; let m=arr1.indexOf("world"); let n=arr1.indexOf("world",1); //第二個參數是可選參數，表示開始查找第一個參數的起點位置,返回從1的位置后第一次出現‘world’所在的位置 let k=arr1.lastIndexOf("hello",1); //從前往后查找，表示從數組的第二個元素開始查找‘hello’的位置 let j=arr1.lastIndexOf("Jane"); //沒有找到將返回-1 console.log(m); //輸出：1 console.log(n); //輸出：1 console.log(k); //輸出：0 console.log(j); //輸出：-1 console.log(arr1); //輸出：["hello","world","tom","world"],原數組沒有改變

21、js數組 lastIndexOf() 搜索位置方法：使用 arr.lastIndexOf()?方法返回數組中指定元素最后出現的位置，也就是最后一個該元素的位置

let arr1=["hello","world","tom","world"]; let m=arr1.lastIndexOf("tom"); let n=arr1.lastIndexOf("world"); let k=arr1.lastIndexOf("Jane"); console.log(m); //輸出：2 console.log(n); //輸出：3 console.log(k); //輸出：-1 ，沒找到返回-1 console.log(arr1); //輸出：["hello","world","tom","world"],原數組沒有改變

22、js數組 every() 方法：使用 arr.every()?方法檢測數組元素的每個元素是否都符合條件。所有元素都符合條件則返回true

let arr1=[1,3,5,6,8]; let m=arr1.every(function(ele){return ele<10; }); console.log(m); //輸出：true console.log(arr1); //原數組沒有改變

23、js數組 some() 方法：使用 arr.some()?方法檢測數組元素中是否有任意元素符合指定條件。任意元素符合條件則返回true

let arr1=[1,3,25,6,8]; let m=arr1.some(function(ele){return ele>10; }); console.log(m); //輸出：true console.log(arr1); //原數組沒有改變

24、js檢查對象是不是數組：使用 Array.isArray(arr1) 方法 。arr1 instanceof Array==true 和 arr1..constructor === Array來判定，在多個frame中來回穿梭時存在漏洞，因為每個iframe都有一套自己的執行環境，跨frame實例化的對象彼此是不共享原型鏈的

25、js數組 fill() 方法：使用 arr.fill()?方法是使用固定值來填充數組指定位置元素。類似于全體替換，瀏覽器ie12+支持

let arr1=['hello','every','body','Tom','Jane']; arr1.fill('fun',1,3); //arry.fill(value,start,end)的三個參數分別表示填充的值、填充起始的位置、填充結束的位置 console.log(arr1); //輸出：["hello", "fun", "fun", "Tom", "Jane"]

25、js數組 includes() 方法判斷一個數組是否包含指定的元素；js數組 find(function(){}) 方法返回符合傳入測試（函數）條件的數組元素中的第一個元素。但是瀏覽器支持都要求較高，這里不細說

總結

以上是生活随笔為你收集整理的js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：什么不是预防计算机病毒的方法,预防计算机
下一篇： wxWidgets随笔(10)-wxAp