JavaScript进阶（二）（对象，内置对象）

1.对象

1.1 定义：一个具体的事物，在JavaScript中，对象是一组无序的相关属性和方法的集合，所有事物都是对象，比如字符串，数值，数组

属性：事物的特征，颜色，大小等

方法：事物的行为，吃饭，喝水等

1.2 创建对象的方法

1.2.1 利用字面量创建对象 {}

var obj={}

//示例
var obj={
//属性
uname:'那好',
age:19,
sex:'男',
//方法,后面跟匿名函数
sayHi:function(){

console.log('Hi')
}
}

调用对象：

对象名.属性名

console.log(obj.uname);
console.log(obj.age);
console.log(obj.sex);

 对象名['属性名']

console.log(obj['uname']);
console.log(obj['age']);
console.log(obj['sex']);

调用对象的方法： 对象名.方法名()

obj.sayHi()

示例

  <script>
    var dog = {
      dogName: 'KeKe',
      dogType: '阿拉斯加犬',
      dogAge: 5,
      dogColor: '棕色',
      dogBark: function () {
        return '正在叫';
      },
      dogShowFilm: function () {
        return '正在演电影';
      }
    }
    console.log(dog['dogName']);
    console.log(dog['dogType']);
    console.log(dog['dogAge']);
    console.log(dog['dogColor']);
    console.log(dog.dogName);
    console.log(dog.dogType);
    console.log(dog.dogAge);
    console.log(dog.dogColor);
    console.log(dog.dogBark());
    console.log(dog.dogShowFilm());
  </script>

1.2.2 利用new Object创建对象

  <script>
    var obj = new Object();
    //添加属性
    obj.uname = '啊啊啊';
    obj.age = 90;
    obj.sex = '男';
    //添加方法
    obj.sayHi = function () {
      return 'HI';
    }
    console.log(obj.uname);
    console.log(obj['age']);
    console.log(obj['sex']);
    console.log(obj.sayHi());
  </script>

 <script>
    var hero = new Object();
    hero.name = '鸣人';
    hero.gender = '男';
    hero.age = 19;
    hero.Skill = function () {
      return '影分身术';
    }
    console.log(hero.name);
    console.log(hero.gender);
    console.log(hero['age']);
    console.log(hero.Skill());

  </script>

1.2.3 利用构造函数创建对象

构造函数：将对象里面一些相同的属性和方法抽象出来封装到函数里面

语法格式：

function 构造函数名(){
this.属性=值；
this.方法=function(){}
}

 构造函数名首字母大写

不用return就会返回结果

只要new 构造函数名() 就会创建一个对象

属性和方法前面必须有this

使用方法：

new 构造函数名()

示例

  <script>
    function Star(uname, age, sex) {
      this.uname = uname;
      this.age = age;
      this.sex = sex;
      this.sing = function (song) {
        return '唱歌' + song;
      }
    }
    var ldh = new Star('刘德华', 20, '男');
    console.log(ldh.uname);
    console.log(ldh['age']);
    console.log(ldh['sex']);
    console.log(ldh.sing('ixo'));
  </script>

  <script>
    function Hero(name, type, blood) {
      this.name = name;
      this.type = type;
      this.blood = blood;
      this.attack = function (skill) {
        return this.name + '的技能是' + skill;
      }
    }
    var lp = new Hero('廉颇', '力量型', 500);
    console.log(lp.name);
    console.log(lp.type);
    console.log(lp.blood);
    console.log(lp.attack('近战'));
    var hy = new Hero('后裔', '射手型', 100);
    console.log(hy['name']);
    console.log(hy['type']);
    console.log(hy['blood']);
    console.log(hy.attack('远战'));
  </script>

1.2.4 new关键字执行过程

（1）new构造函数在内存中创建一个空对象

（2）this都指向刚创建的空对象

（3）执行构造函数里面的代码，给空对象添加属性和方法

（4）返回当前对象

1.2.5 遍历对象

for (变量 in 对象){

}

<script>
    var obj = new Object();
    //添加属性
    obj.uname = '啊啊啊';
    obj.age = 90;
    obj.sex = '男';
    //添加方法
    obj.sayHi = function () {
      return 'HI';
    }

    for (k in obj) {
      console.log(k);//得到属性名
      console.log(obj[k])//得到属性值
    }
  </script>

2.JavaScript的内置对象

JavaScript对象分类：自定义对象，内置对象，浏览器对象

内置对象：JS语言自带的一些对象，这些对象共开发者使用，并提供了一些常用的最基本而必要的功能

常见内置对象：Math，Date，Array，String

2.1 MDN查文档

查阅方法功能，查看参数的意义和类型，查看返回值的意义和类型，demo测试

2.2 Math对象

Math对象不是一个构造函数，不需要用new来调用，而是直接使用里面的属性和方法

<script>
    console.log(Math.PI);
    console.log(Math.max(1, 99, 3));
    console.log(Math.max());//-Inf
    console.log(Math.max(1, 2, 'a'));//NaN
  </script>

封装自己的数字对象

  <script>
    var myMath = {
      PI: 3.14,
      max: function () {
        var max = arguments[0]
        for (var i = 0; i < arguments.length; i++) {
          if (arguments[i] > max) {
            max = arguments[i];
          }
        }
        return max;
      },
      min: function () {
        var min = arguments[0];
        for (var i = 0; i < arguments.length; i++) {
          if (arguments[i] < min) {
            min = arguments[i]
          }
        }
        return min;
      }
    }
    console.log(myMath.PI);
    console.log(myMath.max(2, 7));
  </script>

Math常用

  <script>
   Math.PI  //圆周率
   Math.floor() //向下取整
   Math.ceil() //向上取整
   Math.round() //四舍五入就近取整，.5往大了取，-1.5取-1， 1.5取2
   Math.abs()//取绝对值
   Math.max()/min()  //最大值最小值
  </script>

随机数方法

<script>
    Math.random()//返回0-1之间的小数,取不到1
  </script>

取到两个数之间的随机数并且包含这2个整数

Math.floor(Math.random()*(max-min+1))+min

猜数字游戏

  <script>
    function getRandom() {
      return Math.floor(Math.random() * 10);
    }
    var getr = getRandom();
    console.log(getr);
    var count = 0;
    while (count < 4) {
      var num = Number(prompt('请输入1 - 10之间的数字'));
      count += 1;
      if (num > getr) {
        alert('数字大了，继续猜');
      } else if (num < getr) {
        alert('数字小了，继续猜');
      } else {
        alert('猜对了');

      }
    }
  </script>

2.3 Date对象

Date（）是一个构造函数，必须使用new创建日期对象

var date=new Date()

2.3.1 date没有参数返回当前系统当前时间

日期常用格式

（1）数字型   2019,10,1  这个结果回比实际月份大1

（2）字符串型  '2019-10-1 8:8:8'

  <script>
    //1.使用date,如果没有参数，返回当前系统当前时间
    var date = new Date();
    console.log(date);
    //2.日期常用方法
    //数字型 2019,10,01,返回值比实际月份大1
    // 字符串型 '2019-10-1 8：8：8'
    var date1 = new Date(2019, 12, 1);
    console.log(date1);//j.html:21 Wed Jan 01 2020 00:00:00 GMT+0800 (中国标准时间)

    var date2 = new Date('2019-10-1 8:8:8');
    console.log(date2);//j.html:23 Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)

  </script>

2.3.2 日期格式化

日期格式化

方法	说明
getFullYear()	获取当年
getMonth()	获取当月(0-11)
getDate()	获取当天日期
getDay()	获取星期几(0-6)
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒

  <script>
    var date = new Date();
    console.log(date.getFullYear());
    console.log(date.getMonth() + 1);//月份比实际月份小1，记得加1
    console.log(date.getDate())//周一返回1，周六返回6，周日返回0

    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    var day = date.getDay();
    console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);

  </script>

格式化日期时分秒（不满10的补零）

  <script>
    function getTime() {
      var time = new Date();
      var h = time.getHours();
      h = h < 10 ? '00' + h : h;
      var m = time.getMinutes();
      m = m < 10 ? '00' + m : m;
      var s = time.getSeconds();
      s = s < 10 ? '00' + s : s;
      return h + ':' + m + ':' + s;
    }
    console.log(getTime());
  </script>

获取总的毫秒数 （距离1970年1月1日，也是时间戳）

<script>
    var date = new Date();
    //1.通过valueOf和getTime()获取
    console.log(date.valueOf());
    console.log(date.getTime());
    //2.简单写法
    var date1 = +new Date();
    console.log(date1);
    //3.H5新增的获取总的毫秒数，注意兼容性
    console.log(Date.now());

  </script>

倒计时案例（重点）！！！！！！

用时间戳来做

将来的时间戳减去现在的时间戳，得到的结果转换为时，分，秒

转换公式如下

 <script>
    d = parseInt(总秒数 / 60 / 60 / 24);//天
    h = parseInt(总秒数 / 60 / 60 % 24);//时
    m = parseInt(总秒数 / 60 % 60);//分
    s = parseInt(总秒数 % 60);//秒
  </script>

  <script>
    function countDown(time) {
      var inputTime = +new Date(time);//用户输入时间总毫秒数
      var nowTime = +new Date();//当前时间总毫秒数
      var totalSeconds = (inputTime - nowTime) / 1000;//剩余时间总秒数
      var d = parseInt(totalSeconds / 60 / 60 / 24)
      var h = parseInt(totalSeconds / 60 / 60 % 24);
      var m = parseInt(totalSeconds / 60 % 60);
      var s = parseInt(totalSeconds % 60);
      return d + ':' + h + ':' + m + ':' + s;

    }
    console.log(countDown('2022-6-21 12:20:00'));
  </script>

2.4 数组对象

2.4.1 数组创建

字面量创建
var arr=[]

利用new Array创建
var arr=new Array();
var arr1=new Arrar(2)//这里2表示数组长度，包含2个空元素
var arr2=new Array(2,4)//等价于[2,4],表示数组中有2个元素，2和4

2.4.2 确认是否是数组的方法

（1）instanceof 运算符

（2）Array.isArray(名称)

  <script>
    //(1) instanceof 运算符
    var arr = [];
    console.log(arr instanceof Array);//true
    //(2) Array.isArray(参数); H5新增，IE9以上版本支持
    console.log(Array.isArray(arr));//true
  </script>

2.4.3 在数组中添加或删除元素

 <script>
    var arr = [1, 2, 3];
    var arr2 = arr.push(4, 90);
    console.log(arr2);//5返回新的数组长度
    console.log(arr);
    var p = arr.pop();
    console.log(p);//90 返回删除的值，删除最后一个值
    console.log(arr);
    var u = arr.unshift(76);
    console.log(u);//5 返回新的数组长度
    console.log(arr);
    var s = arr.shift();
    console.log(s);//76 返回删掉的值
    console.log(arr);
  </script>

方法	说明	返回值
push(参数1...)	末尾添加1个或多个元素，注意修改原数组	返回新的数组长度
pop()	删除数组最后一个元素，并把数组长度减少1，无参数，会修改原数组	返回删除的元素
unshift(参数1...)	向数组开头添加一个或多个元素，注意修改原数组	返回新的数组长度
shift()	删除数组的第一个元素，数组长度减少1，无参数，修改原数组	返回第一个元素值

 

 

 

 

 

 2.4.3 数组排序

方法	说明	返回值
reverse()	颠倒元素顺序	该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组，返回新数组

  <script>
    var arr = [1, 2, 3, 4];
    arr.reverse();
    console.log(arr);
    arr2 = [89, 78, 54, 22];
    arr2.sort();//冒泡排序，出现三位数时，排序失败
    console.log(arr2);
    //冒泡排序常规写法
    var arr3 = [80, 567, 43, 32];
    arr3.sort(function (a, b) {
      // return a - b;升序
      return b - a;//降序
    })
    console.log(arr3);
  </script>

2.4.4 数组索引方法

方法名	说明	返回值
indexOf	数组中查找给定元素的第一个索引	存在返回索引号，不存在返回-1
lastIndexOf()	在数组中最后一个的索引	存在返回索引号，不存在返回-1

数组去重——重点案例

思想：遍历旧数组，将旧数组的元素与新数组的元素进行比较，新数组中没有的元素旧添加新数组中

  <script>
    var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'c', 'b'];
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
//比较新旧数组元素
      if (newArr.indexOf(arr[i]) == -1) {
        newArr.push(arr[i]);
      }
    }
    console.log(newArr);
  </script>

2.4.5 数组转换为字符串

（1）toString（）方法

（2）join('分隔符方法')

 <script>
    //1.toString() 将数组转换为字符串
    var arr = [1, 2, 3];
    console.log(arr.toString());
    //2. join('分割符')，默认逗号分隔
    var arr1 = ['pink', 'red', 'blue', 'yellow'];
    console.log(arr1.join());//pink,red,blue,yellow
    console.log(arr1.join('='));//pink=red=blue=yellow
  </script>

2.4.6 其他方法

方法名	说明	返回值
concact()	连接两个或多个数组，不影响原数组	返回一个新的数组
splice()	数组删除splice(第几个开始，要删除的个数)	反会被删除项目的新数组，会影响原数组
slice()	数组截取slice(begin,end)	返回被截取项目的新数组

2.5 基本包装类型

把简单数据类型包装成复杂数据类型，基本数据类型就有方法和属性

基本包装类型包括String，Number和Boolean

2.5.1 根据字符返回位置

方法名	说明
indexOf('要查找的字符',开始的位置)	返回指定内容在源字符串中的位置，找不到就返回-1，开始的位置是index索引号
lastIndexOf（）	从后往前找，只找第一个匹配的

 <script>
    var str = 'ffghhjaafal';
    console.log(str.indexOf('f', 3));
    console.log(str.lastIndexOf('f'))
  </script>

经典案例——统计字符出现的位置

 <script>
    //核心算法
    //先查找第一个o出现的位置
    //index返回的结果不是-1，就继续往后查找
    //因为indexOf只能查找第一个，所以后面的查找，一定是当前索引+1，从而继续查找
    var str = 'abcoefoxyozzopp';
    var index = str.indexOf('o');
    var number = 0;
    while (index !== -1) {
      console.log(index);
      index = str.indexOf('o', index + 1);
      number += 1;
    }
    console.log('o的次数' + number);
  </script>

2.5.2 根据位置返回字符（重点）

方法名	说明	使用
charAt(index)	返回指定位置的字符	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码	str.charCodeAt(0)
str[index]	获取指定位置处的字符	HTML5，IE8+支持，和chatAt()等效

  <script>
    var str = 'andy';
    console.log(str.charAt(3));//y
    console.log(str.charCodeAt(3));//121
    console.log(str[3]);//y
  </script>

案例：获取出现次数最多的字符串并统计出现次数

 <script>
    //核心算法
    //用charAt()遍历字符串
    //把每个字符存户给对象，如果对象没有该属性，就为1，存在了就+1
    //遍历对象，得到最大值和该字符
    var str = 'abcoefoxyozzopp';
    var o = {};
    for (var i = 0; i < str.length; i++) {
      var chars = str.charAt(i);//chars是字符串的每一个字符
      if (o[chars]) {//o[chars]得到的是属性
        o[chars]++;//已有该属性。累加
      } else {
        o[chars] = 1;//没有该元素，赋值1
      }
    }
    console.log(o);

    //遍历对象
    var max = 0;
    var ch = '';
    for (var k in o) {
      if (o[k] > max) {
        max = o[k];
        ch = k;
      }
    }
    console.log(max)
    console.log('最多的字符是' + ch)

  </script>

2.5.3 字符串操作方法

方法名	说明
concat(str1,str2,str3...)	concat()方法用于连接两个或多个字符串，拼接字符串
substr(start,length)	从start位置开始（索引号），length取的个数
slice(start,end)	从start位置开始，取到end位置，end取不到
substring(start,end)	从start位置开始。截取到end位置，end去不带，基本和slice相同，但不接受负值
replace('被替换的字符'，'替换为的字符·')	替换字符
split('分隔符')	将字符转换为数组，分隔符是字符串中的字符
toUpperCase()	转换大写
toLowerCase()	转换小写

  <script>
    var str1 = 'rededede';
    var str2 = 'abc';
    var str3 = 'yusnx';
    var str4 = 'a,v,s,c,d,e'
    console.log(str1.concat(str1, str2, str3));//rededederedededeabcyusnx
    console.log(str1.substr(3, 3));//ede
    console.log(str1.replace('e', 'w'));//rwdedede  注意只替换第一个遇到的字符
    console.log(str4.split(','));// ['a', 'v', 's', 'c', 'd', 'e']
  </script>

练习作业

  <script>
    var str = 'abaasdffggghhjjkkgfddsssss3444343'
    //1.求字符串长度
    console.log(str.length);//33
    //2.取出指定位置的字符，0，3，5，9；
    console.log(str.charAt(0));//a
    console.log(str.charAt(3));//a
    console.log(str.charAt(5));//d
    console.log(str.charAt(9));//g
    //3.查找指定字符是否存在，i,c,b;
    console.log(str.indexOf('i'));//-1
    console.log(str.indexOf('c'));//-1
    console.log(str.indexOf('b'));//1
    //4.替换指定字符，g=22,ss=b;
    console.log(str.replace('g', 22));//abaasdff22gghhjjkkgfddsssss3444343
    console.log(str.replace('ss', 'b'))//abaasdffggghhjjkkgfddbsss3444343
    //5.截取指定位置到结束位置的字符串
    console.log(str.slice(1, 5));//baas
    //找出以上字符产中出现次数最多的字符以及出现的次数
    var str1 = {};
    for (var i = 0; i < str.length; i++) {
      var chars = str.charAt(i);
      if (str1[chars]) {
        str1[chars]++;
      } else {
        str1[chars] = 1;
      }
    }
    console.log(str1);
  </script>

3.简单数据类型和复杂数据类型

简单数据类型：在变量存储时存储的是值本身，string,number,boolean,undefined,null, null返回空对象

复杂数据类型：也叫引用类型，在存储变量时，存储的仅仅是地址，通过new关键字创建的对象，比如Object,Array,Date等

3.1堆和栈

栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值等，简单数据类型存放在栈里面

堆（操作系统）：存储复杂数据类型，一般由程序员分配释放，不释放就会有垃圾回收机制回收，复杂数据类型存放在堆里面