javaScript數組之經常使用方法

時間 2019-12-07

原文原文鏈接

今天繼續接着上一篇的數組循環，來繼續分享數組的經常使用方法，上章分享過的本章節裏就不在重複了。下面請看代碼：javascript

push(), unshift()
pop(), shift()
join(), concat(), reverse()
slice()
splice()
sort()
toString()
Array.from(), Array.of(), isArray()
find(), findIndex()
indexOf(), includes()
reduce()

push()和unshift()css

push:向數組的末尾添加一個或更多元素，並返回新的長度；unshfit:向數組的開頭添加一個或更多元素，並返回新的長度，這兩個方法的使用也很簡單，就是把你須要添加進去的數據做爲參數放在括號裏就OK了，下面看例子： `html

var arr = [{num:10, color: 'red'}, {num:20, color: 'yellow'}, {num:30, color: 'blue'}];
var objOne = {num:40, color: 'green'}, objTwo = {num:50, color: 'golden'}
var len = arr.push(objOne, objTwo);
console.log(arr, len);
// 輸出: [{num:10, color: 'red'}, {num:20, color: 'yellow'}, {num:30, color: 'blue'},
// {num:40, color: 'green'}, {num:50, color: 'golden'}], // 輸出：5
複製代碼

`java

這個例子裏呢，我給數組push了兩個對象，這裏就有一個咱們使用這個方法惟一須要注意的問題，新添加進去的數據的順序問題，push方法裏的第一個參數是緊跟在arr原數組的最後一個位置，後面的又緊跟在剛添加進去的那個數據後面，而若是是unshift呢,它的順序則是這樣 [{num:40, color:'green'}, {num:50, color: 'golden'},{num:10, color: 'red'}, {num:20, color: 'yellow'}, {num:30, color: 'blue'},第一個數據在最前面，第二個跟在前一個數據的後面，而後纔是原數組arr排序。而咱們這個例子裏的len呢，是添加數據進去後，返回的這個arr數組最新的長度值。jquery

pop()和shift()es6

pop:刪除數組的最後一個元素,並返回被刪除的元素；shift:刪除數組的第一個元素，並返回被刪除的元素。這兩個方法的使用也是超級簡單，下面看例子： `web

var arr = [{num:10, color: 'red'}, {num:20, color: 'yellow'}, {num:30, color: 'blue'}];
var del = arr.pop();
    console.log(arr, del);
    // 輸出：[{num:10, color: 'red'}, {num:20, color: 'yellow'}]
    // 輸出：{num:30, color: 'blue'}  //這個是被刪除的元素
複製代碼

`而這兩個方法的使用須要注意的是兩點，一：它們不接收參數，大家能夠試着給它們倆傳遞個參數進去，無論啥類型，這倆方法它也不會報錯，照常執行；二：它們會改變原數組；數組

join(), concat(), reverse()數據結構

join: 用指定的分隔符號，把數組轉換成字符串，concat:鏈接兩個或更多的數組,並返回鏈接的結果，reverse:顛倒數組裏的先後順序； `dom

var arr = [10, 20, 30], ary = [40, 50, 60]
var arrStr = arr.join('-');
console.log(arr, arrStr)
// 輸出："10-20-30"， [10, 20, 30]

var arry = arr.concat(ary);
console.log(arry, arr)
// 輸出: [10, 20, 30, 40, 50, 60],  // 原數組不會改變 [10, 20, 30]

var newArr = arr.reverse();
console.log(arr, newArr);
// 輸出：[30, 20, 10], [30, 20, 10]
newArr[0] = 'ABC'
console.log(arr, newArr);
// 輸出：['ABC', 20, 10], ['ABC', 20, 10]
複製代碼

` 上面的代碼我對三個方法都作了演示，經過代碼示例，如今咱們來總結使用的經驗：

一：join是用指定的分隔符號，把數組轉換成字符串，並返回出這個字符串，可是不會影響原數組；
二：concat是鏈接兩個或更多的數組,並返回鏈接的結果，鏈接的結果是個新數組，一樣不會影響原數組；
三：reverse顛倒數組的裏先後順序，能夠接收一個返回結果，可是這個返回結果就是被顛倒順序後的原數組。

slice()

slice,截取數組裏的片斷，並把截取的片斷做爲新數組返回；slice接收兩個參數，第一個參數是截取的開始位置，第二個是截取的結束位置，都不是必填參數。 `

var arr = [10, 20, 30, 40, 50]; 
var newArr1 = arr.slice(0, 3);
console.log(newArr1, arr);
// 輸出： [10, 20, 30], [10, 20, 30, 40, 50]

var newArr2 = arr.slice(0, 100);  
console.log(newArr2, arr);
// 輸出： [10, 20, 30, 40, 50], [10, 20, 30, 40, 50]

var newArr3 = arr.slice(-1, 3); 
console.log(newArr3, arr);
// 輸出： [], [10, 20, 30, 40, 50]

var newArr4 = arr.slice(3);
console.log(newArr4, arr);
// 輸出： [30, 40, 50], [10, 20, 30, 40, 50]

var newArr5 = arr.slice();
console.log(newArr5, arr);
// 輸出： [10, 20, 30, 40, 50], [10, 20, 30, 40, 50]
複製代碼

` 這個例子裏演示了五種截取狀態，在這裏咱們惟一須要注意的是兩點，一：若是咱們slice()裏一個參數都不填，那等於就是複製原數組了；二：slice操做是不會影響原數組的。

splice()

splice,對數組執行刪除元素或者添加元素的操做，接收三個參數，第一個是對數組操做的起始位置(包含起始位置)，第二個是你要對數組刪除的操做，(1表示刪除一個，0表示不刪除)，第三個是你要新增的元素。正由於splice有這幾個特性，你對數組的操做即可以實現多樣化，刪，增或者替換： `

var arr = [10, 20, 30, 40, 50]
var delArr = arr.splice(0, 1);  // 刪除演示
console.log(delArr1, arr);
// 輸出：[10], [20, 30, 40, 50]

arr.splice(0, 0, 5); // 新增演示
console.log(arr);   
// 輸出：[5, 20, 30, 40, 50]

arr.splice(0, 1, 10);    // 替換演示
console.log(arr);
// 輸出：[10, 20, 30, 40, 50]
複製代碼

` 這裏須要特別說明的就是，splice的操做是會影響原數組的，splice刪除的元素也能夠返回出來，是以一個新數組接收的，可是基本上咱們在工做當中，不會對它刪除的這個元素作什麼處理，因此基本沒有什麼用。

sort()

sort，對數組元素進行排序，sort接收一個參數，該參數是個回調函數，咱們通常稱之爲比較函數,比較函數裏接收兩個參數,稱之爲比較值。 `

var arr = [40, 20, 50, 100, 30], ary = ['c', 'a', 'e', 'b', 'd'];
arr.sort(); ary.sort();// 不傳入比較函數
console.log(arr, ary);
// 輸出 [100, 20, 30, 40, 50], ['a', 'b', 'c', 'd', 'e']
複製代碼

` 在不傳入比較函數的狀況下，數字的排序實際上是根據數字的123456789進行一個升序的排序，數字這樣的排序是不許確的，由於若是一大大於個位數，就會出現咱們上面例子的狀況。字母則是英文26個字母的排列順序；

var arr = [40, 20, 50, 100, 30], ary = ['c', 'a', 'e', 'b', 'd'];
arr.sort(function(a, b){
    return a - b; // 傳入比較函數
}); 
ary.sort(function(a, b){
    return a - b; // 傳入比較函數
}); 
console.log(arr, ary);
// 輸出 [20, 30, 40, 50, 100], ['a', 'b', 'c', 'd', 'e']
複製代碼

` 傳入比較函數，sort方法會去循環這個數組，每次去取數組當前位和下一位根據規則進行比較；字符串則根據Unicode碼的大小來比較。而對於中文漢字，sort也是能夠實現排序的，傳入比較函數它的排序規則是根據漢字的拼音字母順序排序，不傳則是Unicode碼的大小來排序。

arrStr = ['我', '和', '你', '心', '相', '應']
arrStr.sort();  // 不傳入比較函數
console.log(arrStr);
// 輸出 ["你", "和", "應", "心", "我", "相"]
arrStr.sort(function(s1, s2){
    return s1.localeCompare(s2); // 傳入比較函數
}); 
console.log(arrStr);
// 輸出 ["和", "你", "我", "相", "心", "應"]
複製代碼

` 在漢字排序的時候，咱們會使用一個字符串的方法localeCompare，該方法你們能夠先去w3c上面去了解下。

toString() toString,方法可把數組轉換爲字符串，並返回這個字符串結果，注意，返回的字符串以英文逗號分隔,而且並不影響原數組。 `

var arr = [10, 20, 30, 40, 50];
var arrStr = arr.toString();
console.log(arr, arrStr);
// 輸出： [10, 20, 30, 40, 50], "10,20,30,40,50"
複製代碼

Array.from(), Array.of(), isArray()

Array.from,Array.of,Array.isArray這三個方法都是es6裏新增的方法，這三個方法使用的第一條注意事項就是，它們不是生成的實例對象的方法，而是構造函數Array這個類的方法。好啦，下面一一介紹：Array.from：方法用於將兩類對象轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象: `

<div class="div1">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
    </div>
    <script>
        let pList = document.querySelector('.div1').querySelectorAll('p');
        Array.from(pList).map((item, index) => {    //dom列表轉數組
            item.style.color = 'red';
        )
        
        testArguments () {  // 把arguments轉數組
           let argsArr = Array.from(arguments);
        }
    </script>
複製代碼

` 只要是部署了 Iterator 接口的數據結構，Array.from都能將其轉爲數組,例如字符串也具有Iterator接口，因此也能夠轉數組：

let str = 'javascript';
let strArr = Array.from(str);
console.log(strArr)
// 輸出 ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']

let testSet = new Set(['a', 'b', 'c'])  // set數據類型轉數組
console.log(Array.from(testSet))
// 輸出 ['a', 'b', 'c']
複製代碼

` Array.from方法支持相似數組的對象。所謂相似數組的對象，本質特徵只有一點，即必須有length屬性。所以，任何有length屬性的對象，均可以經過Array.from方法轉爲數組。Array.from還能夠接受第二個參數，做用相似於數組的map方法，用來對每一個元素進行處理，將處理後的值放入返回的數組。

let str = 'javascript';
let strArr = Array.from(str, (item) => {return item.toLocaleUpperCase()});
console.log(strArr)
// 輸出 ["J", "A", "V", "A", "S", "C", "R", "I", "P", "T"]
複製代碼

` Array.of方法用於將一組值，轉換爲數組，這個方法的主要目的，是彌補數組構造函數Array()的不足。由於參數個數的不一樣，會致使Array()的行爲有差別。

Array.of(1, 2, 3) // [1, 2, 3]
Array.of(3) // [3]
Array.of(3).length // 1

Array() // []
Array(3) // [, , ,] // 由於參數爲一個數，Array則把它定義成數組長度了
Array(1, 2, 3) // [1, 2, 3]
複製代碼

` Array.of基本上能夠用來替代Array()或new Array()，而且不存在因爲參數不一樣而致使的重載。它的行爲很是統一。Array.of老是返回參數值組成的數組。若是沒有參數，就返回一個空數組。

Array.isArray,是用來檢測對象是不是一個真正的數組，返回一個布爾值，true或者false。

var ar = [];
var result = Array.isArray(ar);
// 輸出: true

var ar = new Array();
var result = Array.isArray(ar);
// 輸出: true

var ar = [1, 2, 3];
var result = Array.isArray(ar);
// 輸出: true

var result = Array.isArray("an array");
document.write(result);
// 輸出: false
複製代碼

find()和findIndex()

find用於找出第一個符合條件的數組成員。它的參數是一個回調函數，全部數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，而後返回該成員。若是沒有符合條件的成員，則返回undefined： `

let arr = [{num:10, color: 'red'}, {num:20, color: 'yellow'}, {num:30, color: 'blue'}];
let val = arr.find(function (item) {
            console.log(arguments)  //接收三個參數，item當前項，索引值，原數組
            if (item.num == 20) {
                return item
        }
    })
    console.log(val)    // 輸出 {num:20, color: 'yellow'}
複製代碼

` findIndex方法的用法與find方法很是相似，返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。

let arr = [{num:10, color: 'red'}, {num:20, color: 'yellow'}, {num:30, color: 'blue'}];
let idx = arr.findIndex(function (item) {
        console.log(arguments)  //接收三個參數，item當前項，索引值，原數組
        return item.num == 20
    })
    console.log(idx)    // 輸出 1
複製代碼

indexOf()和includes()

indexOf 方法在數組中搜索指定的值。該方法返回第一個匹配項的索引；若是找不到指定的值，則爲 -1；該方法接收兩個參數，參數一是須要查找的對象，參數二是從數組哪裏開始查找，也就是數組的索引值： `

let webBasic = ['html', 'css', 'javascript', 'es6', 'jquery'];
webBasic.indexOf('javascript') //輸出 2， 默認從數組索引0開始搜索
webBasic.indexOf('javascript',1) //輸出 2， 從數組索引1開始搜索
webBasic.indexOf('javascript',3) //輸出 -1， 從數組索引3開始搜索
複製代碼

` includes方法返回一個布爾值，表示某個數組是否包含給定的值，若是存在給定值，則返回true,不存在false,該方法一樣接收兩個參數，參數一是須要查找的對象，參數二是從數組哪裏開始查找：

let webBasic = ['html', 'css', 'javascript', 'es6', 'jquery'];
webBasic.includes('javascript') //輸出 true， 默認從數組索引0開始搜索
webBasic.includes('javascript',1) //輸出 true， 從數組索引1開始搜索
webBasic.includes('javascript',3) //輸出 false， 從數組索引3開始搜索
複製代碼

` 你們是否是以爲這兩個方法功能很是相同，功能幾乎同樣，這裏先說明下，indexOf是es5就有的方法了，includes是es6的方法，也就是說這兩個方法不是同一個版本推出來的方法。indexOf在使用的過程當中，其實存在必定的不足，一是不夠語義化，它的含義是找到參數值的第一個出現位置，因此要去比較是否不等於-1，表達起來不夠直觀。二是，它內部使用嚴格相等運算符（===）進行判斷，這會致使對NaN的誤判，而includes則不存在這樣的問題：

[NaN].indexOf(NaN)  // 輸出-1
[NaN].includes(NaN) // 輸出true
複製代碼

` 這裏在給你們補充一點對於這兩個方法使用的注意事項和小技巧，這兩個方法在使用的過程當中，對一維數組的使用效果很是的好，可是對於二維數組或者其餘多維就不怎麼靠譜了。在我上一篇的數組循環的分享時，有提到過一嘴，這兩個方法的使用通常都會結合map這類循環方法，爲啥這麼說呢，由於在咱們平常工做當中，咱們所處理的數組幾乎都是多維數組，下面請看例子：

let arr = [{num:10, color: 'red'}, {num:20, color: 'yellow'}, {num:30, color: 'blue'}];
arr.indexOf({num:20, color: 'yellow'})     // 輸出-1
arr.includes({num:20, color: 'yellow'})    //  輸出 false

let ary = arr.map((item) => {
    return item.num
})
ary.indexOf(20) // 輸出 1
ary.includes(20)    // 輸出 true
複製代碼

` 上面的例子咱們能夠看到，咱們去查詢一個對象的時候，它們的輸出就都錯了，而咱們之因此結合map方法來使用，其目的就是要把咱們須要查詢的數組轉換爲一個一維數組。

reduce()

reduce方法對數組中的全部元素調用指定的回調函數。該回調函數的返回值爲累積結果，而且此返回值在下一次調用該回調函數時做爲參數提供。其實說的簡單一點，這個方法就是對數組裏的值作累積計算的，固然通常都是用來對數字作累積計算，下面看例子： `

let numArr = [10, 20, 30, 40, 50]
let total = numArr.reduce((result, num)=>{
    console.log(arguments)  //arguments輸出看下面的圖片
    return result + num
})
console.log(total)  // 輸出 150
複製代碼

; 經過上面的例子和圖片，咱們能夠看到，reduce對數組裏累加的一個結果，它傳遞了一個回調函數參數，它的回調函數默認四個參數，該回調函數會循環遍歷這個數組， 參數一是默認累加的結果值，參數二是循環這個數組的第一輪累加的當前項，默認數組0位開始；參數三是數組索引，參數四是原數組。reduce方法還能夠傳入第二個參數，這個參數就是累加的初始值：

let numArr = [10, 20, 30, 40, 50]
let total = numArr.reduce((result, num)=>{
    console.log(arguments)  //arguments輸出看下面的圖片
    return result + num
}, 50)
console.log(total)  // 輸出 200
複製代碼

` 你們在使用這個方法的時候，在多維數組的使用時，請必定看清楚上面對回調函數參數的說明，避免出錯。這裏也示例一下：

let arr = [{num:10, color: 'red'}, {num:20, color: 'yellow'}, {num:30, color: 'blue'}];
arr.reduce((result,item) =>{ return result + item.num })    // 輸出60
複製代碼