javascript基礎（陣列）（十九）
1.陣列簡介：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 陣列（Array）
* - 陣列也是一個物件，功能和普通物件（Object）的功能類似的
* - 陣列中也可以儲存不同的元素，不同的是普通物件是通過一個字串作為屬性名來操作屬性的，
* 而陣列是通過索引來操作元素的。
* - 索引（index）
* - 索引就是從0開始的整數
* - 陣列比普通物件的儲存效率要高，在開發中我們經常使用陣列來儲存一些資料
*/
//建立一個陣列物件
var arr = new Array();
//使用typeof檢查一個陣列物件時會返回object
//console.log(typeof arr);
/*
* 向陣列中新增元素
* - 語法：
* 陣列[索引] = 值;
*/
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
arr[3] = 40;
arr[4] = 30;
arr[10] = 300;
arr[78] = 300;
/*
* 讀取陣列中的元素
* - 語法：
* 陣列[索引]
*/
//如果讀取一個陣列中沒有的元素，會返回undefined
//console.log(arr[4]);
//獲取陣列的長度
/*
* length
* - length屬性可以獲取或設定陣列的長度
* - 對於連續的陣列通過length屬性獲取到的就是陣列中元素的個數
* - 對於非連續的陣列length屬性獲取到的就是陣列的最大索引+1（不要使用非連續陣列）
*/
//console.log(arr.length);//獲取陣列的長度
//修改陣列的length屬性
//如果將長度修改為小於之前的長度的值，則多餘的部分會被刪除
arr.length = 5;
//如果將長度修改為大於之前的長度的值，則會陣列中會建立出空的元素
//arr.length = 10;
//向陣列的最後新增一個元素
//語法：陣列[陣列.length] = 值;
arr[arr.length] = 55;
arr[arr.length] = 75;
arr[arr.length] = 85;
console.log(arr);
</script>
</head>
<body>
</body>
</html>
2.字面量陣列：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 陣列的字面量
*/
//var arr = new Arry();
var arr = [] ;
//console.log(arr instanceof Array);
/*
* 使用字面量，可以在建立陣列的同時，向陣列中新增元素
* 語法：
* var 陣列 = [元素1,元素2...元素N];
*/
arr = [1,2,3,4,5,6,7];
//console.log(arr[6]);
arr = new Array(1,2,3,4,5,6,7);
arr = [10];//建立一個陣列並向陣列中新增一個元素
arr = new Array(10);//建立一個長度為10的陣列
//console.log(arr.length);
/*
* 在陣列中可以儲存任意型別的元素
*/
arr = [1,"hello",true,null,undefined,{name:"孫悟空"},function(){}];
//console.log(arr[5].name);
//console.log(arr[6]);
//陣列中也可以儲存陣列，如果陣列中儲存的依然是陣列，則我們稱這個陣列為二維陣列
arr = [
[1,2,3],
[4,5,6],
[5,6,7]
];
console.log(arr[0][1]);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 建立一個陣列
*/
var arr = ["孫悟空","豬八戒","沙和尚"];
/*
* push()
* - 該方法可以用來向陣列的末尾新增新的元素,並返回陣列的新的長度
*/
//console.log(arr);
var result = arr.push("唐僧","白骨精","蜘蛛精");
//console.log(arr);
//console.log("result = "+result);
/*
* pop()
* - 用來刪除並返回陣列的最後一個元素
* - 元素刪除以後，會自動修正陣列的長度
*/
result = arr.pop();
result = arr.pop();
//console.log(arr);
//console.log("result = "+result);
/*
* unshift()
* - 向陣列的最前邊新增元素，並返回新的長度
*/
result = arr.unshift("牛魔王","鐵扇公主");
console.log(arr);
//console.log("result = "+result);
/*
* shift()
* - 刪除陣列最前邊的元素，並返回被刪除的元素
* - 刪除完元素以後，會自動調整陣列的長度
*/
result = arr.shift();
result = arr.shift();
console.log(arr);
console.log("result = "+result);
console.log(arr.length);
</script>
</head>
<body>
</body>
</html>
4.遍歷陣列:
方式一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 建立一個陣列
*/
var arr = ["孫悟空","豬八戒","沙和尚","唐僧","白骨精","蜘蛛精"];
/*
* 遍歷陣列
* - 遍歷陣列就是指將陣列中的每一個元素都獲取到
* - 一般情況下遍歷陣列都是使用for迴圈來遍歷
*/
for(var i = 0 ; i < arr.length ; i++ ){
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["孫悟空","豬八戒","沙和尚","唐僧"];
/*
* 也可以使用forEach()來遍歷陣列
* forEach()中需要一個函式作為引數
* - 像這種由我們定義而不由我們呼叫的函式，我們稱為回撥函式
* - forEach()中的回撥函式，由瀏覽器呼叫，
* 陣列中有幾個元素函式就會被呼叫幾次，
* 每次遍歷到一個元素都會呼叫一次函式，瀏覽器會通過實參的形式來將遍歷到內容傳遞進函式
* - 瀏覽器在呼叫回撥函式傳遞了三個實參：
* 第一個引數：正在遍歷的元素
* 第二個引數：正在遍歷的元素的索引
* 第三個引數：正在遍歷的陣列物件
*
* - forEach()方法不支援IE8及以下的瀏覽器，所以如果需要相容IE8則不要使用
*
*/
arr.forEach(function(value , index , obj){
console.log("value = "+value + " index = "+index+" obj = "+obj);
});
</script>
</head>
<body>
</body>
</html>
5.練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person(name , age){
this.name = name;
this.age = age;
}
//向原型中新增toString
Person.prototype.toString = function(){
return "Person[name="+this.name+", age="+this.age+"]";
};
//建立幾個Person的例項
var per1 = new Person("孫悟空",18);
var per2 = new Person("豬八戒",28);
var per3 = new Person("白骨精",16);
var per4 = new Person("蜘蛛精",14);
var per5 = new Person("紅孩兒",8);
var per6 = new Person("奔波霸",58);
//將這些物件儲存到一個陣列中
var perArr = [per1 , per2 , per3 , per4 , per5 , per6];
//對perArr陣列進行遍歷，並將其中成年人的資訊輸出
for(var i=0 ; i<perArr.length ; i++){
//判斷是否是成年人
if(perArr[i].age > 17){
console.log(perArr[i]);
}
}
</script>
</head>
<body>
</body>
</html>
6.陣列方法：slice（），splice（）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["孫悟空","豬八戒","沙和尚","唐僧"];
/*
* slice()
* - 可以用來擷取陣列中的指定元素
* - 引數：
* 第一個引數，擷取開始的位置(包括開始的位置)
* 第二個引數，擷取結束的位置(不包括結束的位置)
* - 該方法不會影響到原陣列，而是將擷取到的內容封裝為一個新的陣列返回
* - 可以傳遞一個負數作為引數，如果是負數，則從後往前數
* -1 表示 倒數第一
* -2 表示 倒數第二
* - 如果省略第二個引數，則從開始位置一直擷取到最後
*/
var result = arr.slice(1,3);
result = arr.slice(1,-2);
result = arr.slice(1);
//console.log(result);
/*
* splice()
* - 可以用來刪除陣列中的元素，並新增新元素
* - 它會影響到原陣列，一旦執行原陣列中的元素將會被刪除
* - 引數：
* 第一個引數，開始位置的索引
* 第二個引數，表示刪除的個數
* 第三個引數，這個方法還可以傳遞多個引數
* 在第三個引數以後，可以跟多個元素作為引數，
* 這些元素將會被插入到開始位置之前的位置
* - 它會將被刪除的元素作為返回值返回
*
*/
arr = ["孫悟空","豬八戒","沙和尚","唐僧"];
//result = arr.splice(0,1);
//牛魔王替換 索引為0的元素
//result = arr.splice(0,1,"牛魔王");
//arr.splice(2,1,"牛魔王","紅孩兒","二郎神");
arr.splice(2,0,"牛魔王","紅孩兒","二郎神");
console.log(arr);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//建立一個陣列
var arr = [1,2,3,1,1,1,4,2,3,5];
//去除呼叫陣列中重複的數字
//獲取陣列中的數字
for(var i=0 ; i<arr.length ; i++){
//console.log(arr[i]);
//再次遍歷陣列
for(var j=i+1 ; j<arr.length ; j++){
//console.log("----->" + arr[j]);
//比較兩個數字是否相等
if(arr[i] == arr[j]){
//進入判斷，證明兩個數字重複，則刪除arr[j]
arr.splice(j,1);
//需要在此位置在比較一次
j--;
}
}
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
7.陣列的其他方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["孫悟空","豬八戒"];
var arr2 = ["白骨精","蜘蛛精"];
var arr3 = ["太上老君","如來佛祖"];
/*
* concat()
* - 可以用來連線兩個或多個陣列
* - 不會影響原陣列，而是將新的陣列的返回
* - 可以將多個陣列作為concat引數傳遞，也可以傳遞單個的元素
*/
var result = arr.concat(arr2 , arr3 , "唐僧");
//console.log(result);
/*
* join()
* - 可以將陣列中的所有的元素連線為一個字串
* - 該方法可以接收一個字串作為引數，這個字串將會將會作為連線符來連線元素
* 如果不傳，預設使用,
*/
arr = ["孫悟空","豬八戒","沙和尚"];
result = arr.join("@-@");
//console.log(result);
/*
* reverse()
* - 該方法可以用來反轉陣列
* - 前邊的去後邊，後邊的去前邊
* - 它會影響到原陣列，直接在原陣列上反轉
*/
//arr.reverse();
//console.log(arr);
/*
* sort()
* - 可以用來對陣列中的元素進行排序
* - sort()會影響到原陣列
* - 預設它會按照元素的Unicode編碼進行排序
* - 如果希望使用sort對一個數字型的陣列進行排序可能會得到不可預期的結果
* 因為它同樣也會按照數字的Unicode編碼進行排序
* - 我們也可以自己來指定排序的規則
*
*/
var arr4 = ["a","c","b","e","d","f"];
arr4.sort();
//arr4 = [2,3,10,5,4,6];
/*
* 如果需要自定義排序規則，需要將一個函式作為引數傳遞給sort()方法
* 函式的結構：function(a , b){}
*
* 瀏覽器會多次以陣列中的元素作為實參來呼叫該函式，
* a和b具體是誰不確定，但是a一定是在b前邊
* 瀏覽器將會根據函式的返回值，來決定兩個元素是否互動位置
* 如果返回一個大於0的值，則兩個元素互相交換位置
* 如果返回一個等於0的值，則證明兩個元素相等，位置不變
* 如果返回一個小於0的值，兩個元素的位置也不變
*
*/
arr4 = [10,4,3,5,2];
arr4.sort(function(a,b){
/*//升序 小 ---> 大
if(a > b){
//交換位置
return 1;
}else if(a == b){
return 0;
}else{
return -1;
}*/
//降序 大 ---> 小
/*if(a > b){
//交換位置
return -1;
}else if(a == b){
return 0;
}else{
return 1;
}*/
//如果希望升序排列，則 返回 a-b
//return a - b;
//如果希望降序排列，則 返回 b-a
return b - a;
});
console.log(arr4);
</script>
</head>
<body>
</body>
</html>
相關文章
- JavaScript基礎——使用陣列JavaScript陣列
- JavaScript基礎（五）陣列JavaScript陣列
- javaScript學習基礎篇(1)(陣列)JavaScript陣列
- JavaScript基礎總結（三）——陣列總結JavaScript陣列
- JavaSE基礎:陣列Java陣列
- [shell基礎]——陣列陣列
- 陣列基礎使用陣列
- javascript基礎（dom增刪改）（二十九）JavaScript
- golang基礎之陣列Golang陣列
- 樹狀陣列基礎陣列
- NumPy 基礎 (一) - 建立陣列陣列
- JAVA基礎--二維陣列Java陣列
- Java 基礎（十九）代理Java
- 林大媽的JavaScript基礎知識（三）：JavaScript程式設計（4）陣列JavaScript程式設計陣列
- NumPy 基礎 (二) - 陣列運算陣列
- Go 基礎教程--6 陣列 ArrayGo陣列
- Go 基礎教程--5 陣列 ArrayGo陣列
- 【重溫基礎】10.陣列陣列
- java基礎(十) 陣列型別Java陣列型別
- [基礎問題] 陣列賦值陣列賦值
- C語言基礎-1、陣列C語言陣列
- 6-Java基礎語法-陣列之一維陣列Java陣列
- JavaScript 陣列JavaScript陣列
- Javascript - 陣列和陣列的方法JavaScript陣列
- JavaSE基礎語法3-陣列Java陣列
- JS-陣列基礎知識3JS陣列
- 零基礎學Java（8）陣列Java陣列
- 【Java基礎】--演算法與陣列Java演算法陣列
- JavaScript 陣列slice()JavaScript陣列
- JavaScript 陣列indexOf()JavaScript陣列Index
- JavaScript 陣列values()JavaScript陣列
- JavaScript 陣列fill()JavaScript陣列
- JavaScript 陣列 slice()JavaScript陣列
- JavaScript 陣列 fill()JavaScript陣列
- JavaScript 陣列 lastIndexOf()JavaScript陣列ASTIndex
- JavaScript 陣列 indexOf()JavaScript陣列Index
- javascript陣列操作JavaScript陣列
- JavaScript陣列（二）JavaScript陣列