[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>