js 递归、js对象、js math对象

1.递归

什么是递归？

• 函数的一种应用方式。
• 函数之间可以互相调用。
• 递归是函数调用函数的一种特殊情况。就是函数调用自己。

【注意】在工作中，递归慎用。不到万不得已绝对不要用。

递归的特点

• 函数自己调用自己
• 一般情况都有参数
• 一般情况都有return。

写递归的方法

• 首先要找到递归结束的情况。
• 找本次函数和下次函数执行之间的关系。
• 调用下一次函数。

2.对象

复杂数据类型

• Array 数组
• function 函数
• object 对象

• 万物皆对象
• 我们如果要描述一个人的信息，如果使用基础数据类型，创建的变量之间是独立，不容易看出关系。
• JavaScript中的对象可以是生活中具体事务的一个抽象。
• JavaScript中的对象时无序属性的集合。
• 对象：

• 特有的属性（属性）
• 特有的行为（方法）

• 变量：一个数据
• 数组：一组数据
• 对象：一组有关联的数据
• 函数：放一段可执行的代码。

3.创建对象

创建对象的方法

• new 关键字
• 字面量

• 其实第二种方式本质上是第一种方式，当我们使用第二种方式的时候，js在底层还是调用了第一种方式。第二种是第一种方式的语法糖。用起来比较简单。比较容易接收。

例

    // 1.通过new 关键字创建一个对象
    var grilfriend = new Object();
    //2.通过字面量的方式创建一个对象   
    var boyfriend = {};

4.对象属性

• 对象就是属性的无序集合。
• 属性: 可以是任意类型。 分为属性名与属性值。 是键值对。 一个键对应一个值。 一个属性名对应一个属性值。
• 新增属性：

• 对象名.属性名 = 属性值 点语法
• 对象名[‘属性名’] = 属性值 数组关联语法
• 区别：

• 第二种方式中的属性名可以用变量。第一种不可以。
• 第二种方式可以拼接字符串，第一种不可以。

• 使用属性语法：

• 对象名.属性名
• 对象名[‘属性名’]

• 删除属性：

• delete关键字
• 语法：

• delete 对象名.属性名
• delete 对象名[‘属性名’]

• 修改属性值：

• 对象名.属性名 = 属性值
• 对象名[‘属性名’] = 属性值

• 当你去修改一个属性值的时候，如果该属性不存在，则为新增。如果存在则为修改。

例

    var boyfriend = new Object();
    // 新增属性
    boyfriend.height = 180;
    boyfriend.weight = 70;
    boyfriend.kaicar = function(){
      console.log("单手开法拉利");
    }
    console.log(boyfriend);  //{height: 180, weight: 70, kaicar: ƒ}
    //----------------------------------------------------------------------------------------------
    var boyfriend = new Object();
    // boyfriend.a = 180;
    boyfriend["a"] = 180;
    boyfriend['height'] = 180;
    boyfriend['weight'] = 180;
    boyfriend['height' + 'weight'] = 180;
    console.log(boyfriend);  //{a: 180, height: 180, weight: 180, heightweight: 180}
    //----------------------------------------------------------------------------------------------
    /* 删除属性 */
    var boyfriend = new Object();
    // boyfriend.a = 180;
    boyfriend["a"] = 180;
    boyfriend['height'] = 180;
    boyfriend['weight'] = 180;
    boyfriend['height' + 'weight'] = 180;
    // delete boyfriend.height;
    delete boyfriend["height"];
    console.log(boyfriend);  //{a: 180, weight: 180, heightweight: 180}
    //----------------------------------------------------------------------------------------------
    //使用属性
    var boyfriend = new Object();
    // boyfriend.a = 180;
    boyfriend["a"] = 180;
    boyfriend['height'] = 180;
    boyfriend['weight'] = 180;
    boyfriend['height' + 'weight'] = 180;
    console.log("身高："+boyfriend['height']);  //身高：180
    console.log("体重："+boyfriend.weight);   //体重：180
    boyfriend.weight = 200;
    console.log(boyfriend);  //{a: 180, height: 180, weight: 200, heightweight: 180}

5.基础数据类型与赋值数据类型的区别

• 总结：

• 存储：

• 基础数据类型：在变量中，存放的是值本身。
• 复杂数据类型：在变量中，存放的是指向在堆中的对象的地址。

• 赋值：

• 基础数据类型：将变量中存放的值直接给另一个变量
• 复杂数据类型：将变量中的地址赋值给另外一个变量，两个变量指向同一个对象。

• 比较：

• ==比较的是变量中存放的值。因为基础数据类型存放的是值，比较的时候值相等，两个基础数据类型就相等。但是复杂数据类型存在的是地址，除非指向同一个变量，否则都是false，就算两个对象中的属性一模一样也是false。

例

    var a = 10;
    var b = a;
    b = 20;
    console.log(a);  //10
    console.log(b);  //20
    // -------------------------------------------------------------------------------------------------------------
    var obj1 = {
      name: "张三",
      age: "18"
    }
    var obj2 = obj1;
    obj2.age = 20;
    console.log(obj1);  //{name: "张三", age: 20}  
    console.log(obj2);  //{name: "张三", age: 20}
    console.log(obj1 == obj2);  //true
    var obj3 = {
      name: "张三",
      age: "18"
    }
    console.log(obj1 == obj3);  //false

6.Math对象

• js为我提供一些它定义好的对象，对象中包含了一些属性和方法。

• JS对象：

• 内置对象 属性和方法系统是定义好的
• 自定义对象 需要我们自己定义属性和方法

Math.random 重点

• 作用：返回一个0-1的随机数（只包含0，不包含1）
• 如果需要一个0-n的值，则用Math.random*n
• 如果我需要一个3-10的值 先求出一个0-7的值 在这个值的基础上+3 就是3-10.
• 需要你需要一个n-m的值，先求出0-（m-n）的值，然后再+n。
• parseInt(Math.random()*(m-n)+n)

Math.max(num1,num2)

• 作用：返回两个参数中最大的数。

Math.min(num1,num2)

• 作用：返回两个参数中最小的数。

Math.abs(num)

• 作用：返回参数的绝对值。

Math.round(num) 重点

• 作用：对参数进行四舍五入 (只看小数点后面的一位)

Math.ceil(num) 重点

• 作用：向上取整

Math.floor(num) 重点

• 作用：向下取整

Math.pow(x,y)

• 作用：求x的y次方

Math.sqrt(num)

• 作用：开平方

Math.PI = π 圆周率

例

    console.log(parseInt(Math.random() * 7 + 3));  // 返回一个随机数(整数)
    //-----------------------------------------------------------------------------------------------------
    console.log(Math.max(4,5,6,89,25));  //89
    //-----------------------------------------------------------------------------------------------------
    console.log(Math.min(4,5,6,89,25));  //4
    //-----------------------------------------------------------------------------------------------------
    console.log(Math.abs(-5));  //5
    //-----------------------------------------------------------------------------------------------------
    console.log(Math.round(3.1415));  //3
    //-----------------------------------------------------------------------------------------------------
    console.log(Math.ceil(6.3567));  //7
    //-----------------------------------------------------------------------------------------------------
    console.log(Math.floor(4.99999999));  //4
    //-----------------------------------------------------------------------------------------------------
    console.log(Math.pow(4, 3));  //64
    //-----------------------------------------------------------------------------------------------------
    console.log(Math.sqrt(16));  //4
    //-----------------------------------------------------------------------------------------------------
    console.log(Math.PI);  //3.141592653589793

---

案例练习

• 递归

• 倒叙输出一个正整数。

    倒叙输出一个正整数。
    比如： num = 123456
    fn(num)  654321
    
    123456 % 10 = 6
    12345 % 10 = 5
    1234 % 10 = 4
    123 % 10 = 3
    12 % 10 = 2
    1 < 10  = 1 
   -->
  <script>
    function fn(n) {
      if (n < 10) {
        console.log(n);
      } else {
        console.log(n % 10);
        fn(parseInt(n / 10));
      }
    }
    fn(123456)
    // 第一次进入fn（123456）   n = 123456  6
    // 第二次进入fn(12345) n = 12345  5
    //第三次进入fn（1234）  4  
    // 第四次进入fn（123） 3
    // 第五次进入fn（12） 2
    // 第六次进入fn（1） 1

• 封装一个函数：随机产生一个十六进制的颜色值。

  <div class="box"></div>
  <button id="btn">修改颜色</button>

    .box {
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: blueviolet;
    }
    #btn{
      margin-top: 600px;
      margin-left: 920px;
    }

    function getColor() {
      /* 
      常见的几种十六进制颜色
       #ff6700 
      #cccccc
      */
      //  每一个十六进制颜色开头都有一个#
      var str = "#"
      // 拼接后面的十六进制数
      // 因为Math.random只能产生数字，字母无法产生。所以我们可以用数组的方式，存储16进制的数字。
      var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
      // 使用Math.random去随机生成下标，用下标去获取数组中的值。
      for (var i = 0; i < 6; i++) {
        var index = parseInt(Math.random() * 16);
        str += arr[index];
      }
      return str;
    }
    var btn = document.getElementById("btn");
    btn.onclick = function () {
      var color = getColor();
      var box = document.getElementsByTagName("div")[0];
      box.style.backgroundColor = color;
    }