js數組的簡介及常用方法

這篇文章主要介紹“js數組的簡介及常用方法”，在日常操作中，相信很多人在js數組的簡介及常用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”js數組的簡介及常用方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1.數組的概念及其方式

一組有序的數據的集合  

2.JS中數組的特點  

（1）、數組定義時無需指定數據類型；

（2）、數組定義時可以無需指定數組長度；

（3）、數組可以存儲任何類型的數據；

（4）、一般是相同的數據類型；

3.數組的創建方式：  

var arr1 = new Array（）
var arr2 = new Array（10）//size長度為10
var arr3 = new Array（1,2,3,4）//兩個及以上的數字為內容

4.數組的常用方法

使用方法方法：對象.方法( )  

（1）、push()  向數組末尾添加新的數組項，返回值新數組的長度，原數組改變；

（2）、pop()   刪除數組最后一項，沒有參數，返回值刪除項，原數組改變；

（3）、unshift()  向數組開頭位置添加，返回值是新數組的長度，原數組改變；

（4）、shift()   刪除數組第一項，沒有參數，返回值刪除項，原數組改變；

（5）、splice(n,m)   從索引n開始，刪除m個，返回值以數組的形式返回刪除項（沒有m的話，刪除到最后）；

    splice(0)  原數組清空，返回一個和原來一樣的新數組；

    splice(n,m,z)  從索引n開始，刪除m個，把z添加到刪除的位置；

（6）、reverse()//數組翻轉，該方法會改變原來的數組，而不會創建新的數組

（7）、slice(n,m) 從索引n開始，查找到索引m處，不包含m,將查找到的以新數組返回，原數組不變；

（8）、sort()//無參數默認從小到大排序，判斷方式：按位判斷
           sort(function(a,b){//從大到小排序  

（9）、concat  數組的拼接，不改變數組，返回最終連接好的新數組；

（10）、  join('-')  將數組轉化為為字符串，以括號內的拼接  ；

<script>
     var arr =new Array(1,2,3,4,5,6,7,8,9);
      //push()返回數組中元素的個數，向數組尾部中增加元素，有多少加多少，原數組發生改變。
       var length=arr.push(10)
       console.log(arr)//[1,2,3,4,5,6,7,8,9,10]
       console.log(length)//10
  
       //pop()從數組的尾部刪除一個元素，返回這個刪除的元素，不接收參數
       arr.pop()//[1,2,3,4,5,6,7,8,9]console.log(arr)
    //返回數組中元素的個數向數組的頭部增加元素
//括號中有多少就加多少，原數組發生改變arr.unshift(0)
    //從數組的頭部刪除一個元素，返回這個刪除的元素，不接收參數
arr.shift()//從下標為4的開始截取，直至數組結束arr.slice(4)//從下標0開始截取，到下標2結束，不包含下標2的數，此方法原數組不變arr.slice(0,2)//一個參數，從下標4對應的位置開始，直到數組結束arr.splice(4)
        //兩個參數從下標為0開始，第二個參數截取長度arr.splice(0,1)//三個及三個以上的參數，從截取的起始位置開始添加第三個及以后的所有參數        //此方法原數組改變arr.aplice(1,2,1,1,1)
        arr.reverse()//數組翻轉，該方法會改變原來的數組，而不會創建新的數組
        arr.sort()//無參數默認從小到大排序，判斷方式：按位判斷
        arr.sort(function(a,b){//從大到小排序
                 return b-a;
           })
          var arr1=[11,12]
          ////將arr1,arr,33,44拼接為一個新的數組，用arr3接收  var arr3=arr1.concat(arr,33,44)
          arr.join('-')//將數組轉化為為字符串，以括號內的拼接
 </script>

5.數組的遍歷

（1）、for  ：不能遍歷對象；  

//使用變量緩存臨時數組
for(i=0;i<arr.length;i++){     
       //執行代碼塊
       console.log(i)
}

（2）、for   each：遍歷數組中的每一項，沒有返回值，對原數組沒有影響

arr.forEach((item,index,array)=>{
    //執行代碼
item+=1;
})

（3）、for.....in：沒有循環條件，自動取出下標‘’下標默認從0開始，最大下標為數組長度-1，下標的類型為string。

（4）、 map循環

//map的回調函數中支持return返回值
//arr.map(function(value,index,array){
　　//執行代碼
　//　return xxx
//})

（5）、 forof遍歷

//可以正確響應break、continue和return
for (var value of myArray) {
console.log(value);
}

（6）filter遍歷：過濾 按照某個條件過濾，返回過濾后的數組；

//不會改變原始數組，返回新數組
var arr = [
  { id: 1, text: 'aa', done: true },
  { id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))
//ES5
arr.filter(function (item) {
  return item.done;
}); 
var arr = [73,84,56, 22,100]
var newArr = arr.filter(item => item>80)   //得到新數組 [84, 100]
console.log(newArr,arr)

（7）、every() ：返回一個boolean，判斷每個元素是否符合func條件，有一個元素不滿足，則循環終止，返回false。

var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
        return item > 3;
    }));
false

（8）、some（）遍歷：返回一個boolean,判斷是否有元素符合func條件，如果有一個元素符合，則循環終止；

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
    console.log( arr.some( function( item, index, array ){
        return item > 3;
    }));
true

（9）、reduce(）：歸并 返回值是最后一次操作的結果；

//reduce() 方法接收一個函數作為累加器（accumulator）
//數組中的每個值（從左到右）開始縮減，最終為一個值var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10
//reduce接受一個函數，函數有四個參數，分別是：上一次的值，當前值，當前值的索引，數組 
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

//reduce還有第二個參數，我們可以把這個參數作為第一次調用callback時的第一個參數
//上面這個例子因為沒有第二個參數，所以直接從數組的第二項開始//如果我們給了第二個參數為5，那么結果就是這樣的
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
},5);
 
//第一次調用的previousValue的值就用傳入的第二個參數代替

（10）、find：find()方法返回數組中符合測試函數條件的第一個元素。否則返回undefined

var stu = [
    {
        name: '張三',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    },
    {
        name: '王五',
        gender: '男',
        age: 20
    }
]
 
function getStu(element){
   return element.name == '王五'
}
  
stu.find(getStu)
//返回結果為
//{name: "王五", gender: "男", age: 20}

（11）、findIndex：對于數組中的每個元素，findIndex 方法都會調用一次回調函數（采用升序索引順序），直到有元素返回 true。只要有一個元素返回 true，findIndex 立即返回該返回 true 的元素的索引值如果數組中沒有任何元素返回 true，則 findIndex 返回 -1。findIndex 不會改變數組對象。

[1,2,3].findIndex(function(x) { x == 2; });
// Returns an index value of 1.
 
[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1.

（12）、keys，values，entries：ES6 提供三個新的方法 —— entries()，keys()和values() —— 用于遍歷數組。它們都返回一個遍歷器對象，可以用for...of循環進行遍歷，唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

6.數組分類

整數數組、字符串數組、對象數組、二維數組 

到此，關于“js數組的簡介及常用方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！