js數組詳解

時間  2019-12-07
標籤 數組 詳解 欄目 JavaScript 简体版
原文   原文鏈接

數組初認識

Array是js中的引用數據類型，除了Object外，Array幾乎是ECMAScript中最經常使用的數據類型了。前端

js中的數組與其餘語言的不一樣之處編程

  1. 能夠保存任意的數據類型數組

  2. 數組長度動態調整數據結構

棧方法

ECMAScript中提供了讓數組的行爲相似於棧的方法，便可以讓數組表現的如同棧的LIFO數據結構通常，方法分別是push，pop函數

push

用法：該方法接收任意數量的參數，把他們逐個添加到數組的末尾，並返回修改後數組的長度測試

DEMOthis

var nums=[];
    var len =nums.push(1,2,3);//一次性添加三個元素 返回修改後的數組長度3
        console.log(nums,'len='+len);
        len=nums.push(4);//添加一個元素 返回數組修改後的數組長度4
        console.log(nums,'len='+len);

測試
棧 pushspa

pop

用法：該方法刪除數組最後一項，減小length的值，而且返回被刪除的元素code

DEMO對象

var nums=[1,2,3,4];
    var returnNum=nums.pop();//刪除最後一項 並返回
        console.log('len='+nums.length,'returnNum='+returnNum);

測試
棧 pop

棧常見應用之數制轉換

進行數制之間的相互轉換是是編程中常常碰見的問題，咱們能夠利用數組棧的這個特性來完成這個操做
DEMO

//該函數接收一個整型數字，以及要轉化的數制基數
     function mulBase(num,base){
        var numArr=[];
        do{
           numArr.push(num%base);//入棧
           num=Math.floor((num/base))
        }while(num>0);
        var converted='';
        while(numArr.length>0){
           converted+=numArr.pop();//出棧
        }
        return converted;
    }

測試
棧 進制轉換

棧常見運用之迴文判斷

迴文：迴文是指這樣的一種現象 一個單詞、短語、或者數字，從前日後寫和從後往前寫都是同樣的。例如單詞"dad"、"racecar"。
DEMO
function isPalindrome(word){

var word=''+word;
var wordArr=[];
    for(var i=0;i<word.length;i++){
        wordArr.push(word.charAt(i));//入棧
    }
var reWord='';
    while(wordArr.length>0){
        reWord+=wordArr.pop();//出棧
    }
    return reWord == word?true:false;

}
測試
迴文判斷

隊列方法

棧數據結構的訪問規則是LIFO(後進先出),而隊列數據結構的訪問規則是FIFO(先進先出),即隊列在末端添加項，在前端移除項。實現這一結構的方法是push(末端添加),shift(前端移除),前面已經說過push，接下來主要說shift

shift

shift方法可以移除數組的第一項而且返回該項，同時將數組的長度減一

DEMO

var arr=[1,2,3,4];
    var reNum=arr.shift();//1
        console.log(reNum,arr.length)//1,3

測試
shift測試

unshift

unshift與shift做用相反，在數組的前端添加任意個項，而且返回該數組的長度。

DEMO

var arr=[1,2,3,4];
var reLen=arr.unshift(0);//5
    reLen2=arr.unshift(-2,-1);//7
    console.log('reLen='+reLen,'reLen2='+reLen2,'arr='+arr)

測試
unshift測試

排序方法

數組中存在兩個直接用來排序的方法：reverse和sort，其中reverse用來逆反數組，sort則默認按照字母順序進行排序。

reverse

reverse 將對原來的數組進行反轉，並返回改變後的數組，其會改變原數組的值。

DEMO

var arr=[5,4,3,2,1];
    var reverseArr=arr.reverse();
    console.log('arr:'+arr,'reverseArr:'+reverseArr);

測試
reverse測試

sort

在默認狀況下，sort方法按照升序排列數組項，爲了實現排序，sort會調用每一個數組項的toString方法，而後比較獲得的字符串，以肯定如何進行排序。故sort方法是經過字符串進行比較的，即便數組的每一項是數字類型亦是如此。

DEMO

var sortArr=[0,1,5,10,15];
        sortArr.sort();
        console.log(sortArr);//0,1,10,15,5

測試
sort排序
爲了可以對數組進行咱們想要的排序，能夠給sort傳一個比較函數做爲參數

var sortArr=[0,1,5,10,15];
        sortArr.sort(function(a,b){
            return a-b//升序
            /*
                return b-a//降序
            */
        });
        console.log(sortArr);//[0,1,5,10,15]

測試
sort從新排序

轉換方法

全部對象都有toLocalString()、toString()、valueOf()方法。

toString

將一個值轉換成一個字符串有兩種方法，一是使用toString()方法，二是使用轉型函數String() (固然還有添加空字符串的方式)

如下幾點須要注意

  1. 幾乎全部值都有toString方法，說明有的值是沒有的，好比null、undefined
    推薦觀看toString

var num=10;
    var boolean1=true;
    var str='謙龍';
    var obj={"name":"謙龍"};
    var arr=[1,2,3,4];
    var nul=null;
    var undefined1=undefined;
    
    console.log( num.toString())
    console.log( boolean1.toString())
    console.log( str.toString())
    console.log( obj.toString())
    console.log( arr.toString())
    console.log( nul.toString())
    console.log( undefined1.toString())

測試
toString各數據類型

  1. 對於字符串類型的數值也可使用toString方法，返回值是該字符串的副本

  2. toString方法接收一個參數，表示將要轉換的數值的基數(默認是10)，注意只最數值起做用

DEMO

var num=10;
    var num2='10';
    console.log(num.toString()) // '10'
    console.log(num.toString(2))// '1010'
    console.log(num.toString(8))// '12'
    console.log(num.toString(16))//'a'
    console.log(num2.toString(2)) // '10'不是1010  只對數值起做用

測試
toString 數值

valueOf

返回指定對象的基元值。

推薦觀看valueOf
DEMO

var arr=[1,2,3,4];
var bl=true;
 function fn(){console.log('謙龍')};
var num=10;
var str='謙龍';
var obj=/\d/;
console.log(arr.valueOf(),typeof( arr.valueOf()));
console.log(bl.valueOf(),typeof( bl.valueOf()));
console.log(fn.valueOf(),typeof( fn.valueOf()));
console.log(num.valueOf(),typeof( num.valueOf()));
console.log(str.valueOf(),typeof( str.valueOf()))
console.log(obj.valueOf(),typeof( obj.valueOf()));

測試
valueOf描述

toLocalString

toLocalString方法做用幾乎和toString相同

join

將數組中的元素用不一樣的分隔符鏈接成字符串（默認是"，"號）

DEMO

var arr=[1,2,3,4,5];
        console.log(arr.join());
        console.log(arr.join(''));
        console.log(arr.join('+'))

測試
join描述

操做方法

concat

concat方法能夠基於當前數組中的全部項建立一個新的數組，具體來講：

  1. 該方法會先建立一個當前數組的副本，而後將接收到的參數添加到這個數組的末尾，最後返回新構建的數組。

  2. 若是傳遞的是一個或者多個數組，則會將這些數組中的每一項都添加到結果數組中。

  3. 若是傳遞的不是數組，這些值就會被簡單的添加到結果數組的末尾。
    DEMO

var sourceArr=[0];
    var reArr=sourceArr.concat(1,[2,3],[4,5]);
        console.log('sourceArr'+sourceArr,'reArr'+reArr);

測試
concat

slice

基於當前數組的一項或者多項建立一個新的數組，slice方法接受一個或者兩個參數。一個參數時：返回該參數指定的位置到當前數組末尾的全部項。兩個參數時：返回起始位置到結束位置之間的項（不包括結束位置而且該方法不影響原來的數組）

DEMO

var arr=[1,2,3,4,5];
    var arr2=arr.slice(0);// 0-末尾全部元素
    var arr3=arr.slice(0,3)// 0-3 不包括3的位置的元素
    var arr4=arr.slice(-3,-1);//即最後一個元素是-1 以此往左類推 因此獲得的結果是[3,4]
    console.log(arr2);
    console.log(arr3);
    console.log(arr4);

測試
slice

splice

slice方式能夠說是數組中功能最強大的方法，能夠完成任意位置的插入，刪除和替換操做

插入：能夠向任意位置插入任意數量的項，提供三個參數--插入的起始位置、0（刪除元素的個數）、插入的元素（若是要插入多個元素，再傳入第四第五...個參數），返回被刪除的項目（若是沒有被刪除的元素返回的是[]空數組）。
DEMO

var arr=[1,2,3,4,5];
    var reArr=arr.splice(1,0,'謙龍','謙龍2','謙龍3');
    console.log(arr,reArr);

splice插入
刪除：能夠刪除任意數量的項，須要指定2個參數，要刪除的第一項的位置和要刪除的項數。
DEMO

var arr=[1,2,3,4,5];
    var reArr=arr.splice(0,2);
    console.log(arr,reArr);
    
    var arr=[1,2,3,4,5];
    var reArr=arr.splice(5,2);//注意這裏的5不在數組的範圍內
    console.log(arr,reArr)

splice刪除

替換:能夠向指定的位置插入任意數量的項，且同時刪除任意數量的項，須要提供三個參數
DEMO

var arr=[1,2,3,4,5];
    var reArr=arr.splice(0,2,'謙龍');
    console.log(arr,reArr)

測試
splice刪除替換

位置方法

數組中有兩個位置方法：indexOf和lastIndexOf。都接收兩個參數---要查找的項和（可選）表示查找起點的索引。其中indexOf從數組開頭開始日後查找，lastIndexOf從後往前查找，返回值是項在數組中的位置或者-1（沒有找到）

indexOf 和 lastIndexOf

DEMO

var arr=[1,2,3,'謙龍',4,5,'謙龍',6];
    console.log(arr.indexOf('謙龍'));//3
    console.log(arr.indexOf('帥哥'));//-1
   console.log(arr.lastIndexOf('謙龍'));//6

測試
位置方法

迭代方法

ECMAScript爲數組定義了5個迭代的方法，每一個方法均可以接受兩個參數，要在每一項運行的函數和（可選）運行該函數的做用域對象---影響的是this的值。而傳入的函數有三個參數分別是：數組項的值，索引，數組自己。

forEach

對數組的每一項運行給定的函數，沒有返回值。

DEMO

var arr=[1,2,3,4,5];
        arr.forEach(function(item,index,arr){
            console.log(item,index,arr);
        })

測試
forEach測試
特別注意：除了以上的基本用法，forEach中默認的this指的是window對象，因此其能夠接受一個用來改變this的參數。
DEMO

var arr=[1,2,3,4];
arr.forEach(function(item,index,arr){
   console.log(this)
},arr);

測試
forEach this指向發生改變

map

對數組的每一項運行有返回值的函數，最後映射成一個新的數組。

DEMO

var arr=[1,2,3,4,5];
    arr.map(function(item,index,arr){
    console.log(this);
    return item*item;
    },arr)

測試
map測試

filter

有過濾篩選的含義，接收一個有返回值爲弱==true的函數，最後返回一個過濾後的新數組。關於this指向的問題與上面的forEach和map是同樣的

DEMO

var arr=[1,2,3,4,5,6,7];
    var newArr=arr.filter(function(item){
     if(item%2==0){
        return true;//返回值爲布爾
      }
      //也能夠直接寫成 return item%2;
    })
    console.log(newArr)

測試
圖片描述

every 和some

接收一個返回值爲布爾值的函數，若是對於數組中的每一項，該函數都是返回true則，該方法返回true。注意該方法和前面的幾個方法不一樣，不會返回數組，而是返回一個布爾值。some也是如此

DEMO

var arr=[1,2,3,4,5];
        var b=arr.every(function(item){
            return item%2==0?true:false;
        });
        console.log(b) 
        
        ar arr=[1,2,3,4,5];
        var b=arr.some(function(item){
            return item%2==0?true:false;
        });
        console.log(b)

測試
every some應用

減少方法

ES5中對數組新增了兩個"縮小"方法(ps:縮小是相對的)，這兩個方法都會迭代數組中的每一項，而後構建一個最終的返回值。reduce從第0項開始，ruduceRight從末尾開始。

reduce

該函數接收一個函數參數，函數接受4個參數：以前值、當前值、索引值以及數組自己。initialValue參數可選，表示初始值。若指定，則看成最初使用的previous值；若是缺省，則使用數組的第一個元素做爲previous初始值，同時current日後排一位，相比有initialValue值少一次迭代。

DEMO

var arr=[1,2,3,4];
    var sum=arr.reduce(function(pre,cur,index,arr){
        return pre+cur;
    });
    console.log(sum)

測試
reduece

// 初始設置
pre = initialValue = 1, cur = 2

// 第一次迭代
pre = (1 + 2) =  3, cur = 3

// 第二次迭代
pre = (3 + 3) =  6, cur = 4

// 第三次迭代
pre = (6 + 4) =  10, cur = undefined (退出)

reduceRight

該函數接收一個函數參數，函數接受4個參數：以前值、當前值、索引值以及數組自己。initialValue參數可選，表示初始值。若指定，則看成最初使用的previous值；若是缺省，則使用數組的第一個元素做爲previous初始值，同時current日後排一位，相比有initialValue值少一次迭代。

DEMO

var arr=[1,2,3,4];
var reNum=arr.reduceRight(function(pre,cur,idnex,arr){
return pre+cur;
})
console.log(reNum)

測試
reduceRight測試

// 初始設置
pre = initialValue = 4, cur = 3

// 第一次迭代
pre = (4 +3) =  7, cur = 2

// 第二次迭代
pre = (7 + 2) =  9, cur = 1

// 第三次迭代
pre = (9 + 1) =  10, cur = undefined (退出)
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程