js數(shù)組詳解

dmlllll 發(fā)布于2019-08-22 10:58 / 350人閱讀

摘要：將對原來的數(shù)組進行反轉(zhuǎn)，并返回改變后的數(shù)組，其會改變原數(shù)組的值。一個參數(shù)時返回該參數(shù)指定的位置到當(dāng)前數(shù)組末尾的所有項。對數(shù)組的每一項運行給定的函數(shù)，沒有返回值。測試有過濾篩選的含義，接收一個有返回值為弱的函數(shù)，最后返回一個過濾后的新數(shù)組。

數(shù)組初認(rèn)識

Array是js中的引用數(shù)據(jù)類型，除了Object外，Array幾乎是ECMAScript中最常用的數(shù)據(jù)類型了。

js中的數(shù)組與其他語言的不同之處

可以保存任意的數(shù)據(jù)類型

數(shù)組長度動態(tài)調(diào)整

棧方法

ECMAScript中提供了讓數(shù)組的行為類似于棧的方法，即可以讓數(shù)組表現(xiàn)的如同棧的LIFO數(shù)據(jù)結(jié)構(gòu)一般，方法分別是push，pop

push

用法：該方法接收任意數(shù)量的參數(shù)，把他們逐個添加到數(shù)組的末尾，并返回修改后數(shù)組的長度

DEMO

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

測試

pop

用法：該方法刪除數(shù)組最后一項，減少length的值，并且返回被刪除的元素

DEMO

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

測試

棧常見應(yīng)用之?dāng)?shù)制轉(zhuǎn)換

進行數(shù)制之間的相互轉(zhuǎn)換是是編程中經(jīng)常遇見的問題，我們可以利用數(shù)組棧的這個特性來完成這個操作
DEMO

    //該函數(shù)接收一個整型數(shù)字，以及要轉(zhuǎn)化的數(shù)制基數(shù)
     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;
    }

測試

棧常見運用之回文判斷

回文：回文是指這樣的一種現(xiàn)象一個單詞、短語、或者數(shù)字，從前往后寫和從后往前寫都是一樣的。例如單詞"dad"、"racecar"。
DEMO
function isPalindrome(word){

var word=""+word;
var wordArr=[];
    for(var i=0;i0){
        reWord+=wordArr.pop();//出棧
    }
    return reWord == word?true:false;

}
測試

隊列方法

棧數(shù)據(jù)結(jié)構(gòu)的訪問規(guī)則是LIFO(后進先出),而隊列數(shù)據(jù)結(jié)構(gòu)的訪問規(guī)則是FIFO(先進先出),即隊列在末端添加項，在前端移除項。實現(xiàn)這一結(jié)構(gòu)的方法是push(末端添加),shift(前端移除),前面已經(jīng)說過push，接下來主要說shift

shift

shift方法能夠移除數(shù)組的第一項并且返回該項，同時將數(shù)組的長度減一

DEMO

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

測試

unshift

unshift與shift作用相反，在數(shù)組的前端添加任意個項，并且返回該數(shù)組的長度。

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)

測試

排序方法

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

reverse

reverse 將對原來的數(shù)組進行反轉(zhuǎn)，并返回改變后的數(shù)組，其會改變原數(shù)組的值。

DEMO

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

測試

sort

在默認(rèn)情況下，sort方法按照升序排列數(shù)組項，為了實現(xiàn)排序，sort會調(diào)用每個數(shù)組項的toString方法，然后比較得到的字符串，以確定如何進行排序。故sort方法是通過字符串進行比較的，即使數(shù)組的每一項是數(shù)字類型亦是如此。

DEMO

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

測試

為了能夠?qū)?shù)組進行我們想要的排序，可以給sort傳一個比較函數(shù)作為參數(shù)

     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]

測試

轉(zhuǎn)換方法

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

toString

將一個值轉(zhuǎn)換成一個字符串有兩種方法，一是使用toString()方法，二是使用轉(zhuǎn)型函數(shù)String()        (當(dāng)然還有添加空字符串的方式)

以下幾點需要注意

幾乎所有值都有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())

測試

對于字符串類型的數(shù)值也可以使用toString方法，返回值是該字符串的副本

toString方法接收一個參數(shù)，表示將要轉(zhuǎn)換的數(shù)值的基數(shù)(默認(rèn)是10)，注意只最數(shù)值起作用

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  只對數(shù)值起作用

測試

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()));

測試

toLocalString

toLocalString方法作用幾乎和toString相同

join

將數(shù)組中的元素用不同的分隔符連接成字符串（默認(rèn)是"，"號）

DEMO

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

測試

操作方法 concat

concat方法可以基于當(dāng)前數(shù)組中的所有項創(chuàng)建一個新的數(shù)組，具體來說：

該方法會先創(chuàng)建一個當(dāng)前數(shù)組的副本，然后將接收到的參數(shù)添加到這個數(shù)組的末尾，最后返回新構(gòu)建的數(shù)組。

如果傳遞的是一個或者多個數(shù)組，則會將這些數(shù)組中的每一項都添加到結(jié)果數(shù)組中。

如果傳遞的不是數(shù)組，這些值就會被簡單的添加到結(jié)果數(shù)組的末尾。
DEMO

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

測試

slice

基于當(dāng)前數(shù)組的一項或者多項創(chuàng)建一個新的數(shù)組，slice方法接受一個或者兩個參數(shù)。一個參數(shù)時：返回該參數(shù)指定的位置到當(dāng)前數(shù)組末尾的所有項。兩個參數(shù)時：返回起始位置到結(jié)束位置之間的項（不包括結(jié)束位置并且該方法不影響原來的數(shù)組）

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 以此往左類推 所以得到的結(jié)果是[3,4]
    console.log(arr2);
    console.log(arr3);
    console.log(arr4);

測試

splice

slice方式可以說是數(shù)組中功能最強大的方法，可以完成任意位置的插入，刪除和替換操作

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

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

刪除：可以刪除任意數(shù)量的項，需要指定2個參數(shù)，要刪除的第一項的位置和要刪除的項數(shù)。
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不在數(shù)組的范圍內(nèi)
    console.log(arr,reArr)

替換:可以向指定的位置插入任意數(shù)量的項，且同時刪除任意數(shù)量的項，需要提供三個參數(shù)
DEMO

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

測試

位置方法

數(shù)組中有兩個位置方法：indexOf和lastIndexOf。都接收兩個參數(shù)---要查找的項和（可選）表示查找起點的索引。其中indexOf從數(shù)組開頭開始往后查找，lastIndexOf從后往前查找，返回值是項在數(shù)組中的位置或者-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為數(shù)組定義了5個迭代的方法，每個方法都可以接受兩個參數(shù)，要在每一項運行的函數(shù)和（可選）運行該函數(shù)的作用域?qū)ο?--影響的是this的值。而傳入的函數(shù)有三個參數(shù)分別是：數(shù)組項的值，索引，數(shù)組本身。

forEach

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

DEMO

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

測試

特別注意：除了以上的基本用法，forEach中默認(rèn)的this指的是window對象，所以其可以接受一個用來改變this的參數(shù)。
DEMO

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

測試

map

對數(shù)組的每一項運行有返回值的函數(shù)，最后映射成一個新的數(shù)組。

DEMO

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

測試

filter

有過濾篩選的含義，接收一個有返回值為弱==true的函數(shù)，最后返回一個過濾后的新數(shù)組。關(guān)于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

接收一個返回值為布爾值的函數(shù)，如果對于數(shù)組中的每一項，該函數(shù)都是返回true則，該方法返回true。注意該方法和前面的幾個方法不同，不會返回數(shù)組，而是返回一個布爾值。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)

測試

減小方法

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

reduce

該函數(shù)接收一個函數(shù)參數(shù)，函數(shù)接受4個參數(shù)：之前值、當(dāng)前值、索引值以及數(shù)組本身。initialValue參數(shù)可選，表示初始值。若指定，則當(dāng)作最初使用的previous值；如果缺省，則使用數(shù)組的第一個元素作為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)

測試

// 初始設(shè)置
pre = initialValue = 1, cur = 2

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

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

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

reduceRight

該函數(shù)接收一個函數(shù)參數(shù)，函數(shù)接受4個參數(shù)：之前值、當(dāng)前值、索引值以及數(shù)組本身。initialValue參數(shù)可選，表示初始值。若指定，則當(dāng)作最初使用的previous值；如果缺省，則使用數(shù)組的第一個元素作為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)

測試

// 初始設(shè)置
pre = initialValue = 4, cur = 3

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

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

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

GPU云服務(wù)器云服務(wù)器 python數(shù)組詳解 java數(shù)組詳解結(jié)構(gòu)體數(shù)組詳解 java二維數(shù)組詳解

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91539.html

相關(guān)文章

詳解js面向?qū)ο缶幊?/b>

摘要：看下面一個例子優(yōu)點使用構(gòu)造器函數(shù)的好處在于，它可以在創(chuàng)建對象時接收一些參數(shù)。按照慣例，構(gòu)造函數(shù)的函數(shù)名應(yīng)始終以一個大寫字母開頭，以區(qū)分普通函數(shù)。返回該對象的源代碼。使您有能力向?qū)ο筇砑訉傩院头椒ā? 基本概念 ECMA關(guān)于對象的定義是：無序?qū)傩缘募希鋵傩钥梢园局?、對象或者函?shù)。對象的每個屬性或方法都有一個名字，而每個名字都映射到一個值。類在現(xiàn)實生活中，相似的對象之間往往都有...

lolomaco 2019-08-21 12:30 評論0 收藏0

【連載】前端個人文章整理-從基礎(chǔ)到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0

JS判斷數(shù)組的六種方法詳解

摘要：對象構(gòu)造函數(shù)的判斷用法的每個實例都有構(gòu)造函數(shù)，用于保存著用于創(chuàng)建當(dāng)前對象的函數(shù)如上所示，的實例的跟對象是相等的那么我們就可以用此來判斷數(shù)組了原型鏈上的用法屬性表示構(gòu)造函數(shù)的原型其中有一個方法是用于測試一個對象是否存在于另一個對象的原型鏈上。在JS中，數(shù)組是屬于Object類型的，也就是屬于引用類型（引用類型存放在堆內(nèi)存中，在棧內(nèi)存會有一個或者多個地址來指向這個堆內(nèi)存）。所以對于引用...

xiaoxiaozi 2019-08-23 14:33 評論0 收藏0

Js apply()使用詳解

摘要：方法詳解我在一開始看到的函數(shù)和時非常的模糊看也看不懂最近在網(wǎng)上看到一些文章對方法和的一些示例總算是看的有點眉目了在這里我做如下筆記希望和大家分享如有什么不對的或者說法不明確的地方希望讀者多多提一些意見以便共同提高主要我是要解決一下幾個問題和 Js apply方法詳解我在一開始看到j(luò)avascript的函數(shù)apply和call時,非常的模糊,看也看不懂,最近在網(wǎng)上看到一些文章對apply...

iOS122 2019-08-26 10:22 評論0 收藏0

JS進階篇--JS數(shù)組reduce()方法詳解及高級技巧

摘要：基本概念方法接收一個函數(shù)作為累加器，數(shù)組中的每個值從左到右開始縮減，最終為一個值。例進階應(yīng)用使用方法可以完成多維度的數(shù)據(jù)疊加。在該函數(shù)內(nèi)部，則執(zhí)行多維的疊加工作。參考的內(nèi)建函數(shù)數(shù)組方法的高級技巧基本概念 reduce() 方法接收一個函數(shù)作為累加器（accumulator），數(shù)組中的每個值（從左到右）開始縮減，最終為一個值。 reduce 為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)，不包括...

jerryloveemily 2019-08-21 12:00 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

dmlllll

男|高級講師

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

TA的文章
閱讀更多

主機屋與服務(wù)器有什么關(guān)系-主機和服務(wù)器的區(qū)別是什么？

閱讀 1779·2021-09-22 15:10

軟件測試?？济嬖囶}-軟件測試面試寶典【最新】

閱讀 1273·2021-09-07 09:58

收藏 | 產(chǎn)品經(jīng)理不可不知的 7 種技術(shù)思維

閱讀 2342·2019-08-30 15:44

JS中檢查內(nèi)嵌對象是否存在

閱讀 1645·2019-08-26 18:29

學(xué)習(xí) PixiJS — 小精靈冒險

閱讀 2045·2019-08-26 13:35

JavaScript的組成結(jié)構(gòu)梳理

閱讀 767·2019-08-26 13:31

js數(shù)據(jù)類型轉(zhuǎn)化

閱讀 727·2019-08-26 11:42

webpack如何查找模塊依賴

閱讀 1073·2019-08-23 18:39

最新活動

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

js數(shù)組詳解

相關(guān)文章

詳解js面向?qū)ο缶幊?/b>

【連載】前端個人文章整理-從基礎(chǔ)到入門

**JS判斷數(shù)組的六種方法詳解**

Js apply()使用詳解

JS進階篇--JS數(shù)組reduce()方法詳解及高級技巧

發(fā)表評論

0條評論

dmlllll

男|高級講師

TA的文章

主機屋與服務(wù)器有什么關(guān)系-主機和服務(wù)器的區(qū)別是什么？

軟件測試?？济嬖囶}-軟件測試面試寶典【最新】

收藏 | 產(chǎn)品經(jīng)理不可不知的 7 種技術(shù)思維

JS中檢查內(nèi)嵌對象是否存在

學(xué)習(xí) PixiJS — 小精靈冒險

JavaScript的組成結(jié)構(gòu)梳理

js數(shù)據(jù)類型轉(zhuǎn)化

webpack如何查找模塊依賴

最新活動

資訊專欄INFORMATION COLUMN

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

js數(shù)組詳解

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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