码上快乐

相关内容   简体   繁体

11-前端核心技术-JavaScript

本文转载自  查看原文  2021-11-20 15:56  176    前端课件

第11章-前端核心技术-JavaScript数组

学习目标

  1. 掌握JavaScript数组的申明和初始化

  2. 掌握JavaScript数组遍历的方法 重点

  3. 掌握JavaScript数组增删改查的方法 重点 难点

  4. 掌握JavaScript数组的内置函数 重点

  5. 掌握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建立的实例都存放在堆内存中。

image-20210907112950202

普通变量和数组的保存方式不同，如下图：

image-20210907113004441

访问数组元素

通过指定数组名以及索引号码，可以访问某个特定的元素，如：[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]+"&nbsp;"); } </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]+"&nbsp;"); } </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]+"&nbsp;"); } </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]+"&nbsp;"); } </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); // 报错

会出现如下错误提示

image-20210907165216629

表示未定义的变量。

参数内也不能使用外面没有的变量。如：

1
2
3
function getNumber3($number){
	$inner = $number;
}

会出现如下错误提示

image-20210907164840000

通用方法：删除第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 = '';
     }
     
    •

效果图

image-20210907165932188

函数参数数组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 &lt; <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">&lt;/<span class="hljs-title">script</span>&gt;</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>

效果展示

image-20210907204721493

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>

效果展示

image-20210907204950388

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>

效果展示

image-20210907205046507

把字符串分割为字符串数组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>

效果展示

image-20210907205304395

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>

效果展示

image-20210907205409317

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>

效果展示

image-20210907205552492

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>

效果展示

image-20210907205700354

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数组排序

冒泡排序

冒泡排序的基本思想是，对相邻的元素进行两两比较，顺序相反则进行交换，这样，每一趟会将最小或最大的元素“浮”到顶端，最终达到完全有序

image-20210926174155594

案例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">&lt;<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>&gt;</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 &lt; $nums.length - <span class="hljs-number">1</span>; $i++) {
		<span class="hljs-keyword">for</span> ($j = <span class="hljs-number">0</span>; $j &lt; $nums.length-$i-<span class="hljs-number">1</span>; $j++) {
			<span class="hljs-keyword">if</span> ($nums[$j] &gt; $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">&lt;/<span class="hljs-title">script</span>&gt;</span>



</html>

效果展示

image-20210907205822972

选择排序

简单选择排序是最简单直观的一种算法，基本思想为每一趟从待排序的数据元素中选择最小（或最大）的一个元素作为首元素，直到所有元素排完为止，简单选择排序是不稳定排序。

案例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">&lt;/<span class="hljs-title">script</span>&gt;</span>

 
</html>

效果展示

image-20210907205822972

直接插入排序

直接插入排序基本思想是每一步将一个待排序的记录，插入到前面已经排好序的有序序列中去，直到插完所有元素为止。

image-20210926174231399

案例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">&lt;<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>&gt;</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&lt;$nums.length;$i++) {
		<span class="hljs-keyword">for</span> ($j=$i; $j&gt;<span class="hljs-number">0</span>;$j--) {
			<span class="hljs-keyword">if</span> ($nums[$j] &lt; $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">&lt;/<span class="hljs-title">script</span>&gt;</span>



</html>

效果图

image-20210907205822972

作业

完成如下要求

使用循环改变HTML中表格中单元格的样式：让奇数个单元格字体颜色变成红色

image-20210926092950729

有如下数组，输出所有小于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]

];

image-20210926093012046

有如下数组，求所有两位数的数字的和

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]

];

image-20210926093030646

有如下数组，输出所有女生的除了性别之外的所有信息

var student = [

​ [“张三”,“男”,“13594876584”,“美男”],

​ [“李四”,“男”,“13594876555”,“美男”],

​ [“范冰冰”,“女”,“13595468456”,“美女”],

​ [“大桥”,“女”,“13595548569”,“美女”],

​ [“吕布”,“男”,“13578945658”,“美男”],

​ [“刘备”,“男”,“13576954874”,“美男”],

​ [“哪咤”,“男”,“13579548455”,“美男”],

​ [“甄姬”,“女”,“13587459548”,“美女”]

];

image-20210926093045040

有如下数组，删除第二个数，并输出新的数组

​ var $nums = [12, 55, 4, 65, 178, 15, 33, 66, 594, 225];

image-20210926093055018

有如下数组，在第五个数据的位置插入999.

var $nums = [12, 55, 4, 65, 178, 15, 33, 66, 594, 225];

image-20210926093109436

有如下两个数组

var $nums = [12, 55, 4, 65,178];

var $chars = [‘hello’, ‘hi’, ‘how are you’];

  • 把$nums和$chars两个数组合并成一个数组

  • 把保存后的结果保存到$new变量里面

image-20210926093120994

有如下数组，用冒泡排序将所有数据从小到大排序

var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];

image-20210926093134945

有如下数组，用选择排序将所有数据从小到大排序

var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];

image-20210926093134945

用循环实现两个数组拼接

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’);

image-20210926093309678

用循环实现将一个数组反转

var arr = new Array(45, 88, 66, 45, 12, 58, 656, ‘dsada’);

image-20210926093321413

    </article>


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 09-前端核心技术-JavaScript基础语法 10-前端核心技术-JavaScript条件和循环结构 12-前端核心技术-JavaScript对象 Web前端三大核心技术之HTML Spring 核心技术（1） Spring 核心技术（5） Spring 核心技术（7） nodejs核心技术 Spring 核心技术（4） Spring 核心技术（3）
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM