JavaScript基础（四）笔记

最新推荐文章于 2024-07-17 15:26:15 发布

Astrid_kdy

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_56577624/article/details/122772547

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

数组

数组(Array)是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

//普通变量一次只能存储一个值
var num = 10;
//数组一次可以存储多个值
var arr =[1,2,3,4,5];

数组的创建方式

利用 new 创建数组
利用数组字面量创建数组

利用 new 创建数组

//var 数组名 = new Array();
var arr = new Array(); // 创建一个新的空数组

注意：Array首字母要大写

利用数组字面量创建数组

//var 数组名 = [];
var arr = ['小白','小黑'，1，true]
//索引号       0     1    2   3
//arr[1]='小黑'

注意：

数组的字面量是方括号 []

索引号从0开始

遍历数组

我们可以通过 for 循环索引遍历数组中的每一项

var arr = ['red','green','blue'];
for (var i = 0;i < arr.length;i++) {
    console.log(arr[i]);
}

数组长度 数组名.length

案例

求数组的和以及平均值

var arr = [2,6,1,7,4];
var sum = 0;
var average = 0;
for(var i = 0;i < arr.length;i++) {
   sum += arr[i];
}
average = sum / arr.length;
console.log(sum,average);

求数组最大值

求数组[2,6,1,77,52,5,7]中的最大值

var arr = [2, 6, 1, 77, 52, 5, 7];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
    if (arr[i] > max) {
        max = arr[i];
     }
}
console.log(max);

数组转换为分割字符串

要求：将数组[‘red’,‘green’,‘blue’,‘pink’]转换为字符串，并且用|或其他符号分割

输出：‘red|green|blue|pink|’

思路：就是把里面的元素相加就好了，但是注意保证是字符相加

需要一个新变量 str 用于存放转换完的字符串。
遍历原来的数组，分别把里面数据取出来，加到字符串变量 str 里面。

var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
for (var i = 0; i < arr.length; i++) {
    str += arr[i] + '|';
}
console.log(str);

数组新增元素

通过修改length长度新增数组元素

可以通过修改 length 长度来实现数组扩容的目的
length 属性是可读写的

var arr = ['red','green'];
console.log(arr.length);
arr.length = 4;
console.log(arr.length);
console.log(arr[2]);
console.log(arr[3]);

其中索引号是2,3的空间没有赋值，就是声明变量未给值，默认值就是 undefined

通过修改数组索引号新增数组元素 (常用)

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据
这种方式也是我们最常用的一种方式

var arr = ['red','green'];
arr[2] = 'blue';
console.log(arr);

案例

新建一个数组，里面存放1~10

var arr = [];
for(var i = 1; i <= 10;i++){
    arr[i-1] = i;
}
console.log(arr);

将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 给新数组
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

筛选数组

要求:将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来放入新数组

方法一

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
         newArr[j] = arr[i];
         j++;
	}
}
console.log(newArr);

方法二

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
//var j = 0;使用newArr.length,初始为0，每次加个数就加一，和j的功能一样
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
         newArr[newArr.length] = arr[i];
	}
}
console.log(newArr);

翻转数组

要求：将数组[1，2，3]反转

输出：[3,2,1]

var arr = [1,2,3,'red'];
var newArr = [];
for(var i = arr.length - 1;i >= 0;i--){
   newArr[newArr.length] = arr[i];
}
console.log(newArr);

冒泡排序

外层循环为趟数，内层循环为交换次数，i，j从0开始因为数组下标从0开始

找规律，i + 交换次数 = arr.length - 1

//从小到大
var arr = [6,2, 7,4, 1, 5, 3];
for (var i = 0; i < arr.length - 1; i++) {//外层循环趟数
    for (var j = 0; j < arr.length - 1 - i; j++) {//内层循环交换次数
        if (arr[j] > arr[j + 1]) {
            //交换数组元素
           var temp = arr[j];
           arr[j] = arr[j + 1];
           arr[j + 1] = temp;
        }
     }
}
console.log(arr);

//从大到小(arr[j] < arr[j+1])
var arr = [6,2, 7,4, 1, 5, 3];
for (var i = 0; i < arr.length - 1; i++) {//外层循环趟数
    for (var j = 0; j < arr.length - 1 - i; j++) {//内层循环交换次数
        if (arr[j] < arr[j + 1]) {
            //交换数组元素
           var temp = arr[j];
           arr[j] = arr[j + 1];
           arr[j + 1] = temp;
        }
     }
}
console.log(arr);

函数

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

函数在使用时分为两步：1.声明变量 2.调用函数

声明变量

function 函数名() {
    //函数体
}

function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum

调用函数

函数名()

调用的时候千万不要忘记加小括号
函数不调用，自己不执行

案例

利用函数求累加和

function getSums(num1, num2) {
	var sum = 0;
	for (var i = num1; i <= num2; i++) {
		sum += i;
	}
	console.log(sum);
}
getSums(1, 100);
getSums(1, 1000);

求两个数的和

function getSum(num1,num2){
    console.log(num1 + num2);
}
getSum(1,2);

函数的参数

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参

参数	说明
形参	形式上的参数函数定义的时候传递的参数当前并不知道是什么
实参	实际上的参数函数调用的时候传递的参数实参是传递给形参的

参数的作用:在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

形参和实参

function(形参1,形参2...){//声明函数的小括号里为形参   
}

函数名(实参1,实参2...);//函数调用的小括号里为实参

形参和实参匹配问题

function getSum(num1,num2){
    console.log(num1 + num2);
}
//1.个数一致，正常输出结果
getSum(1,2);
//2.实参个数多余形参个数，会取到形参的个数，1给num1,2给num2，3就不取了
getSum(1,2,3);//结果为3
//3.实参个数小于形参个数
//形参可以看作是不用声明的变量，num1为1，num2是一个变量但没有接收值，所以是undefined, 数字+undefined=NaN
getSum(1);//结果为NaN

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

JavaScript中形参默认为undefined

函数的返回值return

return 返回结果

有时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值;
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined

示例：

function getSum(num1,num2){
    return num1 + num2;
}
console.log(getSum(1,2));

function getMax(num1, num2) {
 //     if (num1 > num2) {
 //         return num1;
//     } else {
//         return num2;
 //     }
          return num1 > num2 ? num1 : num2;
}
console.log(getMax(2, 4));

function getArrMax(arr){
    var max = arr[0];
    for (var i = 1; i < arr.length; i++) {
    	if (arr[i] > max) {
        max = arr[i];
     	}
	} 
    return max;
}
var re = getArrMax([1,2,3]);
console.log(re);

return 终止函数

return 之后的语句不会被执行
return只能返回一个值，如果用逗号隔开多个值，以最后一个为准
要想返回多个值，可用数组

//返回加减乘除
function getResult(num1,num2){
    return [num1 + num2,num1 - num2,num1 * num2,num1 / num2]
}

返回值两个注意事项

如果有 return ，则返回 return 后面的值
如果没有 return，则返回 undefined

break continue return 区别

break ：结束当前循环体(如 for、while)
continue ：跳出本次循环，继续执行下次循环(如for、while)
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码