第11章-前端核心技術-JavaScript數組
學習目標
-
掌握JavaScript數組的申明和初始化
-
掌握JavaScript數組遍歷的方法
重點 -
掌握JavaScript數組增刪改查的方法
重點難點 -
掌握JavaScript數組的內置函數
重點 -
掌握JavaScript函數的高級運用
JavaScript數組
什么是數組?
數組是使用單獨的變量名來存儲一系列的多個值。如：可以用數組來保存一個會員用戶的用戶名、帳號、密碼、電話號碼等等。
創建數組
創建一個數組，有2種方法
使用new Array(“張三”,“zhangshan”)創建數組
1
2
3
4
5
6
7
8
//創建名字為user的數組，里面有四個值
var user = new Array("張三","zhangshan","123456","13594876584");
//或者
var user = new Array();
user[0] = "張三";
user[1] = "zhangshan";
user[2] = "123456";
user[3] = "13594876584";
使用方括號var user = [“張三”,“zhangshan”]
1
2
//創建名字為user的數組，里面有四個值
var user = ["張三","zhangshan","123456","13594876584"];
數組存儲
- 棧內存 - 用於存儲局部變量，數據使用完（程序退出局部變量作用域后），所占內存自動釋放。
- 堆內存 - 用於存儲數組和對象，通過new建立的實例都存放在堆內存中。
普通變量和數組的保存方式不同，如下圖：
訪問數組元素
通過指定數組名以及索引號碼，可以訪問某個特定的元素，如：[0] 是數組的第一個元素。[1] 是數組的第二個元素
1
2
3
4
5
6
7
8
9
10
11
//創建名字為user的數組，里面有四個值
var user = new Array("張三","zhangshan","123456","13594876584");
//訪問數組很簡單，只需要使用方括號加下標
alert(user[0]); //會彈窗輸出“張三”
//修改數組值
user[0] = "李四";//把數組中第1個元素的值修改為“李四”
user[1] = "lisi";//把數組中第2個元素的值修改為“lisi”
user[2] = "789";//把數組中第3個元素的值修改為“789”
user[3] = "13569845684";//把數組中第4個元素的值修改為“13569845684”
數組遍歷
數組的遍歷通常使用for循環，for循環 for / in簡寫的循環。通過數組的length屬性獲取數組的長度
1
2
3
4
5
6
7
8
9
10
11
//創建名字為user的數組，里面有四個值
var user = new Array("張三","zhangshan","123456","13594876584");
for (var i in user) {
document.write(user[i]+"<br/>");
}
//user.length:獲取User數組的長度（個數）
for (var i=0;i<user.length;i++) {
document.write(user[i]+"<br/>");
}
刪除數組元素
數組的長度在數組被初始化的時候確定，如需刪除數組中的元素，應該把需要刪除的元素移到數組的末尾，然后將數組的長度減1
案例01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> //創建一個空的數組 var num = new Array(); //用循環給數組初始化10個數據（1···10） for (i = 0;i < 10;i++) { num[i] = i + 1; } //刪除最后一個數 num.length = 9; for(a in num){ document.write(num[a]+" "); } </script>
</html>
如需刪除中間的元素，需要把該元素后面的所以元素往前移動一個位置，然后將數組長度減1。
案例02
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> //創建一個空的數組 $num = new Array(); //用循環給數組初始化10個數據（1···10） for ($i = 0;$i < 10;$i++) { $num[$i] = $i + 1; } //刪除第3個數，需要把第3個數后面的輸全部往前移動一位 for($i = 2,$temp = 0;$i < 10;$i++){ $num[$i] = $num[$i+1]; } $num.length = 9; //輸出顯示刪除后的結果 for($a in $num){ document.write($num[$a]+" "); } </script>
</html>
添加數組元素
如果是在數組末尾添加數組元素，操作很簡單，只需要增加一個下標就可以了
案例03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> //創建一個空的數組 num = new Array(); //用循環給數組初始化10個數據（1···10） for (i = 0;i < 10;i++) { num[i] = i + 1; } //在數組末尾添加一個數據 num[10] = 100; //輸出顯示刪除后的結果 for(a in num){ document.write(num[a]+" "); } </script>
</html>
如果要在數組中間插入數據，那就需要使用循環，從需要加入數據的位置開始，講后面的數據往后移動一位，然后在該位置上插入數據。
案例04
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> //創建一個空的數組 num = new Array(); //用循環給數組初始化10個數據（1···10） for (i = 0;i < 10;i++) { num[i] = i + 1; } //在數組第5個位置添加一個數據 for (i = 10;i > 5;i--) { num[i] = i - 1; } num[4] = 500; //輸出顯示刪除后的結果 for(a in num){ document.write(num[a]+" "); } </script>
</html>
JavaScript 函數（高級）
函數參數
函數名后面的括號里面寫的就是參數。參數的作用就是用於函數內部和函數外部數據的傳遞。也就是說：可以通過參數把函數外面的數據傳入函數內部，並在內部使用，而且不會改變外部數據的值。
參數其實也就是變量。
語法：
1
2
3
function functionName(parameter1, parameter2, parameter3) {
// 要執行的代碼……
}
參數的個數不限
1
2
3
4
5
6
function getNumber1(number){
alert(number);
}
function getNumber2(n1,n2){
alert(n1 + n2);
}
參數只能在函數內部使用，不可以在函數外使用函數內的參數和變量。如：
1
2
3
4
function getNumber3($number){
$number = 100;
}
document.write($number); // 報錯
會出現如下錯誤提示
表示未定義的變量。
參數內也不能使用外面沒有的變量。如：
1
2
3
function getNumber3($number){
$inner = $number;
}
會出現如下錯誤提示
通用方法：刪除第n個：
1
2
3
4
5
6
7
8
9
10
11
var arr = new Array(45, 88, 66, 45, 12, 58, 656, 'dsada', 'fdsaffas');
//刪除第N個數據
function deletes(n) {
for(var i = n - 1; i < arr.length-1; i++) {
arr[i] = arr[i + 1]
}
arr.length -= 1;
}
deletes(4);
document.write(arr);
通用方法：在第N個數前插入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = new Array(45, 88, 66, 45, 12, 58, 656, 'dsada', 'fdsaffas');
//[前面]插入數據
function add(n,data) {
if(n > arr.length) {
arr[arr.length] = data;
} else {
for(var i = arr.length; i >= n - 1; i--) {
arr[i] = arr[i - 1]
}
arr[n - 1] = data;
}
}
add(3,999);
document.write(arr);
變量的作用域
變量的位置不同，分為全局變量和局部變量
- 全局變量 - 作用范圍是所有代碼塊，也就是說在任何一個位置都可以直接訪問全局變量
- 局部變量 - 作用范圍是某一個代碼塊內部，也就是說只能在當前代碼塊內部使用。
案例05 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<table>
<tr>
<th colspan="4"><input type="text" id="show" /></th>
</tr>
<tr>
<td><button onclick="getNumber(7)">7</button></td>
<td><button onclick="getNumber(8)">8</button></td>
<td><button onclick="getNumber(9)">9</button></td>
<td><button onclick="getChar('*')">*</button></td>
</tr>
<tr>
<td><button onclick="getNumber(4)">4</button></td>
<td><button onclick="getNumber(5)">5</button></td>
<td><button onclick="getNumber(6)">6</button></td>
<td><button onclick="getChar('/')">/</button></td>
</tr>
<tr>
<td><button onclick="getNumber(1)">1</button></td>
<td><button onclick="getNumber(2)">2</button></td>
<td><button onclick="getNumber(3)">3</button></td>
<td><button onclick="getChar('+')">+</button></td>
</tr>
<tr>
<td><button onclick="del()">c</button></td>
<td><button onclick="getNumber(0)">0</button></td>
<td><button onclick="compute('=')">=</button></td>
<td><button onclick="getChar('-')">-</button></td>
</tr>
</table>
</body>
<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
</html>
案例05 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
table{ border-collapse: collapse; margin: auto; }
th,td{ border: 6px solid gray; text-align: center; width: 60px; height: 60px; }
th input{ height: 35px; width: 90%; font-size: 20px; text-align: center; }
td button{ font-size: 20px; width: 60px; height: 60px; margin: 0; padding: 15px; }
td:nth-child(4n) button{ background-color: blueviolet; color: white; }
案例05 JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
number = ''; //保存每次點擊的數字（全局變量）
up = ''; //保存上次點擊的數字 （全局變量）
char = '' //保存點擊的運算符號（全局變量）
/**
- 獲取計算機按鈕按下的數字
*/
function getNumber(n) {
number += '' + n;
document.getElementById('show').value += n;
console.log('數字：'+number+'----上一個數字：'+up);
}
/**
- 獲取計算機按鈕按下的符號
*/
function getChar(c) {
char = c;//把按下的符號鍵保存到char變量里面
up = number;//把上一個數字保存到up變量里面
number = ''//把number變量重新變為空字符串，便於記錄下一個數字
console.log('符號：'+char+'----上一個數字：'+up);
document.getElementById('show').value += c;
}
/**
- 計算結果
/
function compute() {
up = parseInt(up);
number = parseInt(number);
switch(char) {
case '':
document.getElementById('show').value = (up*number);
break;
case '/':
document.getElementById('show').value = (up/number);
break;
case '+':
document.getElementById('show').value = (up+number);
break;
case '-':
document.getElementById('show').value = (up-number);
break;
default:
break;
}
}
/**
刪除
*/
function del(){
up = '';
number = '';
document.getElementById('show').value = '';
}
效果圖
函數參數數組Arguments
參數數組又叫可變參數，可以接受任意多個參數，而且創建函數的適合不需要指定參數的個數，再使用函數的時候確定參數個數即可。
案例06
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> x = sumAll(1, 123, 500, 115, 44, 88); <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sumAll</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> sum = <span class="hljs-number">0</span>;
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-built_in">arguments</span>.length; i++) {
sum += <span class="hljs-built_in">arguments</span>[i];
}
<span class="hljs-keyword">return</span> sum;
}
<span class="hljs-built_in">document</span>.write(x)
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</html>
結果：871
函數返回值
有時，我們會希望函數將值返回調用它的地方。
通過使用 return 語句就可以實現。
在使用 return 語句時，函數會停止執行，並返回指定的值。
1
2
3
4
5
6
7
8
9
//定義函數
function myFunction() {
var x = 5;
return x;//在這里返回一個值，並且結束函數
console.log(x);//這條語句不會執行
}
//使用函數
var ret = myFunction()//使用函數的時候會獲得函數的返回值，並保存在ret變量里
JavaScript數組API
concat()
連接兩個或多個數組
array1.concat(array2, array3, ... , arrayX);
案例07
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> $arr1 = new Array("10","12"); $arr2 = new Array("a","bb","ccc"); $arr3 = new Array("哈哈","嘿嘿"); $result = $arr1.concat($arr2,$arr3); document.write($result); </script>
</html>
效果展示
fill()
用一個固定值替換數組的元素
array.fill(value, start, end);
注意: IE 11 及更早版本不支持 fill() 方法。
案例08
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> $arr1 = new Array("10","12","哈哈"); $arr1.fill('XXXX',1,5); document.write($arr1); </script>
</html>
效果展示
join()&toString()
數組變成字符串
案例09
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> $arr1 = new Array("10","12","哈哈"); $r = $arr1.join(); $b = $arr1.toString(); document.write($r); document.write("<br/>"); document.write($b); </script>
</html>
效果展示
把字符串分割為字符串數組string.split(separator,limit)
push()
向數組末尾添加一個或多個元素，並返回新的長度
array.push(item1, item2, ..., itemX);
案例10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> $arr1 = new Array("10","12","哈哈"); $r = $arr1.push("你是誰"); document.write($arr1); document.write("<br/>"); document.write($r); </script>
</html>
效果展示
pop()
刪除數組的最后一個元素並返回刪除的元素
案例11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> $arr1 = new Array("10","12","哈哈"); $r = $arr1.pop(); document.write($arr1); document.write("<br/>"); document.write($r); </script>
</html>
效果展示
unshift()
向數組的開頭添加一個或更多元素，並返回新的長度
array.unshift(item1,item2, ..., itemX)
案例12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> $arr1 = new Array("10","12","哈哈"); $r = $arr1.unshift("多啦阿曼","分化"); document.write($arr1); document.write("<br/>"); document.write($r); </script>
</html>
效果展示
shift()
刪除並返回數組的第一個元素
案例13
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> $arr1 = new Array("10","12","哈哈"); $r = $arr1.shift(); document.write($arr1); document.write("<br/>"); document.write($r); </script>
</html>
效果展示
reverse()
反轉數組的元素順序
案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> $arr1 = new Array("10","12","哈哈"); $arr1.reverse(); document.write($arr1); </script>
</html>
slice()
提取數組部分元素
array.slice(start, end);
參數 Values
| 參數 | 描述 |
|---|---|
| start | 可選。規定從何處開始選取。如果是負數，那么它規定從數組尾部開始算起的位置。如果該參數為負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2) 表示提取原數組中的倒數第二個元素到最后一個元素（包含最后一個元素）。 |
| end | 可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數，那么切分的數組包含從 start 到數組結束的所有元素。如果該參數為負數， 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1) 表示抽取了原數組中的倒數第二個元素到最后一個元素（不包含最后一個元素，也就是只有倒數第二個元素）。 |
返回值
| Type | 描述 |
|---|---|
| Array | 返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。 |
splice()
添加/刪除項目，然后返回被刪除的項目
該方法會改變原始數組。
1
2
js
arrayObject.splice(index,howmany,item1,.....,itemX);
參數
| 參數 | 描述 |
|---|---|
| index | 必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。 |
| howmany | 必需。要刪除的項目數量。如果設置為 0，則不會刪除項目。 |
| item1, …, itemX | 可選。向數組添加的新項目。 |
forEach()
調用數組的每個元素
注意: forEach() 對於空數組是不會執行回調函數的。
array.forEach(function(currentValue, index, arr), thisValue) 參數
| 參數 | 描述 |
|---|---|
| function(currentValue, index, arr) | 必需。 數組中每個元素需要調用的函數。 函數參數:currentValue必需。當前元素index可選。當前元素的索引值。arr可選。當前元素所屬的數組對象。 |
| thisValue | 可選。傳遞給函數的值一般用 “this” 值。 如果這個參數為空， “undefined” 會傳遞給 “this” 值 |
1
2
3
4
5
6
js
// forEach(function(value,index,array)) 循環
// 類似於let循環，相當於有n個index變量
arr.forEach(function(value,index,array){
console.log(index,value)
});
every()
檢測數組所有元素是否都符合指定條件
every() 方法使用指定函數檢測數組中的所有元素：
-
如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩余的元素不會再進行檢測。
-
如果所有元素都滿足條件，則返回 true。
注意： every() 不會對空數組進行檢測。
注意： every() 不會改變原始數組。
1
2
js
array.every(function(currentValue,index,arr), thisValue) 參數
| 參數 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必須。函數，數組中的每個元素都會執行這個函數 函數參數:currentValue必須。當前元素的值index可選。當前元素的索引值arr可選。當前元素屬於的數組對象 |
| thisValue | 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值為 “undefined” |
案例
1
2
3
4
5
6
7
8
// every:判斷數組中每一個元素是否都符合要求
result = arr.every(function(value,index,array){
if(value < 10){
return true;
}
return false;
});
console.log(result);
some()
檢測數組中的元素至少有一個滿足指定條件
some() 方法會依次執行數組的每個元素：
-
如果有一個元素滿足條件，則表達式返回true , 剩余的元素不會再執行檢測。
-
如果沒有滿足條件的元素，則返回false。
注意： some() 不會對空數組進行檢測。
注意： some() 不會改變原始數組。
array.some(function(currentValue,index,arr),thisValue) 參數
| 參數 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必須。函數，數組中的每個元素都會執行這個函數 函數參數:currentValue必須。當前元素的值index可選。當前元素的索引值arr可選。當前元素屬於的數組對象 |
| thisValue | 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值為 “undefined” |
案例
1
2
3
4
5
6
7
8
// some:判斷數組中每一個元素是否都符合要求
result = arr.some(function(value,index,array){
if(value < 10){
return true;
}
return false;
});
console.log(result);
filter()
檢查指定數組中符合條件的所有元素
注意： filter() 不會對空數組進行檢測。
注意： filter() 不會改變原始數組。
1
2
js
array.filter(function(currentValue,index,arr), thisValue) 參數
| 參數 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必須。函數，數組中的每個元素都會執行這個函數 函數參數:currentValue必須。當前元素的值index可選。當前元素的索引值arr可選。當前元素屬於的數組對象 |
| thisValue | 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值為 “undefined” |
案例：
1
2
3
4
5
6
7
// filter:判斷數組中每一個元素是否都符合要求
result = arr.filter(function(value,index,array){
if(value < 10){
return value;
}
});
console.log(result);
find()
返回符合條件的數組的第一個元素的值。
find() 方法為數組中的每個元素都調用一次函數執行：
-
當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調用執行函數。
-
如果沒有符合條件的元素返回 undefined
注意: find() 對於空數組，函數是不會執行的。
注意: find() 並沒有改變數組的原始值。
array.find(function(currentValue, index, arr),thisValue) 參數
| 參數 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必需。數組每個元素需要執行的函數。 函數參數:currentValue必需。當前元素index可選。當前元素的索引值arr可選。當前元素所屬的數組對象 |
| thisValue | 可選。 傳遞給函數的值一般用 “this” 值。 如果這個參數為空， “undefined” 會傳遞給 “this” 值 |
案例：
1
2
3
4
5
6
7
// find:判斷數組中每一個元素是否都符合要求
result = arr.find(function(value,index,array){
if(value < 10){
return value;
}
});
console.log(result);
map()
返回原始數組元素調用函數處理后的新數組
map() 方法按照原始數組元素順序依次處理元素。
注意： map() 不會對空數組進行檢測。
注意： map() 不會改變原始數組。
array.map(function(currentValue,index,arr), thisValue) 參數
| 參數 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必須。函數，數組中的每個元素都會執行這個函數 函數參數:currentValue必須。當前元素的值index可選。當前元素的索引值arr可選。當前元素屬於的數組對象 |
| thisValue | 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。 如果省略了 thisValue，或者傳入 null、undefined，那么回調函數的 this 為全局對象。 |
案例:
1
2
3
4
5
// map:對數組中的元素統一處理
result = arr.map(function(value,index,array){
return value * value;
});
console.log(result);
reduce()
reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce() 可以作為一個高階函數，用於函數的 compose。
注意: reduce() 對於空數組是不會執行回調函數的。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue) 參數：
| 參數 | 描述 |
|---|---|
| function(total,currentValue, index,arr) | 必需。用於執行每個數組元素的函數。 *total*必需。*初始值*, 或者計算結束后的返回值。 *currentValue*必需。當前元素。 *currentIndex*可選。當前元素的索引*arr*可選。當前元素所屬的數組對象。 |
| initialValue | 可選。傳遞給函數的初始值 |
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>點擊按鈕后對數組元素進行四舍五入並計算總和。</p>
<button onclick="myFunction()">點我</button>
<p>數組元素之和: <span id="demo"></span></p>
<script> var numbers = [15.5, 2.3, 1.1, 4.7]; function getSum(total, num) { return total + Math.round(num); } function myFunction(item) { document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0); } </script>
</body>
</html>
for循環
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 數組的遍歷
arr = [1,2,3,4,5,6,7,8,9,"aaa1",true,false];
// 普通for循環,公用一個i
for (var i = 0; i < arr.length; i++) {
//console.log(arr[i])
}
// 增強for循環,相當於有n個i變量
for (let i = 0; i < arr.length; i++) {
//console.log(arr[i])
}
// 增強for循環,i是下標，數組和對象
for (let i in arr) {
//console.log(arr[i])
}
// 增強for循環,i是值，數組和對象
for (let s of arr) {
//console.log(s)
}
JavaScript數組排序
冒泡排序
冒泡排序的基本思想是，對相鄰的元素進行兩兩比較，順序相反則進行交換，這樣，每一趟會將最小或最大的元素“浮”到頂端，最終達到完全有序
案例07
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> $nums = [<span class="hljs-number">12</span>, <span class="hljs-number">55</span>, <span class="hljs-number">4</span>, <span class="hljs-number">65</span>,<span class="hljs-number">178</span>,<span class="hljs-number">215</span>,<span class="hljs-number">236</span>,<span class="hljs-number">2</span>,<span class="hljs-number">48</span>,<span class="hljs-number">69</span>,<span class="hljs-number">78</span>,<span class="hljs-number">356</span>,<span class="hljs-number">4</span>];
<span class="hljs-comment">/**
* 交換排序（冒泡排序）
* 求：
* 把數組從小到大排序
* 思路：
* 把數組中每一個數跟這個數后面的所有數進行比較
* 如果后面的某一個數比這個數小
* 就交換兩個數的位置
*/</span>
<span class="hljs-keyword">for</span> ($i = <span class="hljs-number">0</span>; $i < $nums.length - <span class="hljs-number">1</span>; $i++) {
<span class="hljs-keyword">for</span> ($j = <span class="hljs-number">0</span>; $j < $nums.length-$i-<span class="hljs-number">1</span>; $j++) {
<span class="hljs-keyword">if</span> ($nums[$j] > $nums[$j+<span class="hljs-number">1</span>]) {
temp = $nums[$j];
$nums[$j] = $nums[$j+<span class="hljs-number">1</span>];
$nums[$j+<span class="hljs-number">1</span>] = temp;
}
}
}
<span class="hljs-built_in">document</span>.write($nums);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</html>
效果展示
選擇排序
簡單選擇排序是最簡單直觀的一種算法，基本思想為每一趟從待排序的數據元素中選擇最小（或最大）的一個元素作為首元素，直到所有元素排完為止，簡單選擇排序是不穩定排序。
案例08
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> $min = 7 var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4]; /** * 交換排序（選擇排序） * 求： * 把數組從小到大排序 * 思路： * 把數組中每一個數跟這個數后面的所有數進行比較 * 判斷后面所有數中最小的數 * 就交換兩個數的位置 */ for ($i = 0;$i < $nums.length;$i++) { $min = $i;//2 for ($j = $i + 1;$j < $nums.length;$j++) { if($nums[$min] > $nums[$j]){ $min = $j; } } if($min != $j){ $temp = $nums[$i]; $nums[$i] = $nums[$min]; $nums[$min] = $temp; } } <span class="hljs-built_in">console</span>.log($nums);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</html>
效果展示
直接插入排序
直接插入排序基本思想是每一步將一個待排序的記錄，插入到前面已經排好序的有序序列中去，直到插完所有元素為止。
案例09
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
$min = <span class="hljs-number">7</span>
<span class="hljs-keyword">var</span> $nums = [<span class="hljs-number">12</span>, <span class="hljs-number">55</span>, <span class="hljs-number">4</span>, <span class="hljs-number">65</span>,<span class="hljs-number">178</span>,<span class="hljs-number">215</span>,<span class="hljs-number">236</span>,<span class="hljs-number">2</span>,<span class="hljs-number">48</span>,<span class="hljs-number">69</span>,<span class="hljs-number">78</span>,<span class="hljs-number">356</span>,<span class="hljs-number">4</span>];
<span class="hljs-comment">/**
* 直接插入排序（插入排序）
* 求：
* 把數組從小到大排序
* 思路：
* 從第二個數開始，把當前這個數和前面的所有數進行比較
* 如果比前面的某個數小
* 和交換前面那個數交換順序
*/</span>
<span class="hljs-keyword">for</span> ($i=<span class="hljs-number">0</span>; $i<$nums.length;$i++) {
<span class="hljs-keyword">for</span> ($j=$i; $j><span class="hljs-number">0</span>;$j--) {
<span class="hljs-keyword">if</span> ($nums[$j] < $nums[$j-<span class="hljs-number">1</span>]) {
$temp = $nums[$j];
$nums[$j] = $nums[$j-<span class="hljs-number">1</span>];
$nums[$j-<span class="hljs-number">1</span>] = $temp;
}
}
}
<span class="hljs-built_in">console</span>.log($nums);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</html>
效果圖
作業
完成如下要求
使用循環改變HTML中表格中單元格的樣式：讓奇數個單元格字體顏色變成紅色
有如下數組，輸出所有小於50的數
var $nums = [
[12, 55, 4, 65, 178, 15, 33, 66, 594, 225],
[56, 87, 225, 49, 124, 33],
[59, 23, 26, 45, 48, 65, 987, 222],
[33, 24, 5, 94, 1, 649, 616, 456, 21],
[111, 222, 555, 378]
];
有如下數組，求所有兩位數的數字的和
var $nums = [
[12, 55, 4, 65, 178, 15, 33, 66, 594, 225],
[56, 87, 225, 49, 124, 33],
[59, 23, 26, 45, 48, 65, 987, 222],
[33, 24, 5, 94, 1, 649, 616, 456, 21],
[111, 222, 555, 378]
];
有如下數組，輸出所有女生的除了性別之外的所有信息
var student = [
[“張三”,“男”,“13594876584”,“美男”],
[“李四”,“男”,“13594876555”,“美男”],
[“范冰冰”,“女”,“13595468456”,“美女”],
[“大橋”,“女”,“13595548569”,“美女”],
[“呂布”,“男”,“13578945658”,“美男”],
[“劉備”,“男”,“13576954874”,“美男”],
[“哪吒”,“男”,“13579548455”,“美男”],
[“甄姬”,“女”,“13587459548”,“美女”]
];
有如下數組，刪除第二個數，並輸出新的數組
var $nums = [12, 55, 4, 65, 178, 15, 33, 66, 594, 225];
有如下數組，在第五個數據的位置插入999.
var $nums = [12, 55, 4, 65, 178, 15, 33, 66, 594, 225];
有如下兩個數組
var $nums = [12, 55, 4, 65,178];
var $chars = [‘hello’, ‘hi’, ‘how are you’];
-
把$nums和$chars兩個數組合並成一個數組
-
把保存后的結果保存到$new變量里面
有如下數組，用冒泡排序將所有數據從小到大排序
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];
有如下數組，用選擇排序將所有數據從小到大排序
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];
用循環實現兩個數組拼接
var arr1 = new Array(45, 88, 66, 45, 12, 58, 656, ‘dsada’, ‘fdsaffas’);
var arr2 = new Array(44, 6435, 6756, 786, 12, 58, 656, ‘f’, ‘fgfd’);
用循環實現將一個數組反轉
var arr = new Array(45, 88, 66, 45, 12, 58, 656, ‘dsada’);
</article>