JS內置對象:數組(二)

一、數組的操作方法

【知識點】

concat()
slice()

1.concat()

【語法】:

arrayObject.concat(arrayX,arrayX,......,arrayX)

【功能】:
用于連接兩個或多個數組。

【返回值】:
數組。

【案例】:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
          var arr1=["a","b","c"],
          arr2=["d","e",1,3],
          arr3;
      // concat
          arr3=arr1.concat(arr2,["m",99,8]);
          console.log(arr3);
</script>
</body>

</html>

【結果】:


2.slice()

【語法】:

arrayObject.slice(start,end)

【功能】:
從已有的數組中返回選定的元素。

【參數】:
start (必需)規定從何處開始選取,如果是負數,那么它規定從數組尾部開始算起的位置。
end(可選)規定從何處結束選取,該參數是數組片斷結束處的數組下標。

【返回值】:數組

說明:
1.Start和end指的是數組中索引值
2.截取從Start和end(不包含該元素)的元素,即從start和end-1的元素

【案例】

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
        //slice(start,end)
          var colors=["red","green","blue","yellow","orange"];
          var newColors=colors.slice(1,2);
          console.log(newColors);
</script>
</body>
</html>

【結果】


說明:
1.如果沒有指定end,那么切分的數組包含從start 到數組結束的所有元素。
2.如果slice()方法的參數中有一個負數,則用數組長度加上該數來確定相應的位置。

【案例】:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
        //slice(start,end)
          var colors=["red","green","blue","yellow","orange"];
          var newColors=colors.slice(-2,4);//5-2=3即3,3截取
          console.log(newColors);
</script>
</body>

</html>

【結果】:

★【面試題】完成以下代碼段,實現b數組對a數組的拷貝,方法越多越好var a=[1,"yes",3], b;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
        //完成以下代碼段,實現b數組對a數組的拷貝,方法越多越好
        var a=[1,"yes",3],
        b;

        //1.數組遍歷,push
        b=new Array();
        for (var i = 0; i < a.length; i++) {
        b.push(a[i]);  
        }
        console.log(b);  

        //2.concat()
        b=[].concat(a);
        console.log(b);

        //3.slice();
        b=a.slice(0);
        console.log(b);     
</script>
</body>

</html>

二 、splice()方法

1、掌握使用splice()方法刪除數組項
2、掌握使用splice()方法插入數組項
3、掌握使用splice()方法替換數組項

1.刪除

【語法】:

arrayObject.splice(index,count)

【功能】:
刪除從index處開始的零個或多個元素。

【返回值】:
含有被刪除的元素的數組。

說明:
count是要刪除的項目數量,如果設置為0,則不會刪除項目。如果不設置,則刪除從index開始的所有值。

【案例】:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
      var arr=["a","b","c","d","e","f"];
      //刪除
      var delArr=arr.splice(2,2);
      console.log(arr);
      console.log(delArr);
</script>
</body>
</html>

【結果】:


2.插入

【語法】:

arrayObject.splice(index,0,item1,……,itemX)

【功能】:
在指定位置插入值

【參數】:
index:起始位置
0:要刪除的項數
item1…itemX:要插入的項

【返回值】:數組

【案例】:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
      var arr=["a","b","c","d","e","f"];
      //插入
      var insertArr=arr.splice(3,0,"m","n");
      console.log(arr);
      console.log(insertArr);
</script>
</body>
</html>

【結果】:


3.替換

【語法】:

arrayObject.splice(index,count,item1,……,itemX)

【功能】:
在指定位置插入值,且同時刪除任意數量的項

【參數】:
index:起始位置
count:要刪除的項數
item1…itemX:要插入的項目

【返回值】:從原始數組中刪除的項(如果沒有刪除任何項,則返回空數組)

【案例】:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
      var arr=["a","b","c","d","e","f"];
      //替換
      var replaceArr=arr.splice(1,2,"x","y","z");
      console.log(arr);
      console.log(replaceArr);
</script>
</body>
</html>

【結果】:


三、ECMAScript為數組實例添加的兩個位置方法:

indexOf()
lastIndexOf()

1.indexOf()

【語法】:

arrayObject.indexOf(searchvalue,startIndex)

【功能】:
從數組的開頭(位置0)開始向后查找。

【參數】:
searchvalue:必需,要查找的項;
startIndex:可選,起始位置的索引。

【返回值】:
number,查找的項在數組中的位置,沒有找到的情況下返回-1。

【案例】:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
      var nums=[1,7,5,7,8,1,6,9];
      var pos=nums.indexOf(7,2);
      console.log(pos);
</script>
</body>
</html>

【結果】:


2.lastIndexOf()

【語法】:

arrayObject.lastIndexOf(searchvalue,startIndex)

【功能】:
從數組的末尾開始向前查找。

【參數】:
searchvalue:必需,要查找的項;
startIndex:可選,起點位置的索引。

【返回值】:
number,查找的項在數組中的位置,沒有找到的情況下返回-1.

【案例】:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
      var nums=[1,7,5,7,8,1,6,9];
      var pos=nums.lastIndexOf(1);
      console.log(pos);
</script>
</body>
</html>

【結果】:


說明:
1.在比較第一個參數與數組中的每一項時,會使用全等操作符,即要求查找的項必須嚴格相等。
2.數組的位置方法是ECMAScript5為數組實例新增的,所以支持的瀏覽器只有:
IE9+、Firefox2+、Safari3+、Opera9.5和Chrome。

★如果考慮低版本瀏覽器,則封裝一個方法實現indexOf的功能:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
      var nums=[1,7,5,7,8,1,6,9];
      //封裝一個方法實現indexOf的功能
      function ArrayIndexOf(arr,value){
        //檢測value在arr中出現的位置
        for(var i=0;i<arr.length;i++){
          if(arr[i]===value){
              return i;
          }
        }
        return -1;
      }
      var pos2=ArrayIndexOf(nums,8);
      console.log(pos2);
</script>
</body>
</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,272評論 0 4
  • 數組是值的有序集合。每個值叫做一個元素,而每個元素在數組中有一個位置,以數字表示,稱為索引。 JavaScript...
    劼哥stone閱讀 1,148評論 6 20
  • 由于最近都在freecodecamp上刷代碼,運用了很多JavaScript數組的方法,因此做了一份關于JavaS...
    2bc5f46e925b閱讀 2,025評論 0 16
  • 第三章 類型、值和變量 1、存取字符串、數字或布爾值的屬性時創建的臨時對象稱做包裝對象,它只是偶爾用來區分字符串值...
    坤少卡卡閱讀 661評論 0 1
  • 本章內容 使用對象 創建并操作數組 理解基本的 JavaScript 類型 使用基本類型和基本包裝類型 引用類型的...
    悶油瓶小張閱讀 697評論 0 0