JavaScript語法基礎：數組的經常使用方法詳解

時間  2019-11-09
標籤 javascript 語法 基礎 數組 經常 使用方法 詳解 欄目 JavaScript 简体版
原文   原文鏈接

本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。javascript

如下是正文。html

數組的定義

以前學習的數據類型，只能存儲一個值（字符串爲一個值）。若是咱們想存儲多個值，就可使用數組。前端

數組的定義

（1）字面量定義。舉例：java

var arr = [1,2,3];

（2）對象定義（數組的構造函數）。格式：git

var arr = new Array(參數);

參數位置是一個數值時，表示數組長度；多個數值時，表示數組中的元素。github

數組的操做

一、求數組的長度：算法

數組的長度 = 數組名.length；

能夠經過修改數組的長度來改變數組中元素的個數，若是改小了，數組將從後面刪除元素。（僞數組arguments的長度能夠修改，可是不能修改裏面的元素，後面單獨講）編程

二、獲取數組中的元素：api

數組中的指定元素 = 數組名[索引值];

數組的索引表明的是數組中的元素在數組中的位置，從0開始。數組

若是索引值有誤（好比元素沒那麼多），系統不報錯，而是會給定值爲undefined。

遍歷數組（重要）

遍歷數組即：獲取並操做數組中的每個元素。

舉例：

var arr = ["生命壹號","許嵩","永不止步"];
        for(var i = 0;i<arr.length;i++){
            console.log(arr[i]);  // arr[i]表明的是數組中的每個元素i
        }

        console.log(arr);

打印結果：

數組Array的經常使用方法

Array數組是屬於內置對象，咱們能夠在下面的網站上查詢各類方法。

Array有各類api接口（Application Programming Interface，應用程序編程接口），下面分別介紹。

（1）判斷是否爲數組：instanceof

布爾類型值 = A instanceof B;

解釋：判斷A是否爲B類型（instanceof 是一個關鍵字）。

在數組裏，這種方法已經用的很少了，由於有下面這種方法。

（2）判斷是否爲數組：isArray()

布爾類型值 = Array.isArray(被檢測的值) ;

PS：屬於HTML5中新增的方法。

（3）轉換數組：toString()

字符串 = 數組.toString();

解釋：把數組轉換成字符串，每一項用,分割。

（4）返回數組自己：valueOf()

數組自己 = 數組.valueOf();

這個方法的意義不大。由於咱們指直接寫數組對象的名字，就已是數組自己了。

（5）將數組中的元素用符號鏈接成字符串：join()

字符串 = 數組.join(參數);

參數決定用什麼符號進行鏈接。若是不寫參數，則和toString()的效果一致。

舉例：

var arr = ["生命壹號","許嵩","棒棒噠"];

    console.log(arr.join());    //無參數
    console.log(arr.join(" ")); //用空格進行鏈接
    console.log(arr.join(""));  //用空字符串進行鏈接
    console.log(arr.join("&")); //用符號"&"進行鏈接

打印結果：

生命壹號,許嵩,棒棒噠

    生命壹號 許嵩 棒棒噠

    生命壹號許嵩棒棒噠

    生命壹號&許嵩&棒棒噠

join方法有必定的實際用途：當咱們須要把一堆字符串進行鏈接時，咱們能夠把他們轉換成數組，而後調用數組的join()方法。這樣作有個好處是：內存不會溢出。

僞數組：arguments

arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。

（1）返回函數實參的個數：arguments.length

舉例：

fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b) {
        console.log(arguments);
        console.log(fn.length);         //獲取形參的個數
        console.log(arguments.length);  //獲取實參的個數

        console.log("----------------");
    }

打印結果：

（2）返回正在執行的函數：arguments.callee

在使用函數遞歸調用時，推薦使用arguments.callee代替函數名自己。

（3）之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。舉例：

fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b) {
        arguments[0] = 99;  //將實參的第一個數改成99
        arguments.push(8);  //此方法不經過，由於沒法增長元素
    }

數組的添加和刪除

（1）push()：在數組最後面插入項，返回數組的長度

數組改後的長度 = 數組.push(元素);

（2）pop()：取出數組中的最後一個元素，返回被刪除的元素

被刪除的元素 = 數組.pop();

（3）unshift()：在數組最前面插入項，返回數組的長度

數組改後的長度 = 數組.unshift(元素);

（4）shift()：取出數組中的第一個元素，返回被刪除的元素

被刪除的元素 = 數組.shift();

數組的反轉和排序

（1）reverse()：翻轉數組（返回值是反轉後的數組，並且原數組也已經被反轉了）

反轉後的數組  =  數組.reverse();

舉例：

var arr = ["a","b","c","d","e","f"];

    console.log(arr);              //反轉前打印
    console.log(arr.reverse());    //反轉
    console.log(arr);              //反轉後打印

打印結果：

注意：反轉後，打印原來的數組發現，原來的數組已經被反轉了。

（2）sort()：給數組排序，返回排序後的數組（排序的規則看參數）

從小到大排序後的數組 = 數組.sort(function(a,b){
                                      return a-b;
    });

  • 無參：按照數組元素的首字符對應的Unicode編碼值，從小到大排列數組元素。

  • 帶參：必須爲函數（回調函數：callback）。這個回調函數中帶有兩個參數，表明數組中的先後元素。
    • 若是返回值（a-b）爲負數，a排b前面。
    • 若是返回值（a-b）等於0，不動。
    • 若是返回值（a-b）爲正數，a排b後面。

上面的這個帶參的排序，實際上是調用了底層的冒泡排序，小的排前面，大的排後面。

PS：sort方法的功能很是強大，能對數字和字母進行排列。

數組的一些其餘方法

（1）concat() ：把參數拼接到當前數組（原數組不會被修改）

新數組 = 數組1.concat(數組2);

舉例：

var arr1 = [1,2,3];
    var arr2 = ["a","b","c","d","e","f"];

    console.log(arr1.concat(arr2));  //把參數拼接到當前數組
    console.log(arr1);
    console.log(arr2);

打印結果：

從打印結果中能夠看到，原數組（數組一、數組2）並無被修改。

（2）slice()：從當前數組中截取一個新的數組（不影響原來的數組）

新數組 = 原數組.slice(開始位置index，結束位置index);    //注意：索引值包括左邊的，不包括右邊的

舉例：

var arr = ["a","b","c","d","e","f"];

    console.log(arr.slice(2));  //從第二個值開始截取
    console.log(arr.slice(2,4));  //截取從第二個到第四個之間的值（不包括第四個值）
    console.log(arr.slice(-2)); //截取最後兩個值
    console.log(arr.slice(4,2));  //空

打印結果：

（3）splice()：刪除當前數組的某些元素（原數組會被改變）

新數組 = 數組1.splice(起始索引index，須要操做的個數，彌補的值);

舉例：

var arr11 = ["a","b","c","d","e","f"];
    var arr12 = arr11.splice(1);    //從第一個位置開始，刪除元素
    console.log("原數組："+arr11);
    console.log("新數組："+arr12);
    console.log("-----------");

    var arr21 = ["a","b","c","d","e","f"];
    var arr22 = arr21.splice(1,3);    //從第一個元素開始刪除，一共刪除3個元素
    console.log(arr21);
    console.log(arr22);

打印結果：

PS：第三個參數不多用，這裏先不講。

（3）獲取數據的索引：indexOf()、lastIndexOf()

  • indexOf()：從前日後索引

  • lastIndexOf() ：從後往前索引

索引值 = 數組.indexOf/lastIndexOf(數組中的元素內容);

PS：若是沒找到返回-1。

舉例：

var arr = ["a","b","c","d","e","d","c"];

    console.log(arr.indexOf("c"));       //從前日後，找"c"在哪一個位置
    console.log(arr.lastIndexOf("d"));   //從前日後，找"d"在哪一個位置

打印結果：

數組迭代方法

數組迭代方法包括：every()、filter()、forEach()、map()、some()

PS：這幾個方法不會修改原數組。

語法格式：

數組/boolean/無 = 數組.every/filter/forEach/map/some(
                            function(element,index,arr){
                                            程序和返回值；

有了這幾種方法，就能夠替代一些for循環了。下面依次來介紹。

every()方法

解釋：對數組中每一項運行回調函數，若是都返回true，every就返回true；若是有一項返回false，則中止遍歷，此方法返回false。

注意：every()方法的返回值是boolean值，參數是回調函數。

舉例：

var arr1 = ["千古", "宿敵", "南山憶", "素顏"];
    var bool1 = arr1.every(function (element, index, array) {
        if (element.length > 2) {
            return false;
        }
        return true;
    });
    console.log(bool1);  //輸出結果：false。只要有一個元素的長度是超過兩個字符的，就返回false

    var arr2 = ["千古", "宿敵", "南山", "素顏"];
    var bool2 = arr2.every(function (element, index, array) {
        if (element.length > 2) {
            return false;
        }
        return true;
    });
    console.log(bool2);  //輸出結果：true。由於每一個元素的長度都是兩個字符。

some()方法

解釋：對數組中每一項運行回調函數，只要有一項返回true，則中止遍歷，此方法返回true。

filter()方法

解釋：對數組中每一項運行回調函數，該函數返回結果是true的項，將組成新的數組（返回值就是這個新的數組）。

var arr1 = ["千古", "宿敵", "南山憶", "素顏"];

    var arr2 = arr1.filter(function (element, index, array) {
        if (element.length > 2) { //arr1中的元素，若是是長度超過2個字符的，我就把它放到arr2中去
            return true;
        }
        return false;
    });
    console.log(arr1);
    console.log(arr2);

結果：

forEach()方法

解釋：遍歷數組。

注意：無返回值，純粹操做數組中的元素，因此應用場景並很少。

map()方法

解釋：對數組中每一項運行回調函數，返回該函數的結果，組成的新數組（返回值就是這個新的數組）。

舉例：

var arr1 = ["千古", "宿敵", "南山憶", "素顏"];

    var arr2 = arr1.map(function (element, index, array) {
        return element + "vae";  //給arr1中全部的元素增長字符串"vae"，放到arr2中。
    });

    console.log(arr1);
    console.log(arr2);

結果：

清空數組

清空數組，有如下幾種方式：

var array = [1,2,3,4,5,6];

    array.splice(0);      //方式1：刪除數組中全部項目
    array.length = 0;     //方式1：length屬性能夠賦值，在其它語言中length是隻讀
    array = [];           //方式3：推薦

數組練習

練習1

問題：將一個字符串數組輸出爲|分割的形式，好比「千古|宿敵|素顏」。使用兩種方式實現。

答案：

方式1：（不推薦）

var arr = ["千古","宿敵","素顏"];
    var str = arr[0];
    var separator = "|";
    for(var i = 1;i< arr.length;i++) {
        str += separator+arr[i];    //從第1個數組元素開始，每一個元素前面加上符號"|"
    }

    console.log(str);

輸出結果：

不推薦這種方式，由於：因爲字符串的不變性，str拼接過多的話，容易致使內存溢出（不少個str都堆放在棧裏）。

方式2：（推薦。經過array數組自帶的api來實現）

var arr = ["千古","宿敵","素顏"];

    console.log(arr.join("|"));

結果：

練習2

題目：將一個字符串數組的元素的順序進行反轉，使用兩種種方式實現。提示：第i個和第length-i-1個進行交換。

答案：

方式1：

function reverse(array) {
       var newArr = [];
       for (var i = array.length - 1; i >= 0; i--) {
           newArr[newArr.length] = array[i];
       }
       return newArr;
   }

方式2：（算法裏比較常見的方式）

function reverse(array){
       for(var i=0;i<array.length/2;i++){
           var temp = array[i];
           array[i] = array[array.length-1-i];
           array[array.length-1-i] = temp;
       }
       return array;
   }

方式3：（數組自帶的reverse方法）

如今咱們學習了數組自帶的api，咱們就能夠直接使用reverse()方法。

練習3

問題：針對工資的數組[1500,1200,2000,2100,1800]，把工資超過2000的刪除。

答案：

var arr1 = [1500, 1200, 2000, 2100, 1800];

    var arr2 = arr1.filter(function (ele, index, array) {
        if (ele < 2000) {
            return true;
        }
        return false;
    })
    console.log(arr1);
    console.log(arr2);

結果：

練習4

問題：編寫一個方法去掉一個數組中的重複元素。

分析：建立一個新數組，循環遍歷，只要新數組中有老數組的值，就不用再添加了。

答案：

//    編寫一個方法 去掉一個數組的重複元素
    var arr = [1,2,3,4,5,2,3,4];
    console.log(arr);
    var aaa = fn(arr);
    console.log(aaa);
    //思路：建立一個新數組，循環遍歷，只要新數組中有老數組的值，就不用再添加了。
    function fn(array){
        var newArr = [];
        for(var i=0;i<array.length;i++){
            //開閉原則
            var bool = true;
            //每次都要判斷新數組中是否有舊數組中的值。
            for(var j=0;j<newArr.length;j++){
                if(array[i] === newArr[j]){
                    bool = false;
                }
            }
            if(bool){
                newArr[newArr.length] = array[i];
            }
        }
        return newArr;
    }

個人公衆號

想學習代碼以外的軟技能？不妨關注個人微信公衆號：生命團隊（id：vitateam）。

掃一掃，你將發現另外一個全新的世界，而這將是一場美麗的意外：

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