Notes

筆記本

2016-11-20

[JavaScript] Array 陣列

[JavaScript] Array 陣列

JavaScript 陣列

陣列用於將多個值儲存於一個變數中，語法如下:

var cars = ["Lexus", "BMW", "Benz"];

 

取得陣列中的值

使用[數字]來指定陣列中的值:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];

        document.getElementById("demo").innerHTML = cars[0];
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars[0] 取得陣列中的第一個值，順序從0開始，0為第一個值，1為第二個值，2為第三個值...。

若要取得陣列中所有的值，可以不指定陣列順序，直接寫入陣列的名稱:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];

        document.getElementById("demo").innerHTML = cars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars 取得陣列中所有的值。

 

陣列的型態

在JavaScript中，陣列是一個物件，可以用typeof方法查看陣列的型態。

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];

        document.getElementById("demo").innerHTML = typeof cars;
    </script>

</body>
</html>

 

除了陣列本身，陣列中的元素也可以是物件型態或是其他任何的型態。

在顯示陣列時，JavaScript會自動將陣列轉為字串型態。

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

 

陣列的屬性與方法

join("字串")

 join()方法會將陣列所有的元素轉為字串，並在每個元素間加入指定的字串:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];

        document.getElementById("demo").innerHTML = "我的車有"+cars.join("和");
    </script>

</body>
</html>

 var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.join("和") 在陣列的各個元素間插入字串"和"。

 

 新增與移除 

pop( )

pop()方法可以將陣列中最後一個元素移除:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];
        cars.pop();
        document.getElementById("demo").innerHTML = "我的車有"+cars;
    </script>

</body>
</html>

 var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.pop() 移除陣列中最後一個元素Benz。

 

若是直接顯示pop()則會回傳最後一個元素:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];
        document.getElementById("demo").innerHTML = "我的車有"+cars.pop();
    </script>

</body>
</html>

 var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.pop() 顯示要移除的陣列中最後一個元素Benz。

 

push( )

push()方法可以在陣列的最後新增一個元素。

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];
        cars.push("Audi")
        document.getElementById("demo").innerHTML = "我的車有"+cars;
    </script>

</body>
</html>

 var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.push("Audi") 在陣列的最後新增元素"Audi"。。

 

shift( )

shift()方法可以將陣列中第一個元素移除:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];
        cars.shift();
        document.getElementById("demo").innerHTML = "我的車有"+cars;
    </script>

</body>
</html>

 var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.shift() 移除陣列中第一個元素Lexus。

若是直接顯示shift()則會回傳第一個元素:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];
        document.getElementById("demo").innerHTML = "我的車有"+cars.shift();
    </script>

</body>
</html>

 var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.pop() 顯示要移除的陣列中第一個元素Lexus。

 

unshift( )

unshift()方法可以在陣列的最前面新增一個元素:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];
        cars.unshift("Audi")
        document.getElementById("demo").innerHTML = "我的車有" + cars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.unshift("Audi") 在陣列的最前面新增元素"Audi"。

 

 變更元素 

直接指定陣列中第幾個元素變更該元素的值:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];
        cars[0] = "Audi";
        document.getElementById("demo").innerHTML = "我的車有" + cars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars[0] = "Audi" 將陣列的第一個元素值改為"Audi"。

 

利用陣列長度指定一個新增的元素:

<!DOCTYPE html>
<html>
<body>

    <p id="ArryLenght"></p>
    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];

        document.getElementById("ArryLenght").innerHTML = cars.length;

        cars[cars.length] = "Audi";

        document.getElementById("demo").innerHTML = "我的車有" + cars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.length 先讀出陣列["Lexus", "BMW", "Benz"]的長度為3。

cars[cars.length] = "Audi" 指定第3(陣列長度)個元素的值為"Audi"，因為陣列由0開始算起，所以第3個元素為新的元素。

 

 刪除元素 

直接指定陣列中第幾個元素來刪除該元素:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];

        delete cars[0];

        document.getElementById("demo").innerHTML = "我的車有" + cars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

delete cars[0] 刪除陣列中第一個元素Lexus。

 

splice( )

splice()方法可以在陣列中插入新的元素:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz"];

        cars.splice(2,0,"Audi","VOLVO");

        document.getElementById("demo").innerHTML = "我的車有" + cars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.splice(2,0,"Audi","VOLVO") 
第一個參數2表示新元素從第幾個元素插入，這裡表示元素從第三個開始插入(從0開始算起)。
第二個參數0表示要刪除的參數，這裡表示從第三個元素開始刪除0筆資料。
最後兩個參數"Audi","VOLVO"表示要新增的元素。

 

使用splice()刪除陣列中元素:

var cars = ["Lexus", "BMW", "Benz"] 定義變數cars為陣列，值包含Lexus、BMW、Benz。

cars.splice(0, 1)
第一個參數0表示新元素從第幾個元素插入，這裡表示元素從第一個開始插入(從0開始算起)。
第二個參數1表示要刪除的參數，這裡表示從第一個元素開始刪除1筆資料。
沒有指定要新增的元素，所以只會刪除第一個元素不會新增。

 Join陣列 

concat( )

 concat()方法可以將兩個陣列合併成一個新的陣列:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var garage1 = ["Lexus", "BMW", "Benz"];

        var garage2 = ["Audi", "VOLVO"];

        var Mycars = garage1.concat(garage2);

        document.getElementById("demo").innerHTML = "我的車有" + Mycars;
    </script>

</body>
</html>

var garage1 = ["Lexus", "BMW", "Benz"] 定義變數garage1為陣列，值包含Lexus、BMW、Benz。

var garage2 = ["Audi", "VOLVO"] 定義變數garage2為陣列，值包含Audi、VOLVO。

var Mycars = garage1.concat(garage2) 定義變數Mycars為陣列，值為陣列變數garage1與garage2的結合。

 

 擷取元素 

slice( )

slice()方法可以擷取陣列中的元素到新的陣列中:

<!DOCTYPE html>
<html>
<body>
    <p id="cars"></p>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"];

        var Mycars = cars.slice(1);

        document.getElementById("cars").innerHTML = cars;

        document.getElementById("demo").innerHTML = "我的車有" + Mycars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"] 定義變數cars為陣列，值包含Lexus、BMW、Benz、Audi、VOLVO。

var Mycars = cars.slice(1) 定義變數Mycars為陣列，值為陣列變數cars從第二個開始算起的元素(0為第一個)。

 

slice()方法擷取陣列中指定範圍的元素:

<!DOCTYPE html>
<html>
<body>
    <p id="cars"></p>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"];

        var Mycars = cars.slice(1,3);

        document.getElementById("cars").innerHTML = cars;

        document.getElementById("demo").innerHTML = "我的車有" + Mycars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"] 定義變數cars為陣列，值包含Lexus、BMW、Benz、Audi、VOLVO。

var Mycars = cars.slice(1,3) 定義變數Mycars為陣列，值為陣列變數cars從第二個(0為第一個)開始算起到第四個(不包含第四個)元素。

 

陣列的排序

使用陣列的排序方法，將陣列中的元素做排序。

 

sort( )

sort()方法可以將陣列做排序:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"];

        cars.sort();

        document.getElementById("demo").innerHTML = "我的車有" + cars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"] 定義變數cars為陣列，值包含Lexus、BMW、Benz、Audi、VOLVO。

cars.sort() 將陣列cars的元素依照字母大小做排序。

 

reverse( )

reverse()方法可以將陣列各元素依照原本的順序以倒序排序:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"];

        cars.reverse();

        document.getElementById("demo").innerHTML = "我的車有" + cars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"] 定義變數cars為陣列，值包含Lexus、BMW、Benz、Audi、VOLVO。

cars.reverse() 將陣列cars的元素依照原本的排序倒過來排。

 

先用sort()將陣列排序後，再用reverse()便可得到倒序排列:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"];

        cars.sort();

        cars.reverse();

        document.getElementById("demo").innerHTML = "我的車有" + cars;
    </script>

</body>
</html>

var cars = ["Lexus", "BMW", "Benz", "Audi", "VOLVO"] 定義變數cars為陣列，值包含Lexus、BMW、Benz、Audi、VOLVO。

cars.sort() 先將陣列cars的元素依照字母大小做排序。

cars.reverse() 將陣列cars的元素依照排序後的順序倒過來排。

 

數字的排序

sort()方法在排序時，會將排序的值轉為字串做排序。

在英文字母做排序時並不會有問題，但是做數字的排序時，便會產生一些問題。

如數字2與數字10做排序時會轉為字串"2"與字串"10"，"10"的開頭為1，而"2"開頭為2，因此會判斷"10"小於"2"，10會排在2的前面。

為了能讓數字正確的排序，可以使用比較函數Compare Function做比較:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var point = [1,30,2,50,100,40];

        point.sort(function (a, b) {return a - b });

        document.getElementById("demo").innerHTML = point;
    </script>

</body>
</html>

var point = [1,30,2,50,100,40] 變數point為陣列，值包含1,30,2,50,100,40。

point.sort(function (a, b) {return a - b }) 將陣列cars的元素依照字母大小做排序，sort()中(function (a, b) {return b - a }會比較數字的大小。

 

使用Compare Function做倒序:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var point = [1,30,2,50,100,40];

        point.sort(function (a, b) {return b - a });

        document.getElementById("demo").innerHTML = point;
    </script>

</body>
</html>

var point = [1,30,2,50,100,40] 變數point為陣列，值包含1,30,2,50,100,40。

point.sort(function (a, b) {return b - a }) 將陣列cars的元素依照字母大小做排序，sort()中(function (a, b) {return a - b }會比較數字的大小。

 

Compare Function

function(a, b){return a-b}

Compare Function會依照參數回傳正數、負數、零，用來定義排序的順序。

當sort()方法比較值的大小做排序時，會將要比較的值傳給Compare Function，並回傳比較結果(正數、負數、零)。

例如，比較陣列中的值50和100時，sort()方法會將值作為參數呼叫Compare Function(50,100)。

Compare Function會計算50-100=-50，並回傳值-50。sort()方法變會將50排序為小於100。

下面例子比較直接用sort()排序與使用Compare Function做排序:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>
    <p id="demo2"></p>

    <script>
        var point = [1, 30, 2, 50, 100, 40];

        point.sort();
        document.getElementById("demo").innerHTML ="sort直接排序:"+ point;

        point.sort(function (a, b) {return a - b });
        document.getElementById("demo2").innerHTML = "sort與Compare Function排序:" + point;
    </script>

</body>
</html>

var point = [1,30,2,50,100,40] 變數point為陣列，值包含1,30,2,50,100,40。

point.sort() sort()排序。順序為1,100,2,30,40,50。

point.sort(function (a, b) {return a - b }) sort()中(function (a, b) {return a - b }會將陣列中的數字相減比較大小。順序為1,2,30,40,50,100。

 

 隨機排序 

Compare Function與Math.random()將陣列中的元素隨機排序:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var point = [1, 30, 2, 50, 100, 40];

        point.sort(function (a, b) {return 0.5-Math.random()});

        document.getElementById("demo").innerHTML =point;
    </script>

</body>
</html>

var point = [1,30,2,50,100,40] 變數point為陣列，值包含1,30,2,50,100,40。

function (a, b) {return 0.5-Math.random() } Math.random()會隨機取0~1之間的小數，返回0.5-(隨機0~1)的正負數。

 

 取陣列中最大數 

先將陣列的順序由大到小排序，再取出陣列中第一個值:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var point = [1, 30, 2, 50, 100, 40];

        point.sort(function (a, b) {return b-a });

        document.getElementById("demo").innerHTML =point[0];
    </script>

</body>
</html>

var point = [1,30,2,50,100,40] 變數point為陣列，值包含1,30,2,50,100,40。

point.sort(function (a, b) {return b - a }) 將陣列point的元素由大到小排序。

point[0] 取出陣列中第一個值。

若要取最小數值則可以用function (a, b) {return a - b }，由小排序到大，再取陣列中第一個值。

 

 陣列中的物件排序 

在JavaScript中的陣列常會有物件的元素，以下為陣列中物件的排序:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var point = [
            {Name:"Berry",Age:18},
            {Name:"Hanna",Age:18},
            {Name:"Jason",Age:25},
            {Name:"Eason",Age:50},
            {Name:"Wendy",Age:30}
        ];

        point.sort(function (a, b) {return a.Age-b.Age });

        document.getElementById("demo").innerHTML =
              point[0].Name + " " + point[0].Age + "<br>" +
              point[1].Name + " " + point[1].Age + "<br>" +
              point[2].Name + " " + point[2].Age + "<br>" +
              point[3].Name + " " + point[3].Age + "<br>" +
              point[4].Name + " " + point[4].Age;
    </script>

</body>
</html>

var point 定義一個變數point為陣列，其內容為陣列型態。

point.sort(function (a, b) {return a.Age-b.Age }) 使用Compare Function比較物件屬性Age的大小，並做排序。

 

 陣列中的字串排序 

陣列中物件字串的排序:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var point = [
            {Name:"Berry",Age:18},
            {Name:"Hanna",Age:18},
            {Name:"Jason",Age:25},
            {Name:"Eason",Age:50},
            {Name:"Wendy",Age:30}
        ];

        function Myfunction() {
            point.sort(function (a, b)
            {
                var x = a.Name.toLowerCase();
                var y = b.Name.toLowerCase();
                if (x < y) { return -1; }
                if (x > y) { return 1; }
                return 0;
            }
            );
        }

        point.sort(Myfunction());

        document.getElementById("demo").innerHTML =
              point[0].Name + " " + point[0].Age + "<br>" +
              point[1].Name + " " + point[1].Age + "<br>" +
              point[2].Name + " " + point[2].Age + "<br>" +
              point[3].Name + " " + point[3].Age + "<br>" +
              point[4].Name + " " + point[4].Age;
    </script>

</body>
</html>

var point 定義一個變數point為陣列，其內容為陣列型態。

function Myfunction() 建立一個function來判斷陣列排序。

var x = a.Name.toLowerCase() 將物件屬性Name轉為小寫，並定義為變數x。

var y = b.Name.toLowerCase() 將物件屬性Name轉為小寫，並定義為變數y。

if (x < y) { return -1; } 要是變數x小於變數y，則返回-1。

if (x > y) { return 1; } 要是變數x大於變數y，則返回1。

return 0 若是變數x等於變數y，則返回0。

point.sort(Myfunction()) 將sort()方法中加入Myfunction做判斷。

 

 END 

回目錄 

系列文章

本頁段落

標籤雲

最新留言