JS基础语法（二）——对对象的详细认识

阳光穿透心脏的1/2处 2023-03-04 13:30 1阅读 0赞

### 这里写目录标题 ###

*  对象
 *   *  对象的创建方式
     *  new关键词
     *  this详解
 *  对象的使用
 *   *  遍历对象的属性
     *  删除对象的属性
     *  简单类型和复杂类型的区别
     *   *  基本类型在内存中的存储
         *  复杂类型在内存中的存储
         *  基本类型作为函数的参数
         *  复杂类型作为函数的参数
 *  内置对象
 *   *  MDN
     *  如何学习一个方法？
     *  Math对象
     *   *  案例
     *  Date对象
     *  案例
     *  Array对象
     *   *  案例
     *  基本包装类型
     *  String对象
     *   *  案例

# 对象 #

## 对象的创建方式 ##

*  对象字面量

var o = { 
      name: 'zs',
      age: 18,
      sex: true,
      sayHi: function () { 
        console.log(this.name);
      }
    };

*  new Object()创建对象

var person = new Object();
    person.name = 'lisi';
    person.age = 35;
    person.job = 'actor';
    person.sayHi = function() { 
      console.log('Hello,everyBody');
    }

*  工厂函数创建对象

function createPerson(name, age, job) { 
      var person = new Object();
      person.name = name;
      person.age = age;
      person.job = job;
      person.sayHi = function(){ 
        console.log('Hello,everyBody');
      }
      return person;
    }
    var p1 = createPerson('张三', 22, 'actor');

*  自定义构造函数  
    帕斯卡命名 第一个单词的第一个字母大写，后续的每一个单词的第一个字母都大写

// new Object();
    // new Hero();

## new关键词 ##

> 构造函数 ，是一种特殊的函数。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。

1.  构造函数用于创建一类对象，首字母要大写。
2.  构造函数要和new一起使用才有意义。

**new 的执行过程**

*  new会在内存中创建一个新的空对象
 *  new 会让this指向这个新的对象
 *  执行构造函数 目的：给这个新对象加属性和方法
 *  new会返回这个新对象

## this详解 ##

this出现在以下位置，分别代表什么

1.  函数中 – this 指向Window
2.  在方法中 – this 指向的是这个方法所属的对象
3.  构造函数中 – this 就是构造函数创建的对象

//函数
         function fn() { 
           console.log(this);
         }
         fn();
         //对象
         var obj = { 
           name: 'zs',
           fn: function () { 
             console.log(this.name);
           }
         };
         obj.fn();
    
        // 构造函数
        function Fn() { 
          this.name = 'zs';
          this.age = 18;
          console.log(this);
        }
         var o = new Fn();  // 调用构造函数
    
        Fn(); // 函数调用

# 对象的使用 #

## 遍历对象的属性 ##

var obj = { };
    for (var i = 0; i < 10; i++) { 
      obj[i] = i * 2;
    }
    for(var key in obj) { 
      console.log(key + "==" + obj[key]);
    }

## 删除对象的属性 ##

delete  对象.属性;

## 简单类型和复杂类型的区别 ##

> 基本类型又叫做值类型，复杂类型又叫做引用类型
> 
> 值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。
> 
> 引用类型：复杂数据类型，在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。

*  堆和栈
    
        堆栈空间分配区别：
        　　1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，
        　　局部变量的值等。 
        　　2、堆（操作系统）： 存储复杂类型(对象)，一般由程序员分配释放，
        　　 若程序员不释放，由垃圾回收机制回收。
 *  注意：JavaScript中没有堆和栈的概念，此处我们用堆和栈来讲解，目的方便理解和方便以后的学习。

### 基本类型在内存中的存储 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]

### 复杂类型在内存中的存储 ###

所有的对象都是基于Object  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]

### 基本类型作为函数的参数 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]

### 复杂类型作为函数的参数 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]

# 内置对象 #

## MDN ##

Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。

*  [MDN][]
 *  通过查询MDN学习Math对象的random()方法的使用

## 如何学习一个方法？ ##

1.  方法的功能
2.  参数的意义和**类型**
3.  返回值意义和**类型**
4.  demo进行测试

## Math对象 ##

**Math 不是一个构造函数，里面提供是静态成员**  
[Math][]

Math.PI						// 圆周率
    Math.random()				// 生成随机数
    Math.floor()/Math.ceil()	 // 向下取整/向上取整
    Math.round()				// 取整，四舍五入
    Math.abs()					// 绝对值
    Math.max()/Math.min()		 // 求最大和最小值
    
    Math.sin()/Math.cos()		 // 正弦/余弦
    Math.power()/Math.sqrt()	 // 求指数次幂/求平方根

### 案例 ###

// - 求10-20之间的随机数 [10, 20] 整数
        // Math.random() -> [0, 1) 小数
        // Math.random() * 20 -> [0, 20) 包含小数部分
        // Math.random() * (20 - 10) -> [0, 10) 包含小数部分
        // Math.random() * (20 - 10) + 10 -> [10, 20) 包含小数部分
    
    
        // Math.floor(Math.random() * (max - min + 1) + min);
        // Math.floor(Math.random() * (20 - 10 + 1) + 10);
        // Math.floor(Math.random() * 11 + 10); -> Math.floor([0, 11) + 10) -> Math.floor([10, 21)) -> -> Math.floor([10, 20]) -> [10, 20] 整数
        
        // function random(min, max) { 
        // return Math.floor(Math.random() * (max - min + 1) + min);
        // }
    
        // console.log(random(10, 20));

//模拟Math对象法max(),min()
    var MyMath = { 
        max: function () { 
         var max = arguments[0];
         for (var i = 1; i < arguments.length; i++) { 
           if (max < arguments[i]) { 
             max = arguments[i];
           }
         }
         return max;
        },
        min: function () { 
          var min = arguments[0];
           for (var i = 1; i < arguments.length; i++) { 
             if (min > arguments[i]) { 
               min = arguments[i];
             }
           }
           return min;
        }
       };
    
    
       console.log(MyMath.max(10, 1, 100, 20));

## Date对象 ##

创建 `Date` 实例用来处理日期和时间。Date 对象基于**1970年1月1日**（世界标准时间）起的毫秒数。

*  获取当前时间

var d = new Date();

*  Date 是一个构造函数，首先要通过new Date() 来创建日期实例(对象)，实例成员

// 日期构造函数 Date()
        // 1 空构造函数 获取的是当前时间对象
         var d = new Date();  
         console.log(d);
         console.log(d.valueOf());
        // 2 构造函数中传入 毫秒值
         var d = new Date(1502088177998);
         console.log(d);
        // 
        // 3 可以传入日期形式的字符串
         var d = new Date('1988-8-8 8:8:8');
         console.log(d);
         console.log(d.valueOf());
    
        // 
        // 4 可以传入数字
         var d = new Date(1928, 8, 8);
         console.log(d);
         console.log(d.valueOf());

*  获取日期的毫秒形式

// // 获取日期对象的毫秒值 不用我们调用
         console.log(d.valueOf());
         和valueOf的作用是一样的
        // console.log(d.getTime());

*  日期格式化方法

toString()		// 转换成字符串 ,打印日期对象的时候。内部调用了toString()
    valueOf()		// 获取毫秒值
    // 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
    toDateString()
    toTimeString()
    toLocaleDateString()
    toLocaleTimeString(

)

*  获取日期指定部分

getTime()  	  // 返回毫秒数和valueOf()结果一样
    getMilliseconds() 
    getSeconds()  // 返回0-59
    getMinutes()  // 返回0-59
    getHours()    // 返回0-23
    getDay()      // 返回星期几 0周日 6周6
    getDate()     // 返回当前月的第几天
    getMonth()    // 返回月份，***从0开始***
    getFullYear() //返回4位的年份 如 2016

## 案例 ##

*  计算时间差，返回相差的天/时/分/秒

function getInterval(start, end) { 
    			  var day, hour, minute, second, interval;
    			  interval = end - start;
    			  interval /= 1000;
    			  day = Math.round(interval / 60 / 60 / 24);
    			  hour = Math.round(interval / 60 / 60 % 24);
    			  minute = Math.round(interval / 60 % 60);
    			  second = Math.round(interval % 60);
    			  return { 
    			    day: day,
    			    hour: hour,
    			    minute: minute,
    			    second: second
    			  }
    			}

## Array对象 ##

*  创建数组对象的两种方式
    
     *  字面量方式
     *  new Array()
 *  检测一个对象是否是数组
    
     *  instanceof
     *  Array.isArray() HTML5中提供的方法，有兼容性问题
    
    函数的参数，如果要求是一个数组的话，可以用这种方式来进行判断
 *  toString()/valueOf()
    
     *  toString() 把数组转换成字符串，逗号分隔每一项
     *  valueOf() 返回数组对象本身
 *  数组常用方法
    
    演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

// 1 栈操作(先进后出)
    push()
    pop() 		//取出数组中的最后一项，修改length属性
    // 2 队列操作(先进先出)
    push()
    shift()		//取出数组中的第一个元素，修改length属性
    unshift() 	//在数组最前面插入项，返回数组的长度
    // 3 排序方法
    reverse()	//翻转数组
    sort(); 	//即使是数组sort也是根据字符，从小到大排序
    // 带参数的sort是如何实现的？
    // 4 操作方法
    concat()  	//把参数拼接到当前数组
    slice() 	//从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
    splice()	//删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
    // 5 位置方法
    indexOf()、lastIndexOf()   //如果没找到返回-1
    // 6 迭代方法 不会修改原数组(可选) html5
    every()、filter()、forEach()、map()、some()
    // 7 方法将数组的所有元素连接到一个字符串中。
    join()

*  清空数组

// 方式1 推荐 
    arr = [];
    // 方式2 
    arr.length = 0;
    // 方式3
    arr.splice(0, arr.length);

### 案例 ###

*  工资的数组\[1500, 1200, 2000, 2100, 1800\],把工资超过2000的删除

// 方式1
    var array =  [1500,1200,2000,2100,1800];
    var tmpArray = [];
    for (var i = 0; i < array.length; i++) { 
      if(array[i] < 2000) { 
        tmpArray.push(array[i]);
      }
    }
    console.log(tmpArray);
    // 方式2
    var array =  [1500, 1200, 2000, 2100, 1800];
    array = array.filter(function (item, index) { 
      if (item < 2000) { 
        return true;
      }
      return false;
    });
    console.log(array);

## 基本包装类型 ##

为了方便操作简单数据类型，JavaScript还提供了三个特殊的简单类型类型：String/Number/Boolean

// 下面代码的问题？
    // s1是基本类型，基本类型是没有方法的
    var s1 = 'zhangsan';
    var s2 = s1.substring(5);
    
    // 当调用s1.substring(5)的时候，先把s1包装成String类型的临时对象，再调用substring方法，最后销毁临时对象, 相当于：
    var s1 = new String('zhangsan');
    var s2 = s1.substring(5);
    s1 = null;

*  \[“c”, “a”, “z”, “a”, “x”, “a”\]找到数组中每一个a出现的位置

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
    do { 
      var index = array.indexOf('a',index + 1);
      if (index != -1){ 
        console.log(index);
      }
    } while (index > 0);

## String对象 ##

*  字符串的不可变  
    **字符串的所有方法 都不会修改原始字符串(字符串的不可变性)，都会返回一个新的字符串**
 *  创建字符串对象

var str = new String('Hello World');

*  字符串对象的常用方法

// 1 字符方法
    charAt()    	//获取指定位置处字符
    charCodeAt()  	//获取指定位置处字符的ASCII码
    str[0]   		//HTML5，IE8+支持 和charAt()等效
    // 2 字符串操作方法
    concat()   		//拼接字符串，等效于+，+更常用
    slice()    		//从start位置开始，截取到end位置，end取不到
    substring() 	//从start位置开始，截取到end位置，  end取不到
    substr()   		//从start位置开始，截取length个字符
    // 3 位置方法
    indexOf()   	//返回指定内容在元字符串中的位置
    lastIndexOf() 	//从后往前找，只找第一个匹配的
    // 4 去除空白   
    trim()  		//只能去除字符串前后的空白
    // 5 大小写转换方法
    to(Locale)UpperCase() 	//转换大写
    to(Locale)LowerCase() 	//转换小写
    // 6 其它
    search() 
    replace()
    split()

### 案例 ###

*  截取字符串"我爱中华人民共和国"，中的"中华"

// var s = '我爱中华人民共和国';
        // // 第一个参数，截取的开始位置
        // // 第二个参数，截取的长度
        // var newStr = s.substr(2, 2);
        // console.log(newStr);

*  "abcoefoxyozzopp"查找字符串中所有o出现的位置

// indexOf lastIndexOf
        // var s = 'abcoefoxyozzopp';
        // // 当查找不到的时候返回的是-1
        // // console.log(s.indexOf('o', 4));
        // var index = -1;
        // do { 
        // index = s.indexOf('o', index + 1);
        // if (index !== -1) { 
        // console.log(index);
        // }
        // } while (index !== -1);

*  "abcoefoxyozzopp"把字符串中所有的o替换成!

// var s = 'abcoefoxyozzopp';
    
        // // abc!efoxyozzopp
        // // 只会替换第一个找到的字符串
        // // s = s.replace('o', '!');
        // // console.log(s);
        // // 
        // var index = -1;
        // do { 
        // index = s.indexOf('o', index + 1);
    
        // if (index !== -1) { 
        // // 替换
        // s = s.replace('o', '!');
        // }
        // } while(index !== -1);
        // console.log(s);

*  // 把字符串中的所有空白去掉’ abc xyz a 123 ’

// trim() 只可以去除字符串前后的空格
        // s = s.trim();
        // console.log('===' + s + '===');
        // 
        // 思路1 可以把 字符串中的所有 空格 字符串 用replace替换成 ''空字符串
        // 思路2 使用split 简化
        
        // split 演示如何使用
        // var str = 'a,b,c,d';
        // var arr = str.split(',');
        // console.log(arr.join('!'));
        // // 
         // var s = ' abc xyz a 123 '; 
         // var arr = s.split(' ');
         // console.log(arr.join(''));

*  判断一个字符串中出现次数最多的字符，统计这个次数
 *  2 求最大值 并且找到次数最多的字符

// abcoefoxyozzopp
        // 
        // 出现次数最多的字符 和 此字符出现的次数
        // 
        // 1 统计每一个字符出现的次数
       
        // 
        // 要求的出现次数最多的字符
        // var s = 'abcoefoxyozzopp';
        // var ch;
        // // 此字符出现的次数
        // var num;
        // // 记录字符串中每一个字符出现的次数
        // var o = {}; 
    
        // for (var i = 0; i < s.length; i++) { 
        // var item = s.charAt(i);
        // if (o[item]) { 
        // // 已经有该属性，+1
        // o[item]++;
        // } else { 
        // // 对象中没有该属性
        // o[item] = 1;
        // }
        // }

// // 2 求最大值 并且找到次数最多的字符
        // // 假设最大值是1
        // num = 1;
        // for (var key in o) { 
        // if (num < o[key]) { 
        // // 最多的次数
        // num = o[key];
        // // 次数最多的字符
        // ch = key;
        // }
        // }
    
        // console.log(num);
        // console.log(ch);

*  获取url的参数

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20230208/4b2ca87b606f40dcbc46d922fa3f8146.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: /images/20230208/a1239c7fb56c4769ad96e0e5075cb55e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: /images/20230208/34769dbf0998486c90719573ec38aaae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]: /images/20230208/397ee6077ba04d39a89faeb25ae32559.png
[MDN]: https://developer.mozilla.org/zh-CN/
[Math]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math