js數組方法常用方法

數組
js數組方法常用方法

數組

  • 所謂數組,就是一堆數據的集合(容器),裏面存放各種各樣的數據。
    var arr = [‘a’,‘b’,‘c’];

  • length屬性

    可以用length屬性取得數組(集合)的長度
    var arr = [‘a’,‘b’,‘c’];
    arr.length; // 3 返回3,說明數組有三個元素

  • 數組下標
    數組中每個元素都有對應的標號指向它,這個標號我們可以稱之爲下標
    下標從0開始,數組中的第1個元素下標爲0,第2個元素下標爲1,依次類推。
    var arr = [‘a’,‘b’,‘c’];
    arr[0]; // ‘a’
    arr[1]; // ‘b’
    arr[2]; // ‘c’
    當通過不存在的下標獲取值則得到一個undefined值。
    var arr = [‘a’,‘b’,‘c’];
    arr[4]; // undefined

join()

arr.join(separator)

作用:把數組中的每個元素用分隔符separator進行連接起來,返回一個字符串。如果省略了這個參數,默認使用逗號作爲分隔符

var arr = ['a','b','c'];
console.log( arr.join('-') );  // 'a-b-c'
console.log( arr.join('') );  // 'abc'
console.log( arr.join() );  // 'a,b,c'

pop()

arr.pop()

作用: 將刪除arr的最後一個元素,把數組長度減1,並且返回它刪除的元素的值。如果數組已經爲空,則pop()不改變數組,返回undefined。

var arr = ['a','b','c'];

console.log( arr.pop() ); // c
console.log( arr.pop() ); // b
console.log( arr.pop() ); // a
console.log( arr.pop() ); // undefined

push()

arr.push(value,...)

作用:向數組尾部添加一個或多個元素 ,成功返回數組的新長度

var arr = ['a','b','c'];
console.log( arr.push('d') ); // 4
console.log( arr.push('e','f') ); // 6
console.log(arr); //["a", "b", "c", "d", "e", "f"]

unshift()

arr.unshift(value,...)

作用:向數組頭部添加一個或多個元素 ,成功返回數組的新長度。

var arr = ['a','b','c'];
console.log( arr.unshift('d') ); // 4
console.log( arr.unshift('e','f') ); // 6
console.log(arr); // ["e", "f", "d", "a", "b", "c"]

shift()

arr.shift()

作用:方法shift()將把arr的第—個元素移出數組,b並返回那個元素的值,並且將餘下的所有元素前移一位,以填補數組頭部的空缺 。

var arr = ['a','b','c'];
console.log( arr.shift('d') ); // 'a'
console.log(arr); // ["b", "c"]

sort()

arr.sort(callback)

作用:對數組進行排序,指定d回調函數callback進行排序。

返回值:對數組的引用。注意,數組在原數組上進行排序,不製作副本。

var arr = [14,8,24];
arr.sort( function(a,b){ 
    return a-b; // 或return  a>b   
}) ;  
console.log(arr);  // [8, 14, 24]  升序

var arr = [14,8,24];
arr.sort(function(a,b){ 
        return b-a; //  或return b>a  
}) ;  
console.log(arr); //[24, 14, 8] 降序

slice()

arr.slice(start,[,end])

作用:截取數組長度。從下標start開始,到end(不包括該元素)下標結束,

var arr = [1,2,3,4,5];
console.log( arr.slice(2,4)); // [3,4]

若沒有寫end結束下標,則截取到數組末尾。

var arr = [1,2,3,4,5];
console.log( arr.slice(2)); // [3,4,5]

若end爲負數,則從數組尾部開始截取,即-1指最後一個元素,-2指倒數第二個元素,以此類推 。

注:不包括最後一個元素。

var arr = [1,2,3,4,5];
console.log( arr.slice(2,-1)); // [3,4]
console.log( arr.slice(2,-2)); // [3]

toString()

arr.toString()

作用: 把數組轉爲用逗號連接的字符串表示。類似arr.join()效果一樣

var arr = [1,2,3,4,5];
console.log( arr.toString() ); // '1,2,3,4,5'
console.log( arr.join() ); // '1,2,3,4,5'

splice()

arr.splice(start, deleteCount, value, ...)

參數

  • start
    開始插入和(或)刪除的數組元素的下標
  • deleteCount
    從start開始,包括start所指的元素在內要刪除的元素個數。這個參數是可選的,如果沒有指定它,splice()將刪除從start開始到原數組結尾的所有元素。
  • value
    要插人數組的零個或多個值,從start所指的下標處開始插入

返回值

如果從arr中刪除了元素,返回的是含有被刪除的元素的數組。 

例1:從下標2開始刪除後面所有的元素

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

例2:從下標2開始刪除後面的2個元素

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

例3:從下標2開始刪除後面的2個元素,同時在start指定的下標2後面加一個元素new

var arr = [1,2,3,4,5];
console.log( arr.splice(2,2,'new') ); // [3,4]
console.log(arr);// [1,2,'new',5]

reverse()

arr.reverse()

作用:顛倒數組中元素的順序,返回新的電刀後的數組元素

var arr = [1,2,3,4,5];
console.log( arr.reverse() ); // [5, 4, 3, 2, 1]

isArray()

作用:檢測一個變量是否是數組。(typeof不行,返回的是object)

function isArray(value){
    return Object.prototype.toString.call(value) == '[object Array]';
}

var arr = [1,2,3,4,5];
console.log(isArray(arr)); // true
console.log(isArray({})); // false

同理:

判斷是否是對象使用[object object]

是否是字符串 [object string]

以此類推

concat()

作用:連接多個數組,返回新的數組

var arr1 = [1,2,3,4,5];
var arr2 = [6,7,8];
console.log( arr1.concat(arr2) ); // [1, 2, 3, 4, 5, 6, 7, 8]

foreach()

作用:遍歷數組元素

var arr = ['a','b','c'];
arr.forEach(function(v,key){
    //v當前循環的元素 key當前元素的下標
    console.log(key,v)
});

結果:

0 "a"
1 "b"
2 "c"

filter()

作用:過濾數組中的某些元素,在回調函數中設置條件,不滿足的都會被過濾掉,返回一個新數組。

var age = [18,23,28,30];
var newArr = age.filter(function(v){
    //v當前循環的元素
    //返回年齡大於25的元素
    return v>25;
});

console.log(newArr);// [28, 30]

map()

作用:遍歷數組,數組裏的元素經過指定回調函數進行加工處理。 返回一個新的數組

var age = [18,23,28,30];
var newArr = age.map(function(v){
    //給每個元素加10歲
    return v+10;
});
console.log(newArr); // [28, 33, 38, 40]

reduce()

reduce方法有兩個參數,第一個參數是一個callback,用於針對數組項的操作;第二個參數則是傳入的初始值,這個初始值用於單個數組項的操作。需要注意的是,reduce方法返回值並不是數組,而是返回經過疊加處理後的結果。

reduce方法最常見的場景就是疊加

var items = [5,6,7];
var callback = function(sum,item){
    //item數組值的每個元素
    //sum每次累加的和
    return sum+item;
}

var total = items.reduce(callback,0); //把循環完後的累加結果加0
console.log(total); // 18

數組去重

方式有很多種。

  • 用es6的Set對象

    var arr = [1,2,3,3,4,5,5];
    var set = new Set(arr);
    var newArr = Array.from(set);
    console.log(newArr); // [1, 2, 3, 4, 5]

更騷氣的用法:

var newArr = [...new Set([1,2,3,3,4,5,5])]
console.log(newArr); // [1, 2, 3, 4, 5]
  • 另indexOf方法來判斷,存在返回元素下標,不存在返回-1

建立一個存放結果的數組,利用indexOf判斷是否存在於新數組中,不存在則push到新數組,最後返回新數組

var unique = function(arr) {
    var n = []; // 存放已遍歷的滿足條件的元素
    for (var i = 0; i < arr.length; i++) {
        // indexOf()判斷當前元素是否已存在
        if (n.indexOf(arr[i]) == -1) n.push(arr[i]);
    }
    return n;
}

var arr = [1,2,2,3,3,4,5];
console.log( unique(arr) ); // [1, 2, 3, 4, 5]

如果想arr.unique()這樣調用,則需要把此方法加上Array的原型對象上。

Array.prototype.unique = function() {
    var n = []; // 存放已遍歷的滿足條件的元素
    for (var i = 0; i < this.length; i++) {
        // indexOf()判斷當前元素是否已存在
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
}
var arr = [1,2,3,3,6,6];
console.log( arr.unique() );  // [1, 2, 3, 6]

數組中是否存在於某個值

可以用indexOf方法來判斷,存在返回元素下標,不存在返回-1

function inArray(value,arr){
    return arr.indexOf(value)!== -1 ? true : false;
}
var arr = [1,2,3];
console.log( inArray(2,arr) ); // true
console.log( inArray(4,arr) ); // false
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章