JavaScript內(nèi)置對象之Array的使用小結(jié)

更新時(shí)間：2020年05月12日 10:32:45 作者：huangfuyk

這篇文章主要介紹了JavaScript內(nèi)置對象之Array的使用小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

數(shù)組的創(chuàng)建方式：

1.字面量：

放置一個(gè)數(shù)值時(shí)，就是一個(gè)數(shù)據(jù)。

var arr = [6];

2.構(gòu)造函數(shù)：

放置一個(gè)數(shù)據(jù)時(shí)，表示長度或數(shù)據(jù)的個(gè)數(shù)，空表示undefined。

var arr = new Array(6);

建議：Array作為構(gòu)造函數(shù)，行為很不一致。因此，不建議使用它生成新數(shù)組，直接使用數(shù)組字面量是更好的做法。

數(shù)組的操作：

1.push();

用于在數(shù)組的末端添加一個(gè)或多個(gè)元素，并返回添加新元素后的數(shù)組長度。

注意，該方法會改變原數(shù)組

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

2.pop();

用于刪除數(shù)組的最后一個(gè)元素，并返回該元素。對空數(shù)組使用pop方法，不會報(bào)錯，而是返回undefined。

注意，該方法會改變原數(shù)組

var arr = [1,2,3];
  console.log(arr.pop());   //3
  console.log(arr);      //[1,2] →原數(shù)組改變

3.concat();

合并數(shù)組。

注意，該方法不會改變原數(shù)組

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

4.shift();

用于刪除數(shù)組的第一個(gè)元素，并返回該元素。

注意，該方法會改變原數(shù)組

var arr = [1,2,3]
  console.log(arr.shift());    //1
  console.log(arr);        //[2,3]→→原數(shù)組改變

5.unshift();

用于在數(shù)組的第一個(gè)位置添加元素，并返回添加新元素后的數(shù)組長度。

注意，該方法會改變原數(shù)組

var arr = [1,2,3];
  console.log(arr.unshift("hello")); //4
  console.log(arr);          //["hello",1,2,3]→→原數(shù)組改變
  console.log(arr.unshift("a","b")); //6
  console.log(arr);          //["a","b","hello",1,2,3]→→原數(shù)組改變

6.slice();

用于復(fù)制目標(biāo)數(shù)組的一部分，返回一個(gè)新數(shù)組。

注意，該方法不會改變原數(shù)組。

如果slice方法的參數(shù)是負(fù)數(shù)，則表示倒數(shù)計(jì)算的位置；如果第一個(gè)參數(shù)大于等于數(shù)組長度，或者第二個(gè)參數(shù)小于第一個(gè)參數(shù)，則返回空數(shù)組。

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

7.splice();

用于刪除原數(shù)組的一部分成員，并可以在刪除的位置添加新的數(shù)組成員，返回值是被刪除的元素。

注意，該方法會改變原數(shù)組。
起始位置如果是負(fù)數(shù)，則表示從倒數(shù)位置開始刪除。

①不傳參時(shí)：無操作;

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

②只傳入start：表示從索引為start的數(shù)據(jù)開始刪除，直到數(shù)組結(jié)束;

var arr = ["a","b","c","d","e"];  
  console.log(arr.splice(2));   //["c", "d", "e"]
  console.log(arr);        //["a", "b"]→→原數(shù)組改變

③傳入start和num：表示從索引為start的數(shù)據(jù)開始刪除，刪除num個(gè);

var arr = ["a","b","c","d","e"];   
  console.log(arr.splice(2,2));  //["c", "d"]
  console.log(arr);        //["a", "b", "e"]→→原數(shù)組改變

④傳入更多：表示從索引為start的數(shù)據(jù)開始刪除，刪除num個(gè)，并將第三個(gè)參數(shù)及后面所有參數(shù)，插入到start的位置;

var arr = ["a","b","c","d","e"];  
  console.log(arr.splice(2,2,"f","g")); //["c", "d"]
  console.log(arr);           //["a", "c", "f", "g", "e"]---原數(shù)組改變

8.reverse();

用于顛倒排列數(shù)組元素，返回改變后的數(shù)組（還是原數(shù)組）。

注意，該方法將改變原數(shù)組

var arr = [a,b,c];
  console.log(arr.reverse());   //[c,b,a]
  console.log(arr);        //[c,b,a]→→原數(shù)組改變

9.sort();

對數(shù)組成員進(jìn)行排序，默認(rèn)是按照字典順序排序。排序后，原數(shù)組將被改變；

注意：sort方法不是按照大小排序，而是按照字典順序。也就是說，數(shù)值會被先轉(zhuǎn)成字符串，再按照字典順序進(jìn)行比較，例如：121排在13的前面；如果想讓sort方法按照自定義方式排序，可以傳入一個(gè)函數(shù)作為參數(shù)。

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

10.join();

以指定參數(shù)作為分隔符，將所有數(shù)組成員連接為一個(gè)字符串返回。如果不提供參數(shù)，默認(rèn)用逗號分隔；

注意，該方法不會改變原數(shù)組；
如果數(shù)組成員是undefined或null或空位，會被轉(zhuǎn)成空字符串。

 var arr = [a,b,c];
  console.log(arr.join());     // a,b,c
  console.log(arr.join("*"));   // a*b*c
  console.log(arr);        //[1,2,3]→→原數(shù)組未改變

11.for- in();

遍歷語句，類似于循環(huán)，但for-in可以遍歷沒有索引的集合，也被成為枚舉。

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

補(bǔ)充：
push和pop結(jié)合使用，就構(gòu)成了“后進(jìn)先出”的棧結(jié)構(gòu)（stack）;
push和shift結(jié)合使用，就構(gòu)成了“先進(jìn)先出”的隊(duì)列結(jié)構(gòu)（queue）。

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script>
    /*
     *
     * Array.isArray(對象)---->判斷這個(gè)對象是不是數(shù)組
     * instanceof關(guān)鍵字
     * .concat(數(shù)組,數(shù)組,數(shù)組,...) 組合一個(gè)新的數(shù)組
     * .every(函數(shù))--返回值是布爾類型,函數(shù)作為參數(shù)使用,函數(shù)中有三個(gè)參數(shù),第一個(gè)參數(shù)是元素的值，第二個(gè)參數(shù)是索引值,第三個(gè)參數(shù)是原來的數(shù)組(沒用)
     * 如果這個(gè)數(shù)組中的每個(gè)元素的值都符合條件,最后才返回的是true
     *
     * .filter(函數(shù));返回的是數(shù)組中每一個(gè)元素都復(fù)合條件的元素,組成了一個(gè)新的數(shù)組
     *
     * .push(值);--->把值追加到數(shù)組中,加到最后了---返回值也是追加數(shù)據(jù)之后的數(shù)組長度
     * .pop();--->刪除數(shù)組中最后一個(gè)元素,返回值就是刪除的這個(gè)值
     * .shift();--->刪除數(shù)組中第一個(gè)元素,返回值就是刪除的這個(gè)值
     * .unshift();--->向數(shù)組的第一個(gè)元素前面插入一個(gè)新的元素,----返回值是插入后的程度
     * .forEach(函數(shù))方法---遍歷數(shù)組用---相當(dāng)于for循環(huán)
     * .indexOf(元素值);返回的是索引,沒有則是-1
     * .join("字符串");----返回的是一個(gè)字符串
     * .map(函數(shù));--->數(shù)組中的每個(gè)元素都要執(zhí)行這個(gè)函數(shù),把執(zhí)行后的結(jié)果重新的全部的放在一個(gè)新的數(shù)組中
     * .reverse();----->反轉(zhuǎn)數(shù)組
     * .sort();---排序的,可能不穩(wěn)定,如果不穩(wěn)定,請寫MDN中的那個(gè)固定的代碼
     * .arr.slice(開始的索引,結(jié)束的索引);把截取的數(shù)組的值放在一個(gè)新的數(shù)組中,但是不包含結(jié)束的索引對應(yīng)的元素值
     * .splice(開始的位置,要刪除的個(gè)數(shù),替換的元素的值);一般是用于刪除數(shù)組中的元素,或者是替換元素,或者是插入元素
     *
     *
     * */
    //構(gòu)造函數(shù)
    //  var arr1=new Array();
    //  //字面量的方式
    //  var arr2=[];


    //對象是不是數(shù)組類型:兩種
    //1  instanceof
    //  var obj=[];
    //  console.log(obj instanceof Array);//false
    //
    //  //2 使用數(shù)組的
    //  console.log(Array.isArray(obj));//


    //  var arr=["a","b","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----:誰調(diào)用了這個(gè)方法,那么c就是誰---->arr
    //  var flag= arr.every(function (a,b) {
    //   //console.log(a+"==="+b+"===="+c);
    //   return a>2000;//數(shù)組中的每個(gè)元素的值都要大于2000的情況,最后才返回true
    //  });


    //  var arr=["小明明lkko","小曹操674","小白白bd","笑瞇瞇a"];
    //  var flag=arr.every(function (ele,index) {
    //   //數(shù)組中的每個(gè)元素的長度是不是大于4
    //   return ele.length>4;
    //  });


    //console.log(flag);


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

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

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

    //  var arr=[10,20,30,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,20,30,40,50];
    //  arr.reverse();//反轉(zhuǎn)
    //  console.log(arr);


    //  var arr=[1,40,20,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,20,30,40,50,60,70,80,90,100];
    //  var newArr= arr.slice(3,7);
    //  console.log(newArr);


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

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

    // myFish 變?yōu)?["angel", "clown", "drum", "mandarin", "sturgeon"]

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

    console.log(myFish);
    // myFish 變?yōu)?["angel", "clown", "mandarin", "sturgeon"]

  </script>
</head>
<body>

</body>
</html>

到此這篇關(guān)于JavaScript內(nèi)置對象之Array的使用小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript內(nèi)置對象Array內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: