数组

1 基本概念

  1. 数组是指**一组数据的集合**，其中的每个数据被称作**元素**，在数组中可以**存放任意类型的元素**。<br />    换言之, 数组是存放数据的容器

1) 定义数组

语法

  1. //1. 使用[]创建空数组
  2. var  数组名 = []；
  3. //2. 在创建数组时, 给初始值
  4. var  数组名 = ['小白','小黑','小胖'];

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等

示例

  1. var arr = ['小小胖',12,true,28.9]

2) 访问数组元素

通过下标(索引)访问数组元素, 下标从0开始

  1. console.log(arr[0])

3) 添加数组元素

示例

  1. var arr = ['小小胖', 12, true, 28.9]
  2. arr[4] = 'newValue'
  3. arr[6] = '第7个值'
  4. console.log(arr) // 数组的长度为7
  5. console.log(arr[5]) // undefined

4) 删除数组元素

示例

  1. delete arr[1] // 删除数组元素, 不改变数组长度
  2. console.log(arr)
  1. <script>
  2.         var arr = [1,2,3]
  4.         //获取数组长度
  5.         console.log(arr.length);
  6.         console.log(arr);
  8.         //增
  9.         arr[3] = 4;
  10.         console.log(arr);
  11.         arr[6] = 9
  12.         console.log(arr);//中间没有赋值的就是undefined
  13.         console.log(arr[5]);//undefined
  15.         //删
  16.         delete arr[0] 
  17.         console.log(arr);//之后的第0个元素就是undefined
  18.         console.log(arr[0]);//undefined
  20.         //改
  21.         arr[0] = 8
  22.         console.log(arr);//第0个元素变成了8
  24.         //查
  25.         console.log(arr[4]);
  26.     </script>

2 遍历

遍历: 依次访问数组的每一个元素

  1. var arr = ['red','green', 'blue'];
  2. for(var i = 0; i < arr.length; i++){
  3.     console.log(arr[i]);
  4. }
  1. <script>
  2.         var arr = ['李白','杜甫','王勃']
  4.         //常规方式
  5.         console.log(arr[0]);
  6.         console.log(arr[1]);
  7.         console.log(arr[2]);
  9.         //使用for循环
  10.         //长度 length  索引 0-length-1
  11.         for(var i=0;i<arr.length;i++){
  12.             console.log(arr[i]);
  13.         }
  14.     </script>

示例

求数组中的最大值

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

示例

求数组中的和与平均值

  1.  <script>
  2.         var arr = [1,3,5,2,8,6]
  4.         //遍历
  5.         var sum = 0
  6.         for(var i = 0;i < arr.length;i++){
  7.            sum += arr[i]
  8.         }
  10.         console.log(sum);
  11.         console.log(sum/arr.length);
  12.     </script>

3 多维数组

如果一个数组a的一个元素也是一个数组, 数组a就叫多维数组.
即数组的数组,本质还是一个数组,只不过里面的元素是数组

示例

  1. var arr = [1, 2, ['xiaopang', '小小胖']]
  2. // 如何获得小小胖的值
  3. console.log(arr[2][1])
  1. <script>
  2.         /* 3个小组,每个小组有3名成员.每个成员都有业绩
  3.           第一组 [97,98,100]
  4.           第二组[99,88,90]
  5.           第三组[97,78,120]
  6.         想保存所有成员的业绩
  7.         */
  8.        //arr就是一个二维数组(数组的数组),它里面每一个元素都是一个数组
  9.        var arr = [[97,98,100],[99,88,90],[97,78,120]]
  10.        console.log(arr);
  12.        //想拿到第二组的成绩
  13.        console.log(arr[1]);
  15.        //想拿到第二组,第二个成员的成绩
  16.        console.log(arr[1][1]);
  18.        //遍历
  19.        for(var i=0;i<arr.length;i++){
  20.            //console.log(arr[i]);
  21.            for(var j=0;j<arr[i].length;j++){
  22.                console.log(arr[i][j]);
  23.            }
  24.        }
  26.     </script>

函数

1 基本概念

可能会有非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用

我们把实现特定功能的代码块叫做一个函数

  • 函数可以需要的任何时候调用
  • 函数不调用不执行

    1) 函数声明(定义)

    语法

  1. // 声明函数
  2. function 函数名() {
  3.     //函数体代码
  4. }

2) 调用函数

语法

  1. 函数名();

示例

  1. <script>
  2.         //先定义
  3.         function getSum(){
  4.             var sum = 0
  5.             for(var i = 1;i <= 10;i++){
  6.                 sum += i
  7.             }
  8.             console.log(sum);
  9.         }
  11.         //调用
  12.         getSum()
  13.     </script>

2 参数

参数可以使函数实现更加强大的功能
参数相当于一个媒介,调用者可以把要操作的数据通过参数传递到函数内部

1) 实参与形参

语法

  1. // 带参数的函数声明
  2. function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  3.   // 函数体
  4. }
  5. // 带参数的函数调用
  6. 函数名(实参1, 实参2, 实参3...);
  • 形参: 函数声明时参数

  • 实参: 函数调用时参数

    1. <script>
    2.       //先定义
    3.       function getSum(n,m){//形式参数
    4.           var sum = 0
    5.           for(var i = n;i <= m;i++){
    6.               sum += i
    7.           }
    8.           console.log(sum);
    9.       }
    11.       //调用
    12.       getSum(1,100)//实际参数
    13.   </script>

    2) 传参的过程

    传参的过程就是赋值的过程, 将实参的值赋值给形参

    示例

进一步改造, 计算从n到m的和

  1. // 声明函数
  2. function getSum(n, m){
  3.   var sumNum = 0;// 准备一个变量，保存数字和
  4.   for (var i = n; i <= m; i++) {
  5.     sumNum += i;// 把每个数值 都累加 到变量中
  6.   }
  7.   alert(sumNum);
  8. }
  9. // 调用函数
  10. getSum(5, 10);

3 返回值

一般一个函数在调用后, 会产生一个固定的结果, 一般将结果返回出来, 具体要怎么使用这个结果, 不是由函数决定的. 这就是编程里的”单一职责”原则
返回值相当于函数将操作完的数据返回给调用者,这样调用者就可以拿到数据

进一步改造

  1. // 声明函数
  2. function getSum(n, m){
  3.   var sumNum = 0;// 准备一个变量，保存数字和
  4.   for (var i = n; i <= m; i++) {
  5.     sumNum += i;// 把每个数值 都累加 到变量中
  6.   }
  7.   return sumNum
  8. }
  9. // 调用函数
  10. var res = getSum(5, 10)
  11. alert(res)
  12. console.log(res)
  1. <script>
  2.         //先定义
  3.         function getSum(n,m){
  4.             var sum = 0
  5.             for(var i = n;i <= m;i++){
  6.                 sum += i
  7.             }
  8.             //console.log(sum);
  9.             return sum  //返回结果给调用者
  10.         }
  12.         //调用
  13.        var total =  getSum(1,100)//调用者就可以用一个变量来接收
  14.        console.log(total,total/2)
  15.     </script>

练习:

  1.   <script>
  2.         //写一个函数,判断一个年份是否是闰年
  3.         //能被4整除,但是不能被100整除
  4.         //能被400整除
  6.         function isRunYear(year){
  7.             return (year%4==0&&year%100!=0)|| (year%400==0)
  8.         }
  10.         var b =  isRunYear(2022)
  12.         //判断
  13.         if(b){
  14.             console.log("是闰年");
  15.         }else{
  16.             console.log("是平年");
  17.         }
  19.     </script>
  1.  <script>
  2.         //定义函数
  3.         function getMax(arr){
  4.             var max = arr[0]
  5.             for(var i=1;i<arr.length;i++){
  6.                 if(arr[i] > max){
  7.                     max = arr[i]
  8.                 }
  9.             }
  10.             return max  //不要忘记return了
  11.         }
  13.         var arr = [3,2,6,9,8,7]
  14.         console.log(arr);//数组名就代表这个数组
  15.         var max = getMax(arr)//可以直接把数组名传进去
  16.         console.log(max);
  18.     </script>

内置参数,伪数组:

  1. <script>
  2.         //定义函数
  3.         function getMax(){
  4.             //在函数内部,存在一个内置的变量arguments,是个伪数组
  5.             //console.log(arguments);
  7.             var max = arguments[0]
  8.             for(var i =1;i <arguments.length;i++){
  9.                 if(arguments[i] > max){
  10.                     max = arguments[i]
  11.                 }
  12.             }
  14.             return max
  15.         }
  18.       var max = getMax(3,2,6,9,8,7)
  19.       console.log(max);
  21.     </script>

4 函数分类

1)普通函数

  1. 普通函数:有名字的函数

2)匿名函数

  1. 匿名函数:没有名字的函数
  1. <script>
  2.         //普通函数:有名字的函数
  3.         function add(num1,num2){
  4.             return num1 + num2
  5.         }
  7.         //调用:有参数就给,有返回值就接
  8.         var sum = add(1,2)
  9.         console.log(sum);
  11.         //匿名函数:没有名字的函数
  12.         var fun = function (num1,num2){
  13.             return num1 + num2
  14.         }
  15.         console.log(fun);//其实现在函数名就相当是fun
  17.         //调用:使用fun来调用,有参数就给,有返回值就接
  18.         var total = fun(2,3)
  19.         console.log(total);
  21.     </script>

5 函数的注意事项

1,如果没有显示的调用return.则方法没有返回值,如果强行接收,那么接收的就是undefined
2,函数名其实是代表整个函数(类似于数组名代表整个数组)
3.如果实参的个数小于形参的个数,多余的形参运算的时候就是undefined

  1. <script>
  3.         //1,如果没有显示的调用return.则方法没有返回值,如果强行接收,那么接收的就是undefined
  4.         /* function aaa(){
  5.             alert('aaa')
  6.         }
  8.         var bbb = aaa();
  9.         alert(bbb)//undefined */
  11.         //2,函数名其实是代表整个函数(类似于数组名代表整个数组)
  12.         /* function aaa(){
  13.             alert('aaa')
  14.         }
  15.         alert(aaa) */
  17.         //3.如果实参的个数小于形参的个数,多余的形参运算的时候就是undefined
  18.         function add(num1,num2,num3){
  19.             return num1+num2+num3
  20.         }
  22.         var sum = add(1,2)
  23.         console.log(sum);//NAN
  25.         /* var max = Math.max(1,3,9,4)
  26.         console.log(max); */
  27.     </script>

面向对象

概念

  1.     是一个思维方式<br />    面向过程:完成一件事需要多少个步骤(重点关注在步骤)<br />    面向对象:完成一件事需要多少个对象(重点是在找对象)

类

  1. 类是对现实生活中具有相同属性和行为的事物的一个统称 (抽象的,相当于是模板)

对象

  1. 现实生活中一个具体的存在 (具体的,通过模板创建出来的)

类和对象关系

  1. 类相当于是模板,对象是通过这个模板创建出来的一个个真实存在的个体<br />    类中有什么,对象中就有什么<br />类和对象的关系, 可以认为是整体和个体, 抽象和具体的关系<br />通过上面的描述, 总结起来说, 就是
  • 类是对象的集合
  • 对象是类的实例化

    类的定义

    在JS中, 没有类(class)的概念, 主要是通过构造函数来模拟的.[^1]

    语法

  1. function 构造函数名 () {
  2.     // 函数体
  3. }
  1. 使用function关键字表示定义一个构造函数
  2. 构造函数名一般首字母大写

    示例: 2-1构造函数的定义.html

  1. function Person() {
  3. }

通过以上方式就可以定义一个Person构造函数, 相当于定义好了一个Person类

类的三要素
类名
属性:类所具有的特征
行为:类所有具有的功能

类的定义
function 类名(参数1,参数2){
}

  1.  <script>
  2.         //定义类(通过构造函数来定义)
  3.         function Person(){//首字母大写(构造函数的特点)
  5.         }
  7.         //通过类创建对象(实例化对象)
  8.        var p = new Person()
  9.        console.log(p);
  10.        console.log(typeof p);
  11.     </script>

对象的创建方式

方式一: 构造函数创建

  1.  //对象的创建方式
  3.         //方式一:构造函数创建
  4.         //定义类(通过构造函数来定义)
  5.         function Person() {//首字母大写(构造函数的特点)
  7.         }
  9.         //通过类创建对象(实例化对象)
  10.         var p = new Person()
  11.         console.log(p);
  12.         console.log(typeof p);

方式二: 字面量方式

  1. //方式二:字面量方式
  2.         //创建一个空的对象
  3.         var stu1 = {}
  4.         console.log(stu1);
  6.         //创建一个有属性和方法的对象
  7.         var stu2 = {
  8.             name:'张三',
  9.             age:23,
  10.             study:function(){//匿名函数
  11.                 console.log('学习');
  12.             }
  13.         }
  14.         console.log(stu2);
  16.         //访问属性方式一
  17.         console.log(stu2.name);
  18.         //访问属性二
  19.         console.log(stu2['name']);//引号不要漏掉
  21.         //调用方法
  22.         stu2.study()

构造函数的作用

通过构造函数实例化对象

在JS中, 我们通过构造函数(类)来实例化对象

语法

  1. new 构造函数名()

示例: 2-2通过构造函数实例化对象.html

  1. // 一. 定义一个构造函数
  2. function Person() {
  4. }
  5. // 二. 实例化一个对象, 赋值给变量p
  6. var p = new Person();
  7. console.log(typeof p); // object

以上代码

  • 通过new关键字, 产生了一个对象, 并赋值给变量p
  • 通过typeof p测试变量p的类型为object, 说明p是一个对象

    在构造函数中定义属性

    function 类名(参数1,参数2){
    属性的定义
    this.属性名1=参数1
    this.属性名2=参数2
    }
    }

    示例: 2-3在构造函数中定义属性.html

  1. // 一. 定义一个学生类
  2. function Student(n, a) {
  3.     this.uname = n;
  4.     this.age = a;
  5. }
  6. // 二. 实例化对象
  7. var stu = new Student('xiaoming', 20);
  1. <script>
  2.         //定义类(通过构造函数来定义)
  3.         function Person(name,age){//首字母大写(构造函数的特点)
  4.             //定义属性
  5.             this.name = name
  6.             this.age = age
  7.         }
  9.         //通过类创建对象(实例化对象)
  10.        var p1 = new Person('张三',23)
  11.        var p2 = new Person('李四',24)
  12.        console.log(p1);
  13.        console.log(p2);
  16.        /* 手机类
  17.         型号 颜色 尺寸 价格
  19.        */
  21.     </script>

方法的定义

在构造函数中定义方法

function 类名(参数1,参数2){
属性的定义
this.属性名1=参数1
this.属性名2=参数2
this.方法名 = function(){
方法体代码
}
}

方法的使用(调用)

语法

  1. 对象.方法名()
  • 由于方法就是一个函数, 在后面加小括号表示方法的调用

    示例: 3-2调用对象的方法.html

  1. // 三. 调用方法 -- 对象.方法名()
  2. stu.sayHi(); // 大家好

调用方法和属性
对象名.属性名
对象名.方法名

  1. <script>
  2.         //定义类(通过构造函数来定义)
  3.         function Person(name,age){//首字母大写(构造函数的特点)
  4.             //定义属性
  5.             this.name = name
  6.             this.age = age
  7.             //定义方法
  8.             this.eat=function(){
  9.                 console.log('吃饭');
  10.             }
  11.         }
  13.         //通过类创建对象(实例化对象)
  14.        var p1 = new Person('张三',23)
  15.        var p2 = new Person('李四',24)
  16.        console.log(p1);
  17.        console.log(p2);
  19.        //调用属性和方法(必须要有对象名来调用)
  20.        console.log(p1.name);
  21.        p1.eat()
  23.        console.log(p2.name);
  24.        p2.eat()
  25.     </script>

Math对象

简单使用:

  1. <script>
  2.         //圆周率
  3.         console.log(Math.PI);
  4.         //最大值
  5.         console.log(Math.max(1,3,9));
  6.         //最小值
  7.         console.log(Math.min(1,3,9));
  8.     </script>

绝对值和取整:

  1. <script>
  2.         //绝对值
  3.        console.log(Math.abs(-1));
  4.        console.log(Math.abs(1));
  6.        //取整
  7.        console.log(Math.ceil(1.2));//向上取整
  8.        console.log(Math.ceil(1.9));
  10.        console.log(Math.floor(1.2));//向下取整
  11.        console.log(Math.floor(1.9));
  13.        console.log(Math.round(1.2));//四舍五入
  14.        console.log(Math.round(1.9));
  15.        console.log(Math.round(1.5));
  18.     </script>

生成随机数:

  1.  <script>
  2.         //生成0-1之间的随机数 [0,1)
  3.         console.log(Math.random());
  4.         //生成1-10之间的随机数,包含1和10
  5.         //[1,10] --> [0,10) + 1 --> [0,1)*10 + 1
  6.         //[50,100] --> [0,51)+50 --> [0,1)*51 + 50
  8.         //规律 生成[min,max]的随机数(包含min和max)
  9.         //Math.floor(Math.random()*(max-min+1) + min)
  11.         /* 1-199 */
  12.         console.log(Math.floor(Math.random()*199+1));
  15.     </script>