javascript中Array經常使用方法總結

js內置對象之Array

一，會改變原數組

1.移除數組末尾最後一項.pop()

• 返回刪除的元素
• 若是你在一個空數組上調用 pop()，它返回 undefined

let word = ['a', 'b', 'c', 'd'];  
    let newArr = word.pop();  
    console.log(word);      //['a', 'b', 'c']  
    console.log(newArr);    //d  
  
    let nullArr = [];  
    console.log(nullArr.pop()); //undefined

2.在數組末尾添加一個或多個元素.push()

• 返回修改後數組長度

let word = ['a', 'b', 'c', 'd'];  
    let newArr = word.push('e','f');  
    console.log(word);      //['a', 'b', 'c', 'd', 'e', 'f']  
    console.log(newArr);    //6

3.移除數組第一項.shift()

• 返回移除的元素

let word = ['a', 'b', 'c', 'd'];  
    let newArr = word.shift();  
    console.log(word);      //['b', 'c', 'd']  
    console.log(newArr);    //a

4.在數組頭部添加一個或多個元素.unshift()

• 返回修改後數組長度

let word = ['a', 'b', 'c', 'd'];  
    let newArr = word.unshift('11','22');  
    console.log(word);      //['11', '22', 'a', 'b', 'c', 'd']  
    console.log(newArr);    //6

5.對數組元素排序.sort()

• 返回排序後的數組
• 默認排序順序是根據字符串Unicode碼點

let fruit = ['cherries', 'apples', 'bananas'];  
    console.log(fruit.sort());       // ['apples', 'bananas', 'cherries']  
      
    let scores = [1, 10, 21, 2];   
    console.log(scores.sort());  
    // [1, 10, 2, 21]  
    // 注意10在2以前,  
    // 由於在 Unicode 指針順序中"10"在"2"以前  
  
    let things = ['word', 'Word', '1 Word', '2 Words'];  
    console.log(things.sort());   
    // ['1 Word', '2 Words', 'Word', 'word']  
    // 在Unicode中, 數字在大寫字母以前,  
    // 大寫字母在小寫字母以前.  
  
    function compare(a, b) {  
        if(a < b) {  
            return -1;  
        }else if(a > b) {  
            return 1;  
        }else {  
            return 0;  
        }  
    }  
    let num = [1, 10, 21, 2];  
    console.log(num.sort(compare)); //[1, 2, 10, 21]

6.顛倒數組元素.reverse()

• 返回顛倒後的數組

let word = ["a", "b", "c", "d"];  
    let newArr = word.reverse();  
    console.log(word);      //["d", "c", "b", "a"]  
    console.log(newArr);    //["d", "c", "b", "a"]

7.刪除或插入元素.splice()

• 返回數組刪除的項
• 沒有刪除的項，返回空數組

var word = ['a', 'b', 'c', 'd'];  
    //刪除,前閉後開  
    var newArr = word.splice(0,2);  
    console.log(word);      //["c", "d"]  
    console.log(newArr);    //["a", "b"]  
  
    //插入,當前數組索引1處插入hello  
    var newArr = word.splice(1,0,'hello');  
    console.log(word);      //["c", "hello", "d"]  
    console.log(newArr);    //[]  
  
    //替換  
    var newArr = word.splice(1,1,'world');  
    console.log(word);      //["c", "world", "d"]  
    console.log(newArr);    //["hello"]

---

二，不會改變原數組

1.合併兩個或多個數組.concat()

• 返回新數組

let word = ['a', 'b', 'c', 'd'];  
    let word2 = ['hello','world'];  
    let newArr = word.concat(word2);  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr);    //["a", "b", "c", "d", "hello", "world"]

2.將數組全部元素鏈接成一個字符串.join()

• 返回鏈接後的字符串

let word = ['a', 'b', 'c', 'd'];  
    let newArr = word.join('---');  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr);    //a---b---c---d

3.截取數組元素到新數組中.slice()

• 返回新數組

let word = ['a', 'b', 'c', 'd'];  
    //原數組索引爲1開始截取後面全部元素  
    let newArr = word.slice(1);  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr);    //["b", "c", "d"]  
      
    //截取原數組索引爲1到3之間的元素，前閉後開  
    let newArr2 = word.slice(1,3);  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr2);    //["b", "c"]  
  
    //截取原數組倒數第三個元素與倒數第一個元素之間的元素，前閉後開  
    let newArr3 = word.slice(-3,-1);  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr3);    //[["b", "c"]

4.獲取查詢元素第一次出現的索引.indexOf()

• 找不到查詢元素，則返回-1

let word = ['a', 'b', 'b', 'c', 'd'];  
    let index = word.indexOf('b');      //1,第一次出現b的索引值  
    let index2 = word.indexOf('hello'); //-1  
    console.log(index);  
    console.log(index2);

5.獲取查詢元素最後一次出現的索引.lastIndexOf()

• 找不到查詢元素，則返回-1

let word = ['a', 'b', 'b', 'c', 'd'];  
    let index = word.lastIndexOf('b');      //2,最後一個b的索引值爲2  
    let index2 = word.lastIndexOf('hello'); //-1  
    console.log(index);  
    console.log(index2);

6.toString()返回由數組每一個元素的字符串形式拼接而成的以逗號分隔的字符串

let word = ['a', 'b', 'b', 'c', 'd'];  
    let str = word.toString();      //a,b,b,c,d  
    console.log(str);

7.toLocaleString()返回一個字符串表示數組中的元素，更多瞭解查看MDN

---

三，迭代方法

每一個方法接受含有三個參數的函數，三個參數爲：數組中的項，元素索引，數組自己

1.every()，數組全部元素都知足要求則返回true，不然返回false
2.some()，只要有知足要求的就返回true
3.filter()，返回過濾後的結果數組
4.map()，返回在函數中處理過的數組
5.forEach()，遍歷整個數組

var number = [1,2,3,4,5,6,7,8];  
    var res = number.every(function(item, index, array) {  
        return (item > 2);  
    })  
    console.log(res);   //false  
  
    var res = number.some(function(item, index, array) {  
        return (item > 2);  
    })  
    console.log(res);   //true  
  
    var res = number.filter(function(item, index, array) {  
        return (item > 2);  
    })  
    console.log(res);   //[3, 4, 5, 6, 7, 8]  
  
    var res = number.map(function(item, index, array) {  
        return (item * 2);  
    })  
    console.log(res);   //[2, 4, 6, 8, 10, 12, 14, 16]  
  
    var res = number.forEach(function(item, index, array) {  
        //執行某些操做 
    })

---

四，歸併方法

迭代數組全部項，構建最終返回值，每一個方法接受兩個參數：調用的函數和做爲歸併基礎的初始值。函數接受4個參數：前一個值，當前值，項索引，數組自己。函數返回的值都會做爲第一個參數自動傳給下一項，第一次迭代從數組第二項開始，當前值爲數組第二項

1.reduce()，從數組第一項開始遍歷到最後
2.reduceRight()，從數組最後一項開始遍歷到第一項

/* 
        開始執行回調函數cur爲2，prev爲1， 
        第二次執行回調函數，在以前的基礎上加1 
        函數返回的值都會做爲一個參數傳給下一項， 
        最後執行函數時就是28+8 
    */  
    var number = [1,2,3,4,5,6,7,8];  
    var res = number.reduce(function(prev, cur, index, array) {  
        return prev + cur;  
    })  
    console.log(res);   //1+2+3+4+5+6+7+8=36  
  
    var res = number.reduceRight(function(prev, cur, index, array) {  
        return prev + cur;  
    })  
    console.log(res);   //8+7+6+5+4+3+2+1=36

---

五，結束語

數組是除了函數對象以外在js中使用最多的數據類型，掌握一些數組中經常使用方法在使用js作開發時仍是會有幫助的，並且有些面試中也會問到相關問題，好比數組操做方法中哪些會改變原數組，哪些不會。更多數組方法請看MDN