JavaScript 数组和函数

- 学习目标
- JavaScript数组
- - 什么是数组?
  - 创建数组
  - 数组存储
  - 访问数组元素
  - 数组遍历
  - 删除数组元素
  - - 案例01
    - 案例02
  - 添加数组元素
  - - 案例03
    - 案例04
- JavaScript 函数（高级）
- - 函数参数
  - - 通用方法：删除第n个：
    - 通用方法：在第N个数前插入
  - 变量的作用域
  - 函数参数数组Arguments
  - - 案例06
  - 函数返回值
- JavaScript数组API
- - concat()
  - fill()
  - join()&toString()
  - push()
  - pop()
  - unshift()
  - reverse()
  - slice()
  - splice()
  - forEach()
  - every()
  - some()
  - filter()
  - find()
  - map()
  - reduce()
  - for循环

学习目标

掌握JavaScript数组的申明和初始化
掌握JavaScript数组遍历的方法 重点
掌握JavaScript数组增删改查的方法 重点 难点
掌握JavaScript数组的内置函数 重点
掌握JavaScript函数的高级运用

JavaScript数组

什么是数组?

数组是使用单独的变量名来存储一系列的多个值。如：可以用数组来保存一个会员用户的用户名、帐号、密码、电话号码等等。

创建数组

创建一个数组，有2种方法

使用new Array(“张三”,“zhangshan”)创建数组

//创建名字为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”]

//创建名字为user的数组，里面有四个值
var user = ["张三","zhangshan","123456","13594876584"];

数组存储

栈内存 – 用于存储局部变量，数据使用完（程序退出局部变量作用域后），所占内存自动释放。
堆内存 – 用于存储数组和对象，通过new建立的实例都存放在堆内存中。
–

访问数组元素

通过指定数组名以及索引号码，可以访问某个特定的元素，如：[0] 是数组的第一个元素。[1] 是数组的第二个元素

//创建名字为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属性获取数组的长度

//创建名字为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

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

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

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

<!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 函数（高级）

函数参数

函数名后面的括号里面写的就是参数。参数的作用就是用于函数内部和函数外部数据的传递。也就是说：可以通过参数把函数外面的数据传入函数内部，并在内部使用，而且不会改变外部数据的值。

参数其实也就是变量。

语法：

function functionName(parameter1, parameter2, parameter3) {// 要执行的代码…… 
}

参数的个数不限

function getNumber1(number){alert(number);
}
function getNumber2(n1,n2){alert(n1 + n2);
}

参数只能在函数内部使用，不可以在函数外使用函数内的参数和变量。如：

function getNumber3($number){$number = 100;
}
document.write($number); // 报错

会出现如下错误提示

[

通用方法：删除第n个：

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个数前插入

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

变量的作用域

变量的位置不同，分为全局变量和局部变量

全局变量 – 作用范围是所有代码块，也就是说在任何一个位置都可以直接访问全局变量
局部变量 – 作用范围是某一个代码块内部，也就是说只能在当前代码块内部使用。

函数参数数组Arguments

参数数组又叫可变参数，可以接受任意多个参数，而且创建函数的适合不需要指定参数的个数，再使用函数的时候确定参数个数即可。

案例06

<!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);function sumAll() {var sum = 0;for(var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}document.write(x)</script>
</html>

结果：871

函数返回值

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

//定义函数
function myFunction() {var x = 5;return x;//在这里返回一个值，并且结束函数console.log(x);//这条语句不会执行
}//使用函数
var ret = myFunction()//使用函数的时候会获得函数的返回值，并保存在ret变量里

JavaScript数组API

concat()

连接两个或多个数组

array1.concat(array2, array3, ... , arrayX);

案例07

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

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

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MYAMoAvg-1646015886429)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220212111309567.png)]$

join()&toString()

数组变成字符串

案例09

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

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

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

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PdtoFhEl-1646016066012)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220212111342364.png)]$

unshift()

向数向数组的开头添加一个或更多元素，并返回新的长度

array.unshift(item1,item2, ..., itemX)

案例12

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

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DmtIYNh0-1646016117776)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220212111353521.png)]$

删除并返回数组的第一个元素

案例13

<!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()

反转数组的元素顺序

案例

<!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) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

参数

描述

start

可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

end

可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

返回值

Type	描述
Array	返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

splice()

添加/删除项目，然后返回被删除的项目

该方法会改变原始数组。

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” 值

// forEach(function(value,index,array)) 循环
// 类似于let循环，相当于有n个index变量
arr.forEach(function(value,index,array){console.log(index,value)
});

every()

检测数组所有元素是否都符合指定条件

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

array.every(function(currentValue,index,arr), thisValue)

参数

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数:currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

案例

// 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”

案例

// some:判断数组中每一个元素是否都符合要求
result = arr.some(function(value,index,array){if(value < 10){return true;}return false;
});
console.log(result);

filter()

检查指定数组中符合条件的所有元素

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

array.filter(function(currentValue,index,arr), thisValue)

参数

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数:currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

案例：

// 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” 值

案例：

// 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 为全局对象。

案例:

// 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	可选。传递给函数的初始值

如：

<!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循环

// 数组的遍历
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 数组和函数

学习目标

JavaScript数组

什么是数组?

创建数组

数组存储

访问数组元素

数组遍历

删除数组元素

案例01

案例02

添加数组元素

案例03

案例04

JavaScript 函数（高级）

函数参数

通用方法：删除第n个：

通用方法：在第N个数前插入

变量的作用域

函数参数数组Arguments

案例06

函数返回值

JavaScript数组API

concat()

fill()

join()&toString()

push()

pop()

unshift()

reverse()

slice()

splice()

forEach()

every()

some()

filter()

find()

map()

reduce()

for循环

Published by

风君子