JavaScript 基础四 数组的创建;遍历数组;新增数组元素;普通函数的使用;return 返回值
程序员文章站
2022-04-10 15:45:00
...
1.0 数组的概念 Array
数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。
数组是一种将一组数据存储在单个变量名下的优雅方式。
2.1 数组的创建方式
JS 中创建数组有两种方式:
- 利用 new 创建数组
- 利用数组字面量创建数组
2.2 创建数组
1.数组(Array): 就是一组数据的集合 存储在单个变量下的优雅方式
2.利用 new 创建数组
var arr = new Array(); // 创建了一个空数组
3.利用数组字面量创建数组 []
var arr = [];
var arr1 = [1, 2, 'pink老师', true];
4.我们数组里面的数据一定用逗号隔开
5.数组里面的数据 比如1,2 我们称为数据元素
6.获取数组元素 格式 数组名[索引号] (索引号从0开始!)
</script>
2.3 遍历数组
遍历: 就是把数组中的每个元素从头到尾都访问一次。(通过 for 循环索引遍历数组中的每一项)
// 遍历数组:就是把数组的元素从头到尾访问一次
var arr = ['red', 'green', 'blue'];
for (var i = 0; i < 3; i++) {
console.log(arr[i]);
}
// 1.因为我们的数组索引从0开始,所以 i 必须从 0 开始 i<3;
// 2.输出的时候 arr[i] i 计数器当索引号来用
2.4 数组的长度
使用“数组名.length”可以访问数组元素的数量(数组长度)。
他可以动态监测数组元素的个数
2.4 数组案例
求数组中 最大值
// 声明一个保存最大元素的变量 max
// 默认最大值可以去元素中的第一个元素
// 遍历这个数组,把里面每个数组元素和max相比较
// 如果这个数组元素大于max,就把这个数组元素存到max里面, 否则继续下一轮比较
// 最后输出这个max
var arr = [2, 6, 1, 77, 52, 25, 7];
var max = arr[0];
for (i = 1; i < arr.length; i++) { // 因为 max等于0了 所以i可以从1开始
if (max < arr[i]) {
max = arr[i];
}
}
console.log(max);
3.0 数组中的新增元素
- 可以通过修改 length 长度来实现数组扩容的目的
- 可以通过修改数组索引的方式追加数组元素(不能直接给数组名赋值,否则会覆盖掉以前的数据)
1.通过修改length长度来实现数组扩容的目的,
var arr = [1, 2, 3, 4];
arr.length = 8;
console.log(arr);
console.log(arr[7]); // 为空 声明了变量 没有给值; undefined
2.通过修改数组索引 新增数组元素
var arr1 = ['pink', 'green', 'blue'];
arr1[3] = 'red';
console.log(arr1);
arr1[0] = 'yeelow'; // 这里是替换原来的元素
console.log(arr1);
3.1 数组案例
1. 大于等于10的元素选出来,放入新数组
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
var j = 0; // 通过新建一个 变量 来进行 j++ 就是表示 下一个 就是第2个
for (i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 新数组应该从0开始 依次递增 不能从 i 开始, 第一个是77 从i 开始 前面就会多出3个空的数组
arr1[j] = arr[i]
j++;
}
}
console.log(arr1);
// 方法 2
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
// 刚开始 arr1.length 就是0
for (i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 新数组索引号应该从0开始 依次递增
arr1[arr1.length] = arr[i]
}
}
console.log(arr1);
2. 删除指定数组元素
var newArr = [];
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
for (i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
arr1[newArr.length] = arr[i]
}
}
console.log(newArr);
3. 翻转数组
// 把旧数组索引号第4个取过来(arr.length - 1),给新数组索引号第0个元素 (newArr.length)
// 我们采取递减的方式 i--
var arr = ['purple', 'pink', 'blue', 'green', 'red', ]
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i]
}
console.log(newArr);
4. 冒泡排序
// 核心原理:一次比较两个元素,如果他们的顺序错误就把他们交换过来。
var arr = [5, 4, 3, 2, 1];
for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数
for (var j = 0; j <= arr.length - i - 1; j++) // 里面的循环管 每一趟的交换次数
//内部交换2个变量的值,前一个和后面一个数组元素相比较
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
console.log(arr);
1.0 函数的概念
在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。
**函数:**就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
2.0 函数的使用
函数在使用时分为两步:
- 声明函数(将函数名命名为动词,比如 getSum)
- 调用函数(函数不调用,自己不执行。)
// 利用函数计算1-100之间的累加和
// 1. 声明函数 函数名命名为动词 驼峰命名法
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
}
// 2. 调用函数 千万不要忘记添加小括号
getSum();
3.0 函数的参数
3.1 形参和实参
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参
而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参。
// 1. 利用函数求任意两个数的和
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 3);
getSum(3, 8);
// 2. 利用函数求任意两个数之间的和
function getSums(start, end) {
var sum = 0;
for (i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getSums(1, 100);
getSums(1, 10);
// 3.注意点
// 多个参数之间用逗号隔开
// 形参可以看做是不用声明的变量
3.2 形参的个数可以和实参个数不匹配
实参多余形参个数,只取形参的个数。
实参小余形参个数,多的形参定义为 undefined ,结果为 NaN
4.0 函数的返回值
4.1 return 语句
- 在使用 return 语句时,函数会停止执行,并返回指定的值
- 如果函数没有 return ,返回的值是 undefined
1. 我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名()通过 return 实现的
2. 只要函数遇到 return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果 */
4.2 return 注意事项
1. return 终止函数
function getSum(num1, num2) {
return num1 + num2;
alert('我不会被执行了!');
}
console.log(getSum(1, 2));
2. return 只能返回一个值!
function fn(num1, num2) {
return num1, num2; // 他只返回 num2 的值 num1 忽略 所以可以用数组把这两个值 包含 进去
}
console.log(fn(1, 2));
3. 我们任意两个数的 加减乘数效果
function getResult(num1, num2) {
return [num1 + num2, num1 - num2, num2 * num1];
}
var re = getResult(1, 2);
console.log(re);
4. 如果有 return 则返回 return 后面的值
5. 如果没有 则返回 undefined
上一篇: 注释Vue中所有的console.log