1. 程式人生 > >js遍歷物件、遍歷陣列、js陣列方法大全、區分map()和forEach()以及filter()、區分for...in...和for...of...

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)合併多個物件

let obj01={'a':1,'b':2};
let obj02={'c':3,'d':4,'e':5};
$.extend(obj01,obj02);
console.log(obj01); //輸出:{a: 1, b: 2, c: 3, d: 4, e: 5} ,被合併到第一個引數obj01物件中
console.log(obj02); //輸出:{c: 3, d: 4, e: 5} ,未改變obj02

let obj03=$.extend({},obj01,obj02);  //不會改變obj1,obj2
console.log(obj03);   //輸出:{a: 1, b: 2, c: 3, d: 4, e: 5}

4、物件合併:使用 Object.assign(o1,o2) 方法

let o1={a:'a',b:'b'};
let o2={c:'c',d:'d'};
let o3=Object.assign(o1,o2);
console.log(o3);  //輸出:{a: "a", b: "b", c: "c", d: "d"}
console.log(o1);  //輸出:{a: "a", b: "b", c: "c", d: "d"} ,合併後第一個物件也會改變
console.log(o2);  //輸出:{c: "c", d: "d"},合併後未改變

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);
console.log(arr1); //輸出:[0,2,4,6,8]
console.log(b); //輸出:[4,6]  //包括起始下標對應的元素,不包括結束下標對應的元素

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); //第二個引數是可選引數,表示查詢起點位置的索引
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例項化的物件彼此是不共享原型鏈的

let arr01 = [2,4,6,8];
console.log(Array.isArray(arr01)); //輸出:true ,該方法支援ie9+

//最佳寫法如下:
let arr = [1,2,3,1];
let arr2 = [{ abac : 1, abc : 2 }];
function isArrayFn(value){
    if (typeof Array.isArray === "function") {
        return Array.isArray(value);
    }else{
        return Object.prototype.toString.call(value) === "[object Array]";
    }
}
alert(isArrayFn(arr));// true
alert(isArrayFn(arr2));// true

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(){}) 方法返回符合傳入測試(函式)條件的陣列元素中的第一個元素。但是瀏覽器支援都要求較高,這裡不細說