數組
-
-
- 一、什麼是數組？
- 二、數組的好處？
- 三、數組元素
- 四、數組下标
- 五、數組屬性
- 六、如何聲明數組
- 七、如何給數組指派
- 八、數組方法（增删改截拼複排轉）
-
- 1.增
-
- 前增unshift
- 後增push
- 2.删
-
- 前删shift()
- 後删pop()
- 3.改splice
- 4.截slice
- 5.拼concat
- 6.複（面試題 ：要求至少寫出兩種複制數組的方法）
- 7.排reverse() sort()
- 8.轉toString() join
- 總結 不影響原數組的方法：截、拼、轉
- 九、整數數組、字元串數組、對象數組、二維數組、多元數組
- 十、for in （隻能周遊對象）
- 十一、冒泡排序
- 應用案例
-
一、什麼是數組？
存儲一組或一系列相關資料的容器。
二、數組的好處？
數組集中管理，提高性能
三、數組元素
存儲在數組中的資料
四、數組下标
能夠唯一辨別一個容器的索引号
下标從0開始，到數組的長度減1.
五、數組屬性
length：數組長度
六、如何聲明數組
-
字面量 ：[]
無論[]中寫什麼，都是這個數組的元素。
-
構造函數的方式：new Array()
（1）如果僅有一個參數且是正整數時，表示這個數組的長度
（2）如果僅有一個參數且是小數或者是負數時，會報錯
（3）如果有多個參數或者是非數字類型（寫的時候要加引号），則表示數組元素。
七、如何給數組指派
- 初始化數組
-
先聲明，後指派
注：操作數組空間，都要使用循環周遊數組（記得下标從0開始周遊）
八、數組方法（增删改截拼複排轉）
1.增
前增unshift
unshift(元素，元素，……)
作用：在數組的前面增加元素（一個數組按一個元素增加）
傳回值：新增後數組的長度
是否會影響原對象：是
var arr = [true,false,null];
console.log(arr.unshift(9,8,7,[6,5,4],3)); //8
console.log(arr);//[9,8,7,[6,5,4],3,true,false,null]
後增push
push(元素,元素,……)
作用：在數組的後面增加元素（一個數組按一個元素增加）
傳回值：新增後數組的長度
是否會影響原對象：是
var arr = [true,false,null];
console.log(arr.push(9,8,7,[6,5,4],3)); //8
console.log(arr);//[true,false,null,9,8,7,[6,5,4],3]
2.删
前删shift()
shift()
作用：删除數組前面的一個元素（一次隻能删除一個元素）
傳回值：被删除的元素
是否會影響原數組：是
var arr = [true,false,null];
console.log(arr.shift()); //true
console.log(arr);//[false,null]
後删pop()
pop()
作用：删除數組後面的一個元素（一次隻能删除一個元素）
傳回值：被删除的元素
是否會影響原數組：是
var arr = [true,false,null];
console.log(arr.pop()); //null
console.log(arr);//[true,false]
3.改splice
splice(start,dellength,ele,ele,ele,……)
作用：可以在數組的任意位置進行增、删、改的操作。
傳回值：被删除的元素數組
是否會影響原數組：是
var arr = [1,2,3,4,5,6,7,8,9,99];
console.log(arr.splice(5)); //[6, 7, 8, 9, 99]
console.log(arr);// [1, 2, 3, 4, 5]
var arr = [1,2,3,4,5,6,7,8,9,99];
console.log(arr.splice(5,2)); //[6, 7]
console.log(arr);// [1, 2, 3, 4, 5, 8, 9, 99]
var arr = [1,2,3,4,5,6,7,8,9,99];
console.log(arr.splice(5,2,true)); //[6, 7]
console.log(arr);// [1, 2, 3, 4, 5, true,8, 9, 99]
4.截slice
slice(start,end)
作用：截取數組中的部分元素。
傳回值：截取到的新數組
是否會影響原數組：否
var arr = [1,2,3,4,5,6,7,8,9,99];
console.log(arr.slice(4)); //[5, 6, 7, 8, 9, 99]
console.log(arr);// [1,2,3,4,5,6,7,8,9,99]
var arr = [1,2,3,4,5,6,7,8,9,99];
console.log(arr.slice(4,6)); //[5, 6]
console.log(arr);// [1,2,3,4,5,6,7,8,9,99]
var arr = [1,2,3,4,5,6,7,8,9,99];
console.log(arr.slice(-6,-4)); //[5, 6]
console.log(arr);// [1,2,3,4,5,6,7,8,9,99]
5.拼concat
concat(ele,ele,……)
作用：将新的元素拼接到指定數組的後面。（如果元素是數組，展開最外層數組，将裡面的元素進行拼接）
傳回值：拼接後的新數組
是否會影響原數組：否
var arr = [1,2,3];
console.log(arr.concat(true,[4,5,[6,7,8],9])); //[1, 2, 3, true, 4, 5, Array(3), 9]
console.log(arr);// [1,2,3]
6.複（面試題 ：要求至少寫出兩種複制數組的方法）
function copyArr(arr){
return arr.slice(0);
}
function copyArr(arr){
return arr.concat();
}
function copyArr(arr){
var list = [];
for(var i = 0,len = arr.length;i < len;i ++){
list.push(arr[i]);
}
return list;
}
7.排reverse() sort()
-
reverse() :
作用：将數組元素逆序存放
傳回值：逆序後的數組
是否會影響原數組：是
var arr = [5,3,6,2,7];
console.log(arr.reverse());//[7, 2, 6, 3, 5]
console.log(arr);//[7, 2, 6, 3, 5]
-
sort()
作用： 按字元編碼排序
傳回值：排序後的數組
是否影響原數組：是
var arr = [5,3,6,10,100,2,7];
console.log(arr.sort());//[10, 100, 2, 3, 5, 6, 7]
console.log(arr);//[10, 100, 2, 3, 5, 6, 7]
sort(function(a,b){return a - b;}) 按數字從小到大排
sort(function(a,b){return b - a;}) 按數字從大到小排
8.轉toString() join
-
toString() （面試： 它不是數組的方法，是Object對象的方法）
1> 數字.toString(2~36) : 将數字轉為指定進制的字元串
2> 數組轉字元串
-
join(‘連接配接符’);
作用：将數組連接配接成以指定連接配接符的字元串
傳回值：轉換後的字元串
是否會影響原數組：否
//轉toString()
//（面試，它不是數組的方法，是Object對象的方法）
// （1）數字.toString(2-36);将數字轉為指定進制的字元串
var num = 100;
console.log( num.toString(8));
console.log(num);
// (2)将數字轉為字元串
arr = [1,5,66,4,true,'六'];
console.log(arr.toString());
console.log(arr);
//join('連接配接符')
//将數字連接配接成以指定連接配接符連接配接的字元串
console.log(arr.join('-'));
console.log(arr);
alert(arr);
總結 不影響原數組的方法：截、拼、轉
九、整數數組、字元串數組、對象數組、二維數組、多元數組
[1,2,3,4,5]
['a','b','c']
[{},{},{}]
[[],[],[],[]]
var arr = [[[[5]]]];
console.log(arr[0][0][0][0])
十、for in （隻能周遊對象）
文法：
for(變量 in 對象){ //循環變量不能指派,周遊數組時，變量代表下标。周遊對象時，變量代表key
語句組;
}
ar arr = [1,2,3,4];
for(var i in arr){
console.log(i,arr[i]);
}
var obj = {id : 1,name : '蘋果',pirce : 50,num : 8};
//周遊對象
for(var key in obj){
console.log(key,obj[key]);
}
十一、冒泡排序
冒泡排序：相鄰的兩個數進行比較，符合條件，交換位置。
<script>
/*
冒泡排序 相鄰的兩個元素進行比較，符合條件，交換位置
*/
arr = [5,3,8,10,6,9];
//從大到小
//第一個for，比較一圈确定一個數
// for(var i = 0;i < arr.length;i ++){
// //第二個for，相鄰元素比較 n個數，比較n-1次，最後一個數不用再和後面的數比 ，第一圈比較完一，确定一個數，這個數就不用再比較了，第二圈比較完一，又确定一個數,......,比較的長度為arr.length-i
// for(var j = 0;j < arr.length - i;j ++){
// //比較一圈确定一個最小的數，排到了末尾
// if(arr[j] < arr[j + 1]){
// //符合條件 交換
// var t = arr[j + 1];
// arr[j + 1] = arr[j];
// arr[j] = t;
// }
// }
// }
// console.log(arr);
//從小到大
for(var i = 0;i < arr.length;i ++){
for(var j = 0;j <= arr.length - 1;j ++){
if(arr[j] > arr[j + 1]){
var t = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = t;
}
}
}
console.log(arr);
</script>
應用案例
- 成績管理系統（求出總成績、平均成績、最高成績、最低成績、成績從高到低排序）
<script>
// 十一、成績管理系統（求出總成績、平均成績、最高成績、最低成績、成績從高到低排序）
var num = parseInt(prompt('請輸入班級人數：'));
var arr = [];
function fnInput(arr,num){
for(var i = 0;i < num;i++){
arr[i] = Number(prompt('請輸入第' + (i + 1) + '個學生的成績：')) ;
console.log(arr);
}
return arr;
}
function fnSum(arr){
var sum = 0;
for(var i = 0,len = arr.length;i < len;i ++){
sum += arr[i];
}
return sum;
}
function fnAvg(arr,num){
return (fnSum(arr)/num).toFixed(2);
}
function fnMax(arr){
arr.sort(function(a,b){return b-a});
console.log(arr[0]);
return arr[0];
}
function fnMin(arr){
arr.sort(function(a,b){return a-b});
return arr[0];
}
function fnSort(arr){
arr.sort(function(a,b){return b-a});
return arr;
}
fnInput(arr,num);
console.log('總成績為：' + fnSum(arr));
console.log('平均成績為：' + fnAvg(arr,num));
console.log('最高成績為：' + fnMax(arr));
console.log('最低成績為：' + fnMin(arr));
console.log('從高到低排序為：' + fnSort(arr));
</script>
- 歌詠比賽，有10個評委，有5個選手，求出每一個選手的平均得分（去掉一個最高分和一個最低分）。
<script>
// 十、歌詠比賽，有10個評委，有5個選手，求出每一個選手的平均得分（去掉一個最高分和一個最低分）。
function fnInput(){
// var m = parseInt(prompt('請輸入有幾位選手'));
for(var i = 0;i <= 2;i ++){
alert('第' + (i + 1) + '位選手');
arr = [];
var sum = 0;
for(var j = 0;j <= 3;j ++){
arr[j] = (Number(prompt('請輸入第' + (j + 1) + '個評委的分')));
sum += arr[j];
}
//最高分
fnMax(arr);
//最低分
fnMin(arr);
//平均分
console.log('總分' + sum);
var avg = ((sum - i_max -i_min)/4).toFixed(2);
console.log('第' + (i + 1) + '位選手的得分為' + avg);
}
}
function fnMax(arr){
//排序，從大到小
var max = arr.sort(function(a,b){return b - a;})
console.log(max);
i_max = max[0];
console.log('最高分' + i_max);
return i_max;
}
function fnMin(arr){
var min = arr.sort(function(a,b){return a - b;})
// console.log(min);
i_min = min[0];
console.log('最低分' + i_min);
return i_min;
}
fnInput();
</script>
![【每日一練】59—寫一個中秋月餅的響應式卡片[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)