1. 程式人生 > 程式設計 >JavaScript內建物件之Array的使用小結

JavaScript內建物件之Array的使用小結

陣列的建立方式:

1.字面量:

放置一個數值時,就是一個數據。

var arr = [6]; 

2.建構函式:

放置一個數據時,表示長度或資料的個數,空表示undefined。

var arr = new Array(6);

建議:Array作為建構函式,行為很不一致。因此,不建議使用它生成新陣列,直接使用陣列字面量是更好的做法。

陣列的操作:

1.push();

用於在陣列的末端新增一個或多個元素,並返回新增新元素後的陣列長度。

注意,該方法會改變原陣列

var arr = [1,2,3];
  console.log(arr.push("hello")); //4
  console.log(arr);        //[1,3,"hello"]---原陣列改變
  console.log(arr.push("a","b")); //6
  console.log(arr);        //[1,"hello","a","b"]---原陣列改變

2.pop();

用於刪除陣列的最後一個元素,並返回該元素。對空陣列使用pop方法,不會報錯,而是返回undefined。

注意,該方法會改變原陣列

var arr = [1,3];
  console.log(arr.pop());   //3
  console.log(arr);      //[1,2] →原陣列改變

3.concat();

合併陣列。

注意,該方法不會改變原陣列

var arr1 = [1,3]
  var arr2 = arr1.concat();
  console.log(arr1);      //[1,3]→→原陣列
  console.log(arr1 === arr2); //false
  console.log(arr2);      //[1,3]→→原陣列的副本
  console.log(arr1.concat("hello","world"));
  //[1,"world"]
  console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));  
  //[1,"b",[3,{"name":"admin"}]
  console.log(arr1);      //[1,3]→→原陣列未改變

4.shift();

用於刪除陣列的第一個元素,並返回該元素。

注意,該方法會改變原陣列

var arr = [1,3]
  console.log(arr.shift());    //1
  console.log(arr);        //[2,3]→→原陣列改變

5.unshift();

用於在陣列的第一個位置新增元素,並返回新增新元素後的陣列長度。

注意,該方法會改變原陣列

var arr = [1,3];
  console.log(arr.unshift("hello")); //4
  console.log(arr);          //["hello",1,3]→→原陣列改變
  console.log(arr.unshift("a","b")); //6
  console.log(arr);          //["a",3]→→原陣列改變

6.slice();

用於複製目標陣列的一部分,返回一個新陣列。

注意,該方法不會改變原陣列。

如果slice方法的引數是負數,則表示倒數計算的位置;如果第一個引數大於等於陣列長度,或者第二個引數小於第一個引數,則返回空陣列。

var arr = ["a","c","d","e"];
  console.log(arr.slice(1,3));    //["b","c"]
  console.log(arr.slice(1));     //["b","e"]
  console.log(arr.slice(-4,-1));   //["b","d"]
  console.log(arr.slice(-2));     //["d","e"]
  console.log(arr.slice(1,-2));    //["b","c"]
  console.log(arr);          //["Tom","Jack","Lucy","Lily","May"]→→原陣列未改變

7.splice();

用於刪除原陣列的一部分成員,並可以在刪除的位置新增新的陣列成員,返回值是被刪除的元素。

注意,該方法會改變原陣列。
起始位置如果是負數,則表示從倒數位置開始刪除。

①不傳參時:無操作;

var arr = ["a","e"];
  console.log(arr.splice()); //[]
  console.log(arr);      //["a","e"]→→無操作

②只傳入start:表示從索引為start的資料開始刪除,直到陣列結束;

var arr = ["a","e"];  
  console.log(arr.splice(2));   //["c","e"]
  console.log(arr);        //["a","b"]→→原陣列改變

③傳入start和num:表示從索引為start的資料開始刪除,刪除num個;

var arr = ["a","e"];   
  console.log(arr.splice(2,2));  //["c","d"]
  console.log(arr);        //["a","e"]→→原陣列改變

④傳入更多:表示從索引為start的資料開始刪除,刪除num個,並將第三個引數及後面所有引數,插入到start的位置;

var arr = ["a","e"];  
  console.log(arr.splice(2,"f","g")); //["c","d"]
  console.log(arr);           //["a","g","e"]---原陣列改變
 

8.reverse();

用於顛倒排列陣列元素,返回改變後的陣列(還是原陣列)。

注意,該方法將改變原陣列

var arr = [a,b,c];
  console.log(arr.reverse());   //[c,a]
  console.log(arr);        //[c,a]→→原陣列改變

9.sort();

對陣列成員進行排序,預設是按照字典順序排序。排序後,原陣列將被改變;

注意:sort方法不是按照大小排序,而是按照字典順序。也就是說,數值會被先轉成字串,再按照字典順序進行比較,例如:121排在13的前面;如果想讓sort方法按照自定義方式排序,可以傳入一個函式作為引數。

[10111,1101,111].sort(function(a,b){
return a - b;   // 升序
// return b - a; // 降序
})  // [111,10111]

10.join();

以指定引數作為分隔符,將所有陣列成員連線為一個字串返回。如果不提供引數,預設用逗號分隔;

注意, 該方法不會改變原陣列;
如果陣列成員是undefined或null或空位,會被轉成空字串。

 var arr = [a,c];
  console.log(arr.join());     // a,c
  console.log(arr.join("*"));   // a*b*c
  console.log(arr);        //[1,3]→→原陣列未改變

11.for- in();

遍歷語句,類似於迴圈,但for-in可以遍歷沒有索引的集合,也被成為列舉。

  • for(var i in arr) i是下標;
  • for(var i in obj) i是屬性名.

補充:
push和pop結合使用,就構成了“後進先出”的棧結構(stack);
push和shift結合使用,就構成了“先進先出”的佇列結構(queue)。

例項

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script>
    /*
     *
     * Array.isArray(物件)---->判斷這個物件是不是陣列
     * instanceof關鍵字
     * .concat(陣列,陣列,...) 組合一個新的陣列
     * .every(函式)--返回值是布林型別,函式作為引數使用,函式中有三個引數,第一個引數是元素的值,第二個引數是索引值,第三個引數是原來的陣列(沒用)
     * 如果這個陣列中的每個元素的值都符合條件,最後才返回的是true
     *
     * .filter(函式);返回的是陣列中每一個元素都複合條件的元素,組成了一個新的陣列
     *
     * .push(值);--->把值追加到陣列中,加到最後了---返回值也是追加資料之後的陣列長度
     * .pop();--->刪除陣列中最後一個元素,返回值就是刪除的這個值
     * .shift();--->刪除陣列中第一個元素,返回值就是刪除的這個值
     * .unshift();--->向陣列的第一個元素前面插入一個新的元素,----返回值是插入後的程度
     * .forEach(函式)方法---遍歷陣列用---相當於for迴圈
     * .indexOf(元素值);返回的是索引,沒有則是-1
     * .join("字串");----返回的是一個字串
     * .map(函式);--->陣列中的每個元素都要執行這個函式,把執行後的結果重新的全部的放在一個新的陣列中
     * .reverse();----->反轉陣列
     * .sort();---排序的,可能不穩定,如果不穩定,請寫MDN中的那個固定的程式碼
     * .arr.slice(開始的索引,結束的索引);把擷取的陣列的值放在一個新的陣列中,但是不包含結束的索引對應的元素值
     * .splice(開始的位置,要刪除的個數,替換的元素的值);一般是用於刪除陣列中的元素,或者是替換元素,或者是插入元素
     *
     *
     * */
    //建構函式
    //  var arr1=new Array();
    //  //字面量的方式
    //  var arr2=[];


    //物件是不是陣列型別:兩種
    //1  instanceof
    //  var obj=[];
    //  console.log(obj instanceof Array);//false
    //
    //  //2 使用陣列的
    //  console.log(Array.isArray(obj));//


    //  var arr=["a","c"];
    //  var newArr=Array.from(arr);
    //  console.log(newArr);

    //  var arr1=[10,20,30];
    //  var arr2=[40,50,60];
    //  console.log(arr1.concat(arr2));

    //  var arr=[1000,2000,3000];
    //  //a----: 元素的值
    //  //b----: 索引的值
    //  //c----:誰呼叫了這個方法,那麼c就是誰---->arr
    //  var flag= arr.every(function (a,b) {
    //   //console.log(a+"==="+b+"===="+c);
    //   return a>2000;//陣列中的每個元素的值都要大於2000的情況,最後才返回true
    //  });


    //  var arr=["小明明lkko","小曹操674","小白白bd","笑眯眯a"];
    //  var flag=arr.every(function (ele,index) {
    //   //陣列中的每個元素的長度是不是大於4
    //   return ele.length>4;
    //  });


    //console.log(flag);


    //  var arr=[10,30,40,60,70,80];
    //  var newArr=arr.filter(function (ele) {//ele---每個元素
    //   return ele>40;
    //  });
    //  console.log(newArr);

    //  var arr=[10,100];
    //  var newArr=arr.filter(function (ele) {
    //   return ele!=0;
    //  });
    //  console.log(newArr);

    //  var arr=[10,50];
    //  var result=arr.unshift(100);
    //  console.log(result);
    //  console.log(arr);
    //
    //  var arr = [10,40];
    //  arr.forEach(function (ele,index) {
    //   console.log(ele+'======'+index);
    //  });

    //  var arr=[10,40];
    //  var index=arr.indexOf(300);
    //  console.log(index);


    //  var arr=["小白","小黑","小紅","小芳","小綠","小蘇"];
    //  var str=arr.join("|");
    //  console.log(str);


    //  var numbers = [1,4,9];
    //  var roots = numbers.map(Math.sqrt);
    //  console.log(roots);


    //  var arr=[10,50];
    //  arr.reverse();//反轉
    //  console.log(arr);


    //  var arr=[1,10,100];
    //  //a---arr[j]
    //  //b---arr[j+1]
    //  arr.sort(function (a,b) {
    //   if(a>b){
    //    return 1;
    //   }else if(a==b){
    //    return 0;
    //   }else{
    //    return -1;
    //   }
    //  });
    //  console.log(arr);


    //
    //  var arr=[10,80,90,100];
    //  var newArr= arr.slice(3,7);
    //  console.log(newArr);


    var myFish = ['angel','clown','mandarin','sturgeon'];

    // myFish.splice(2,'drum'); // 在索引為2的位置插入'drum'

    // myFish 變為 ["angel","clown","drum","mandarin","sturgeon"]

    myFish.splice(2,1); // 從索引為2的位置刪除一項(也就是'drum'這一項)

    console.log(myFish);
    // myFish 變為 ["angel","sturgeon"]

  </script>
</head>
<body>

</body>
</html>

到此這篇關於JavaScript內建物件之Array的使用小結的文章就介紹到這了,更多相關JavaScript內建物件Array內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!