常見的、不常見的數組操作方法彙總

(1)concat:將多個數組合併成一個數組

<script>		
    //concat數組合並
    let arrOne = ['夢','爲','努',';力'];
    let arrTwo = ['澆','了','水'];
    let arrThree = ['L','J','J'];
    let arrAll = arrOne.concat(arrTwo,arrThree);
    console.log(arrAll);    // ["夢", "爲", "努", ";力", "澆", "了", "水", "L", "J", "J"]
</script>

(2)every:every會遍歷數組內的所有元素,直到返回false

<script>
    //every
    let isShow = (x) =>{
        console.log(x);                     //輸出:1
        return x % 2 == 0 ? true : false;
    }
    let number = [1,2,3,4,5,6,7,8,9,10];
    console.log(number.every(isShow));     //輸出:false
</script>

(3)some:和every相似,some同樣會遍歷數組內的所有元素,不同的是,直到返回true終止

<script>
    //some
    let isShow = (x) =>{
        console.log(x);                    //輸出:1,2
        return x % 2 == 0 ? true : false;
    }
    let number = [1,2,3,4,5,6,7,8,9,10];
    console.log(number.some(isShow));      //輸出:true
</script>

(4)forEach:如果要遍歷整個數組,可以使用forEach,它和for循環的結果相同(這裏使用了ES6的箭頭函數)

<script>
    //forEach
    let number = [1,2,3,4,5,6,7,8,9,10];
    number.forEach((x)=>{
        console.log((x % 2 == 0));    //輸出:false,true,false,true,false,true,false,true,false,true
    })
</script>

(5)reduce:reduce方法接收一個函數作爲參數,這個函數有四個參數(previousValue、currentValue、index、array),這個函數會返回一個將被疊加到疊加器的值,reduce方法停止執行後會返回這個累加器。如果要對一個數組進行求和,reduce比較好用

<script>
    //reduce
    let number = [1,2,3,4,5,6,7,8,9,10];
    number.reduce((previous,current,index)=>{
        console.log(previous + current)    //輸出:3,6,10,15,21,28,36,45,55
        return previous + current;
    })
</script>

(6)find:遍歷出數組內符合條件的元素,Array.find(當前的值、當前的位置和原數組)同時,也可以接受函數作爲參數

<script>
    //find
    let person = {name:"前小端",age:18};
    let array = [10,2,77,23];
    function F(ind){
        if(ind<this.age){
            console.log(ind);	//輸出10,2
        }
    }
    array.find(F,person);
</script>

(7)map:ES6中定義的一個遍歷API,它有幾個特點需要說明一下

  1. 三個參數分別是:某項元素的鍵值,元素的索引,數組本身;
  2. 不能使用break,return,continue跳出循環;
  3. 返回一個新數組;
  4. 可以記錄索引;
<script>
    //map
    let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    let isShow = function(x){
        console.log(x)
    };
    let myMap = numbers.map(isShow)	//輸出:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15
    //console.log(myMap)    //請問:這裏輸出應該是什麼?請萬能的小夥伴幫忙解決一下,並且希望能解釋一下爲什麼會出現這樣的結果!知道的小夥伴請於下方評論區留言。
</script>

友情提示:請注意上放的提問環節哦-。——

(8)filter:同map一樣;

(9)使用for...of循環迭代(個人更喜歡使用循環遍歷),同樣是ES6的方法

<script>
    //for...of
    let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    for(let i of numbers){
        console.log((i % 2 == 0) ? '偶數' : '奇數')    //輸出:奇數,偶數,奇數,偶數,奇數,偶數,奇數,偶數,奇數,偶數,奇數,偶數,奇數,偶數,奇數
    }
</script>

並且for...in與之相同,這裏就不再舉例;

(10)iterator:是ES6爲數組類添加的一個屬性,需要通過Symbol.iterator來訪問

<script>
    //iterator
    let numbers = [1,2,3,4];
    let iterator = numbers[Symbol.iterator]();
    console.log(iterator.next());    //輸出:{ value: 1, done: false }
    console.log(iterator.next());    //輸出:{ value: 2, done: false }
    console.log(iterator.next());    //輸出:{ value: 3, done: false }
    console.log(iterator.next());    //輸出:{ value: 4, done: false }
    console.log(iterator.next());    //輸出undefined
</script>

該操作可以理解爲使得數組具有了線性屬性,各個元素以排隊的方式出現,當超出元素索引時,線性結束,以undefined的形式結尾。這裏推薦參考一篇關於Symbol.iterator的詳解博客,地址   =>點擊這裏<=   。

(11)數組的entrise()keys()values()方法:

<script>
    //entries
    let numbers = [1,2,3,4];
    let aEntrise = numbers.entries();
    console.log(aEntrise.next())    //輸出:{value:[0,1],done:false}
    console.log(aEntrise.next())    //輸出:{value:[1,2],done:false}
    console.log(aEntrise.next())    //輸出:{value:[2,3],done:false}
    console.log(aEntrise.next())    //輸出:{value:[3,4],done:false}
    console.log(aEntrise.next())    //輸出:{value:undefined,done:false}
</script>

此方法包含鍵值對的形式,可以將數組每個索引下所對應的value渲染出來;

<script>
    //keys
    let numbers = [1,2,3,4];
    let aEntrise = numbers.keys();
    console.log(aEntrise.next())    //輸出:{value:0,done:false}
    console.log(aEntrise.next())    //輸出:{value:1,done:false}
    console.log(aEntrise.next())    //輸出:{value:2,done:false}
    console.log(aEntrise.next())    //輸出:{value:3,done:false}
    console.log(aEntrise.next())    //輸出:{value:undefined,done:false}
</script>

如果理解了entrise,那麼keys方法就更容易理解了,keys用來獲取到數組內每個元素的索引值;

values()就不再舉例說明了。

算了,還是用values()附上一個懶省勁的小栗子:

<script>
    //values
    let numbers = [1,2,3,4];
    let aEntrise = numbers.values();
    for(let i=0;i<numbers.length;i++){
        console.log(aEntrise.next())
    }
    //輸出:{value: 1, done: false},{value: 2, done: false},{value: 3, done: false},{value: 4, done: false}
</script>

(12)form:Array.form(數組,過濾條件)方法根據已有的數組創建一個新數組,比如要複製numbers數組,可以

<script>
    //form
    let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    let newNumbers = Array.from(numbers);
    console.log(newNumbers);    //輸出:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    let events = Array.from(numbers,x=>(x % 2 == 0 ? '偶數' : '奇數'));
    console.log(events);    //輸出:["奇數", "偶數", "奇數", "偶數", "奇數", "偶數", "奇數", "偶數", "奇數", "偶數", "奇數", "偶數", "奇數", "偶數", "奇數"] 
</script>

(13)of:根據傳入的參數組建一個新的數組

<script>
    //of
    let number = Array.of(1,2,3,4,5,6);
    console.log(number);    //輸出:[1, 2, 3, 4, 5, 6]
</script>

(14)fill:使用靜態值填充數組

<script>
    //fill
    let number = Array.of(1,2,3,4,5,6);
    console.log(number.fill(0));    //輸出:[0, 0, 0, 0, 0, 0]
</script>

並且可以從指定位置填充fill(x,y),x是要填充的內容,y是要開始填充的位置索引:

console.log(number.fill(22,2));    //輸出:[0, 0, 22, 22, 22, 22]

還可以指定結束填充的索引:

number.fill(0);
console.log(number.fill(1,3,5));    //輸出:[0, 0, 0, 1, 1, 0]

(15)copyWithin:將數組內的一系列元素複製給此數組下指定的位置,話不多說,上栗子

<script>
    //copyWithin
    let copyArray = [1,2,3,4,5,6];
    console.log(copyArray.copyWithin(0,3));    //輸出:[4, 5, 6, 4, 5, 6]
</script>

這裏說明一下:array.copyWithin(x,y),x代表被替換掉的起點索引位置,y代表用來複制的索引(直至此數組最後一個元素),並且,請牢記x<y,<y,y。

(16)還有reverse(),sort(),indexOf(),lastIndexOf(),

<script>
    let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,10];
    console.log(numbers.reverse());    //輸出:[10, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
    console.log(numbers.sort());    //輸出:[1, 10, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(numbers.lastIndexOf(10));    //輸出:2
    console.log(numbers.indexOf(10));    //輸出:1
    console.log(numbers.indexOf(100));    //輸出:-1
</script>

numbers.indexOf(100)的輸出結果爲-1是因爲numbers中沒有找到100這個元素。

以上就是一些對數組操作的API,後續可能還會有ES7、ES8的數組操作API,會不定時更新。

巴拉巴拉:

==主頁傳送門==

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章