js不完全入門之?dāng)?shù)組

bergwhite 發(fā)布于2019-08-20 10:22 / 1519人閱讀

摘要：數(shù)組是值得有序集合。數(shù)組元素甚至可以是對象或其它數(shù)組。不同數(shù)組自動(dòng)更新。數(shù)組對象繼承上的大量數(shù)組操作方法字符串和數(shù)組字符串可以理解為類數(shù)組，但它不是數(shù)組博客地址不完全入門之?dāng)?shù)組歡迎交流指正

數(shù)組是值得有序集合。每個(gè)值叫做元素，每個(gè)元素在數(shù)組中都有數(shù)字位置編號(hào)，也就是索引。
JS中的數(shù)組是弱類型的，數(shù)組中可以含有不同類型的元素。
數(shù)組元素甚至可以是對象或其它數(shù)組。

var arr = [1,true,null,undefined,{x:1},[1,2,3]];

創(chuàng)建數(shù)組 1.字面量

注意，數(shù)組可以用逗號(hào)留空的方式創(chuàng)建，如：

 var commasArr1 = [1,,2]; //1,undefined,2
 var commasArr2 = [,,];//undefined * 2

數(shù)組大小限制

size form 0 to 2^23 - 1

2.new Array

  var arr = new Array();
  var arrWithLength = new Array(100); //undefined * 100
  var arrLikesLiteral = new Array(true,false,null,1,2,"hi");
  //等價(jià)于[true,false,null,1,2,"hi"];

數(shù)組元素讀寫

  var arr = [1,2,3,4,5];
  arr[1]; //2
  arr.length; //5

  arr[5] = 6;
  arr.length; //6

  delete arr[0]; //表現(xiàn)上只是改寫為undefined，但是和直接賦值不同
  arr[0]; //undefined
  arr.length; //6

數(shù)組元素增刪

動(dòng)態(tài)的，無需指定大小，數(shù)組的length會(huì)根據(jù)數(shù)組動(dòng)態(tài)變化

  var arr = [];
  arr[0] = 1;
  arr[1] = 2;
  arr.push(3);
  arr; //[1,2,3]

  arr[arr.length] = 4; //equal to arr.push(4);
  arr; //[1,2,3,4]

  arr.unshift(0);
  arr; //[0,1,2,3,4];

  delete arr[2];
  arr; //[0,1,undefined,3,4]
  arr.length; //5
  2 in arr; //判斷索引存不存在 false

注：用delete變成的undefined和直接用arr[2] = undefined,是不同的
后者 2 in arr; //true;

  arr.length -= 1;
  arr; //[0,1,undefined,3],4 is removed

  arr.pop(); //3 returned by pop
  arr;//[0,1,undefined],3 is removed

  arr.shift(); //0 returned by shift
  arr; //[1,undefined]

數(shù)組迭代

  var i = 0,n = 10;
  var arr = [1,2,3,4,5];

  for(; i < n; i++){
    console.log(arr[i]); //1,2,3,4,5
  }

  for(i in arr){
    console.log(arr[i]); //1,2,3,4,5
  }

注：如果用 for-in 的方式來循環(huán)數(shù)組的話，那么在原型鏈上的屬性也會(huì)被迭代出來，如：

  Array.prototype.x = "inherited";

  for(i in arr){
    console.log(arr[i]); //1,2,3,4,5,inherited
  }

此時(shí)可以用hasOwnProperty()方法來判斷是否是數(shù)組元素

  for(i in arr){
    if(arr.hasOwnProperty(i)){
      console.log(arr[i]);//1,2,3,4,5
    }
  }

注：for-in循環(huán)是不保證順序的！

二維數(shù)組

  var arr = [[0,1],[2,3],[4,5]];
  var i = 0, j = 0;
  var row;
  for(; i < arr.length; i++){
    row = arr[i];
    console.log("row" + i);
    for(j = 0; j < row.length; j++){
      console.log(row[j]);
    }
  }

稀疏數(shù)組

稀疏數(shù)組并不含有從0開始的連續(xù)索引。一般length屬性值比實(shí)際元素個(gè)數(shù)大。

  var arr1 = [undefined];
  var arr2 = new Array(1);
  0 in arr1; //true
  0 in arr2; //false
  arr1.length = 100;
  arr1[99] = 123;
  99 in arr1; //true
  98 in arr1; //false
  var arr = [,,];
  0 in arr; //false

數(shù)組方法

數(shù)組的原型 [] => Array.prototype

1.Array.prototype.join

將數(shù)組轉(zhuǎn)為字符串

 var arr = [1,2,3];
 arr.join(); //"1,2,3"
 arr.join("_");//"1_2_3"

 function repeatString(str,n){
   return new Array(n+1).join(str);
 }
 repeatString("a",3); //"aaa"
 repeatString("Hi",5); //"HiHiHiHiHi"

2.Array.prototype.reverse

將數(shù)組逆序（原數(shù)組變）

    var arr = [1,2,3];
    arr.reverse(); //[3,2,1]
    arr; //[3,2,1] 原數(shù)組被修改！

3.Array.prototype.sort

排序(默認(rèn)是按照字母排序，原數(shù)組變)

 var arr = ["a","d","c","b"];
 arr.sort(); //["a","b","c","d"]

 arr = [13,24,51,3];
 arr.sort(); //[13,24,3,51] 轉(zhuǎn)換成字符串，按開頭數(shù)字排序
 arr; //[13,24,3,51] 原數(shù)組被修改！

 /* 數(shù)字排序 */
 arr.sort(function(a,b){
   return a - b;
 }) //[3, 13, 24, 51]

 /* 對象排序 */
 arr = [{age:25},{age:39},{age:99}];
 arr.sort(function(a,b){
   return a.age - b.age;
 })
 arr.forEach(function(item){
   console.log("age",item.age);
 }) //age 25 age 39 age 99

4.Array.prototype.concat

數(shù)組合并（原數(shù)組不變）

 var arr = [1,2,3];
 arr.concat(4,5); //[1,2,3,4,5]
 arr; //[1,2,3] 原數(shù)組未被修改！

 arr.concat([10,11],13); //[1,2,3,10,11,13]

 arr.concat([1,[2,3]]); //[1,2,3,1[2,3]]

注：當(dāng)合并的為數(shù)組時(shí)，會(huì)拉平成元素，但合并的數(shù)組中還有數(shù)組的話，不能拉平數(shù)組中的數(shù)組

5.Array.prototype.slice

返回部分?jǐn)?shù)組（原數(shù)組不變）

    var arr = [1,2,3,4,5];
    arr.slice(1,3); //[2,3] 左閉右開
    arr.slice(1); //[2,3,4,5] 一個(gè)參數(shù)，從索引開始到最后
    arr.slice(1,-1); //[2,3,4] 負(fù)數(shù)索引，從后往前數(shù)，最后一個(gè)為-1
    arr.slice(-4,-3); //[2]

6.Array.prototype.splice

數(shù)組拼接(原數(shù)組變)

 var arr = [1,2,3,4,5];
 /* 一個(gè)參數(shù)：索引 */
 arr.splice(2); //returns [3,4,5]
 arr; //[1,2]

 arr = [1,2,3,4,5];
 /* 兩個(gè)參數(shù)：索引 | 個(gè)數(shù) */
 arr.splice(2,2); //returns [3,4]
 arr; //[1,2,5];

 arr = [1,2,3,4,5];
 /* 多個(gè)參數(shù)：索引 | 個(gè)數(shù) | 待插入元素 */
 arr.splice(1,1,"a","b"); //returns [2]
 arr; //[1,"a","b",3,4,5]

7.Array.prototype.forEach

數(shù)組遍歷

    var arr = [1,2,3,4,5];
    arr.forEach(function(x, index, a){
      console.log(x + "|" + index + "|" + (a === arr));
    })

8.Array.prototype.map

數(shù)組映射（原數(shù)組不變）

    var arr = [1,2,3];
    arr.map(function(x){
      return x + 10;
    }); //[11,12,13]
    arr; //[1,2,3]

9.Array.prototype.filter

數(shù)組過濾（原數(shù)組不變）

    var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.filter(function(x, index){
      return index % 3 === 0 || x >= 8;
    });// returns [1,4,7,8,9,10]
    arr; //[1,2,3,4,5,6,7,8,9,10]

10.Array.prototype.every & some

數(shù)組判斷

    var arr = [1,2,3,4,5];
    arr.every(function(x){
      return x < 10;
    }); //true
    arr.every(function(x){
      return x < 3;
    }); //false
    arr.some(function(x){
      return x === 3;
    }); //true
    arr.some(function(x){
      return x === 100;
    }); //false

11.Array.prototype.reduce & reduceRight

 var arr = [1,2,3];
 var sum = arr.reduce(function(x, y){
   return x + y;
 },0); //6
 arr; //[1,2,3]

 arr = [3,9,6];
 var max = arr.reduce(function(x, y){
   console.log(x + "|" + y);
   return x > y?x:y;
 });
 // 3 | 9
 // 9 | 6
 max; //9

注：計(jì)算邏輯，當(dāng)有第二個(gè)可選參數(shù)時(shí)，也就是上面的0，第一次計(jì)算 0+1，第二次將上一次結(jié)果1和數(shù)組中第二個(gè)元素相加，第三次將上次結(jié)果和下一個(gè)元素相加;若沒有第二個(gè)參數(shù)，則第一次取前兩個(gè)，所得結(jié)果和下一個(gè)元素進(jìn)行下一次運(yùn)算

     max = arr.reduceRight(function(x, y){
      console.log(x + "|" +y);
      return x > y?x:y;
     });
     // 6 | 9
     // 9 | 3
     max; //9

注：從右向左傳參

12.Array.prototype.indexOf & lastIndexOf

數(shù)組檢索

    var arr = [1,2,3,2,1];
    //查找元素2
    arr.indexOf(2); //1
    //查找元素99
    arr.indexOf(99); //-1
    //查找元素1，從第二個(gè)元素開始
    arr.indexOf(1,1); //4
    //查找元素1，從倒數(shù)第三個(gè)元素開始
    arr.indexOf(1,-3); //4
    //查找元素2，從最后一個(gè)元素開始
    arr.indexOf(2,-1); //-1
    //查找元素2，從右向左找
    arr.lastIndexOf(2); //3
    //查找元素2，從右向左找，從倒數(shù)第二個(gè)元素開始
    arr.lastIndexOf(2,-2); //3
    //查找元素2，從右向左找，從倒數(shù)第三個(gè)元素開始
    arr.lastIndexOf(2,-3); //1

注：不知道看到上面這8個(gè)示例是不是暈了，理一理：
①兩個(gè)方法都可以接收兩個(gè)參數(shù)，第一個(gè)為要查找的元素（必選），第二個(gè)為開始位置索引（可選）
②所得結(jié)果為元素的索引（也稱下標(biāo)），正數(shù)即索引（無論怎么找，都是從左向右，從0開始！），-1即未找到
③方法的第二個(gè)參數(shù)：若為正數(shù)，從前往后索引（0開始）；若為負(fù)數(shù)，從后往前索引（-1開始）

13.Array.isArray

判斷是否為數(shù)組

    Array.isArray([]); //true
    //另外幾種
    [] instanceof Array; //true
    ({}).toString.apply([]) === "[object Array]"; //true
    [].constructor === Array; //true (這種不可靠，如繼承)

數(shù)組小結(jié) 數(shù)組 VS 一般對象

相同：都可以繼承。數(shù)組是對象，對象不一定是數(shù)組。都可以當(dāng)做對象添加刪除屬性。
不同：數(shù)組自動(dòng)更新length。按索引訪問數(shù)組常常比訪問一般對象屬性明顯迅速。
數(shù)組對象繼承Array.prototype上的大量數(shù)組操作方法

字符串和數(shù)組

字符串可以理解為類數(shù)組，但它不是數(shù)組

 var str = "hello world";
 str.charAt(0); //"h"
 str[1]; //e

 Array.prototype.join.call(str,"_");
 //"h_e_l_l_o_ _w_o_r_l_d"

博客地址：js不完全入門之?dāng)?shù)組

歡迎交流指正~

GPU云服務(wù)器云服務(wù)器不完全機(jī)器學(xué)習(xí)入門之深度學(xué)習(xí)入門之pytorch hadoop之hbase從入門到精通

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80113.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

bergwhite

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow模型壓縮

閱讀 3611·2023-04-26 02:10
支持BREW的手機(jī)

閱讀 1397·2021-11-22 15:25
【Leetcode刷題】15. 三數(shù)之和

閱讀 1702·2021-09-22 10:02
從賣蘋果轉(zhuǎn)行軟件測試薪資18K，我經(jīng)歷了什么...

閱讀 945·2021-09-06 15:02
React生態(tài)，dva源碼閱讀

閱讀 3505·2019-08-30 15:55
React組件：Dragact 0.1.4發(fā)布

閱讀 635·2019-08-30 13:58
[譯] Houdini: 你還沒聽說！這可能是 CSS 下一件最令人興奮的大事

閱讀 2807·2019-08-30 12:53
常用的CSS水平垂直居中方法大全

閱讀 3092·2019-08-29 12:38

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

js不完全入門之?dāng)?shù)組

相關(guān)文章

vue.js入門教程之基礎(chǔ)語法

D3js之入門

前端文檔收集

前端文檔收集

發(fā)表評(píng)論

0條評(píng)論

bergwhite

男|高級(jí)講師

TA的文章

tensorflow模型壓縮

支持BREW的手機(jī)

【Leetcode刷題】15. 三數(shù)之和

從賣蘋果轉(zhuǎn)行軟件測試薪資18K，我經(jīng)歷了什么...

React生態(tài)，dva源碼閱讀

React組件：Dragact 0.1.4發(fā)布

[譯] Houdini: 你還沒聽說！這可能是 CSS 下一件最令人興奮的大事

常用的CSS水平垂直居中方法大全

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

js不完全入門之?dāng)?shù)組

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！