js與jquery常用陣列方法總結

Lance發表於2020-08-26
JSjQuery陣列

一.原生js方法

1.遍歷陣列和物件遍歷屬性 in

var a = [1, 2, 3];
for (x in a) {
    console.log(x);// 0 1 2
}

2.合併陣列 concat

var a = [1, 2, 3],
    b = [4, 5, 6],
    c;
c = b.concat(a);     //將a加在b後,返回新陣列，a和b並沒有變。引數數量不限
console.log(b);  // [4, 5, 6]
console.log(c);  // [4, 5, 6, 1, 2, 3]

3.合併陣列的值為字串 join

var a = [1, 2, 3],
    b = a.join('*'); //預設為之間加上 ,          
console.log(a);  // [1, 2, 3]    //a並沒有變
console.log(b);  // 1*2*3

4.陣列排序 sort

var a = [6, 2, 3, 'a', 'x', 20],
    b = a.sort();          //ASC表順序，先看首位，因此20排在3前面
console.log(a);  // [2, 20, 3, 6, "a", "x"]           //a變化了
console.log(b);  // [2, 20, 3, 6, "a", "x"]
a.push('k');
console.log(b);  // [2, 20, 3, 6, "a", "x", "k"]      //a和b指向同一個物件，b相當於a的別名，所以 b 也變了

5.陣列的模擬棧(FILO) 和佇列(FIFO) 方法(均改變原來陣列)

var a = [6, 2, 3, 'a', 'x', 20],
    b = a.push('ab'),    // 末尾新增元素，並返回新長度 7
    c = a.pop(),         // 刪除並返回陣列的最後一個元素  ab
    d = a.unshift('xy'), // 開頭新增元素，並返回新長度 7
    e = a.shift();       // 刪除並返回陣列的第一個元素 xy

6.陣列反序 reverse

var a = [6, 2, 3, 'a', 'x', 20],
    b = a.reverse();       // 返回a的引用
console.log(a); // [20, "x", "a", 3, 2, 6]
console.log(b); // [20, "x", "a", 3, 2, 6]

7.取陣列中需要的部分 slice

var a = [6, 2, 3, 'a', 'x', 20],
    b = a.slice(0, 2);    //下標從0取到2(不包括2)，沒有第二個引數則預設到末尾。第一個引數為負表示從末尾開始數。第一個引數小於第二個引數則為空。
console.log(a);     //[6, 2, 3, 'a', 'x', 20]
console.log(b);   // [6, 2]        //b是a一部分的副本,a本身不變

8.修改陣列 splice

var a = [1, 2, 3, 4],
    b = a.splice(0, 2, 6);
console.log(a);   // [6, 3, 4]       
console.log(b);   // [1, 2]       //b為被刪掉的陣列部分

a.splice(index, num, newItem1, newItem2…)
index為開始選擇的元素下標
num為接下來要刪除元素的個數
newItem為接下來(在刪完的地方)要新增的新元素(非必須)。

刪除指定下標(2,也就是第三個)元素,此時不設定需要新增的newItem，而num設為1

var a = [1, 2, 3, 4],
    b = a.splice(2, 1);
console.log(a);  // [1, 2, 4]
console.log(b);  // [3]

在任意位置新增任意多個元素(如在下標2後新增兩個元素’7’,’8’),此時num設為0

var a = [1, 2, 3, 4],
    b = a.splice(2, 0, 7, 8);
console.log(a); //[1, 2, 7, 8, 3, 4]
console.log(b); //沒有刪除，b返回[]

元素值刪除元素(結合jquery)

var a=[1,2,3,4];
a.splice($.inArray(2,a), 1);
console.log(a); // [1, 3, 4]

修改自身的有: splice, pop, push, shift, unshift, sort, reverse
不修改自己身的: slice, concat, join

二.Jquery常用js方法

遍歷

可以對所有的元素進行操作。如果想要滿足條件退出，用return false( 絕大部分jquery方法都可以這麼退出)。 

$.each(arr, callback(key, val));      //可以鏈式呼叫，返回arr，為本身
var a = [1, 2, 3, 4];
$.each(a, function(key, val) {     
    //以jQuery物件的方法呼叫，相容性好;
    console.log(a[key] + '下標為' + key + '值為' + val);
});

合併

var a=[1,2,3],
    b=[4,5,6];
$.merge(a,b);

過濾相同元素

$.unique(arr)//過濾Jquery物件陣列中重複的元素(內部實現為===)
var a = [ 1 , 1 , 2 , 3 , 7 , 4 , 5 , 5 , 6 , 6 ];
$.unique(a)

判斷

$.inArray(val,arr)  //val是否在arr裡面
var a = [1, 2, 3, 4];
$.inArray(2, a);     //有的話返回下標，沒有的話返回-1

js與jquery常用陣列方法總結

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章