Javascritp Array數組方法總結

合併數組 - concat()

用法一 （合併兩個數組）

var hege = ["Cecilie", "Lone"];

var stale = ["Emil", "Tobias", "Linus"];

var children = hege.concat(stale);

console.log(children );      // ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]

用法二 （合併多個數組）

var parents = ["Jani", "Tove"];

var brothers = ["Stale", "Kai Jim", "Borge"];

var children = ["Cecilie", "Lone"];

var family = parents.concat(brothers, children);

console.log(family);          // ["Jani", "Tove", "Stale", "Kai Jim", "Borge", "Cecilie", "Lone"]

數組轉字符串 - join()、toString()

兩種方法都返回新的字符串

join() 方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.join();

console.log(a);                // "Banana,Orange,Apple,Mango"

toString() 方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.toString();

console.log(a);                // "Banana,Orange,Apple,Mango"

相同點：

均可以將數組轉字符串。

區別：

join還有另外的用法：join() 可接受一個參數做爲元素之間的鏈接符號

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.join("-");

console.log(a);            //  "Banana-Orange-Apple-Mango"

刪除數組最後一個元素 - pop()

pop 返回元素的最後一個元素，原數組最後一個刪除。

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.pop();

console.log(a);                //  "Mango"

console.log(fruits );          //  ["Banana", "Orange", "Apple"]

添加元素 - push()

push 返回的是數組的長度，原數組最後面添加一個新元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.push("Kiwi");

console.log(a);                // 5

console.log(fruits);          //   ["Banana", "Orange", "Apple", "Mango", "Kiwi"]

數組反轉 - reverse()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.reverse();

console.log(fruits);        // ["Mango", "Apple", "Orange", "Banana"]

刪除數組第一個元素 - shift()

shift 返回數組的第一個元素，原數組第一個元素被刪除

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a= fruits.shift();

console.log(a);              //  "Banana"

consoel.log(fruits);        //   ["Orange", "Apple", "Mango"]

截取數組元素 - slice(start,end)

slice 返回截取的元素組成的數組，原數組不會發生變化。

slice接受兩個參數，起始位置和結束位置，第一個參數起始位置若是爲負數，表示從數組尾部開始算，如 -1 表明最後一個。若是不傳入結束位置，表示從起始位置起到數組結尾的全部元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var a= fruits.slice(1,3);

console.log(a);                //  ["Orange", "Lemon"]

console.log(fruits);          //   ["Banana", "Orange", "Lemon", "Apple", "Mango"]

數組排序 - sort(func)

sort 方法用於對數組的元素進行排序。

sort 可接受一個參數 func，非必傳，若是要傳入必須是函數，在不傳參的狀況下，sort 表示按字符串編碼的順序進行排序，若是要對數組進行排序需傳入函數。

不傳參：

var  arr= ["George", "John", "Thomas", "James", "Adrew", "Martin"];

arr.sort();

console.log(fruits);          //  ["Adrew", "George", "James", "John", "Martin", "Thomas"]

// 沒有傳入函數，因此結果是按照0123456789的順序進行排列

var nums = [21,14,26,11,105];

nums.sort();

console.log(nums);            //  [105, 11, 14, 21, 26]

傳參：

function sortNumber(a, b){

        return a - b

}

var nums = [21,14,26,11,105];

nums.sort(sortNumber);

console.log(nums);            // [11, 14, 21, 26, 105]

在指定位置添加/刪除/替換元素 - splice( start, count , .....)

splice 接受多個參數，第一個是起始位置，第二個爲刪除個數，以後的參數爲添加/刪除/替換的元素。

splice 返回刪除元素的數組

用法一 （添加元素）

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2,0,"Lemon","Kiwi");

console.log(fruits );            //  ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

用法二 （替換元素）

// 從第二個位置起刪除兩個元素，接受新的兩個元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.splice(2,2,"Lemon","Kiwi");

console.log(a);                  // ["Apple", "Mango"]

console.log(fruits);            //  ["Banana", "Orange", "Lemon", "Kiwi"]

用法三 （刪除元素）

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.splice(2,2);

console.log(a);                  // ["Apple", "Mango"]

console.log(fruits);            //  ["Banana", "Orange"]

在數組開頭添加元素 - unshift()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.unshift("Lemon","Pineapple");

console.log(fruits);            // ["Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]

檢查某元素是否存在於數組中 - indexOf()、lastIndexOf()

indexOf 和 lastIndexOf 都接受兩個參數，第一是須要檢查的元素。第二個是從那個索引位置開始檢查

indexOf 表示從 0 開始，lastIndexOf 表示最後一個元素開始

var  arr = [1,23,4,5,6,7,89];

arr.indexOf(89)                //    6

arr.indexOf(89,2)              //    6

arr.lastIndexOf(89)            //    6

arr.lastIndexOf(89,5)          //    -1

數組遍歷 - map()、forEach()

相同點：

• 都是數組的遍歷方法，能夠遍歷數組中的每個元素

• forEach和map方法裏每次執行匿名函數都支持3個參數，參數分別是item（當前每一項），index（索引值），arr（原數組）

• 都不會改變原數組

• 匿名函數的 this 都指向 windows

不一樣點：

• map 方法會返回一個新的數組，數組中的元素爲處理後的值，forEach 方法不會返回新的數組

• map 方法不會對空數組進行檢測，forEach對於空數組是不會調用回調函數的。

• mao 方法不支持低端瀏覽器

var arr = [1,2,3,4];

var a = arr.map(function(item,index,arr){

    return item * item;

})

console.log(a);        //  [1, 4, 9, 16]

console.log(arr);      //   [1, 2, 3, 4]

var arr = [1,2,3,4];

var a = arr.forEach(function(item,index,arr){

    return item * item;

})

console.log(a);        //  undefined

console.log(arr);      //   [1, 2, 3, 4]

數組過濾 - filter()

filter() 方法是返回某一數組中知足條件的元素，該方法返回的是一個新的數組。

// 返回元素長度大於 10 的數組元素

var arr =  [12,5,8,16,125,98];

var filters = arr.filter(function(value){

      return value >= 10

});

console.log(filters );        //  [12, 16, 125, 98]

of 遍歷

let arr2=[1,2,234,'sdf',-2];

for(let a of arr2){

  console.log(a)          // 1,2,234,sdf,-2 遍歷了數組arr的值

}

數組累加器 - reduce()、reduceRight()

reduce() 方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。

reduce 和 reduceRight 用法同樣，區別在於 reduceRight 是從數組的末尾向前作數組項累加。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue);

total         必需。初始值, 或者計算結束後的返回值。

currentValue    必需。當前元素

currentIndex    可選。當前元素的索引

arr         可選。當前元素所屬的數組對象。

initialValue    初始值

var numbers = [65, 44, 12, 4];

var a = numbers.reduce(function(total,num){

      return total + num;

},0)

console.log(a);          // 125

判斷數組中的元素是否知足指定條件 - some()、every()

some 方法會遍歷數組的每個元素，判斷是否知足條件，返回一個布爾值。

every 方法會遍歷數組的每個元素，判斷每一項是否知足條件，若是每項都知足，才返回true。

var numbers = [65, 44, 12, 4];

var a = numbers.some(function(item){

      return item > 62;

});

console.log(a);          //  true

var numbers = [65, 44, 12, 4];

var a = numbers.every(function(item){

      return item > 62;

});

console.log(a);          //  false

將當前數組指定位置的元素複製到其餘位置並替換 - copyWithin(index,start,end)

index（必需）：從該位置開始替換數據。若是爲負值，表示倒數。

start（可選）：從該位置開始讀取數據，默認爲 0。若是爲負值，表示倒數。

end（可選）：到該位置前中止讀取數據，默認等於數組長度。使用負數可從數組結尾處規定位置。

[1, 2, 3, 4, 5].copyWithin(0,1,3)    //   [2, 3, 3, 4, 5]

JSON數組格式轉換 - Array.from()

Array.from() 轉換的 json 要求必需要有length屬性

let  people = {

    0:'zhangsan',

    '1':24,   

    length:2   

};

let trans=Array.from(people);

console.log(trans);            //  ['zhangsan',24]

將一堆元素轉換成數組 - Array.of()

let arr = Array.of(1,"23","測試","dsa"); 

console.log(arr);            //  [1, "23", "測試", "dsa"]

查找數組中知足條件的元素 - find()

let arr=[1,2,3,"cxz",-2];

var a = arr.find(function(x){

  return x<="cxz";

});

console.log(a);              // "cxz"

查找數組中知足條件的元素的下標 - findIndex()

let arr=[1,2,3,"cxz",-2];

var a = arr.findIndex(function(x){

  return x<="cxz";

});

console.log(a);              // 3

判斷數組中是否包含某元素 - includes()

includes 判斷數組中是否包含某元素，返回布爾值

let arr=[1,2,3,"cxz",-2];

var a = arr.includes("cxz");

console.log(a);              //  true

最後歡迎你們關注個人我的公衆號，互聯網碼農，專一互聯網編程技術分享，關注公衆號，回覆關鍵字，能夠領取系列編程學習視頻哦，前端、java、ios、安卓、c++、python應用盡有。