1-5 内置对象 简单类型与复杂类型

142 阅读3分钟

一、内置对象

1.概述

javascript中的对象分为3种类型

  • 自定义对象 属于ecmascript
  • 内置对象 属于ecmascript
  • 浏览器对象 属于js独有 内置对象: js自带的一些对象,供开发者使用,带一些基本而必要的功能
  • 内置对象最大的优点就是帮助我们快速开发
  • js提供了多个内置对象,Date、Array、String、Math、正则等

2.Math对象

Math对象不是构造函数,它具有数学常数和函数的属性和方法,跟数学相关的运算(求绝对值、取整、最大值等)可以使用Math中的成员。

Math.PI				// 圆周率
Math.floor()	// 向下取整
Math.ceil()		// 向上取整
Math.round()	// 四舍五入版 就近取整   注意 -3.5   结果是  -3 
Math.abs()		// 绝对值
Math.max()
Math.min()		// 求最大和最小值 
Math.random()	// 随机数方法,返回一个随机的小数  0 =< x < 1

3.日期对象

Date实例用来处理日期和时间
Date对象与Math对象不一样,它是一个构造函数,需要实例化后才能使用。

var now = new Date();
console.log(now);

image.png

<script>
    // 格式化日期 年月日 
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;// 月份加1
    var dates = date.getDate();
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay();

    console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

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

获取日期的总的毫秒形式

Date对象是基于1970年1月1日(世界标准时间)起的毫秒数,常利用总的毫秒数来计算时间,因为这样更精确。
valueOf()、getTime()、+new Date()、Date now()获得距离1970年1月1日过了多少毫秒数。

<script>
    // 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
    // 1. 通过 valueOf()  getTime()
    var date = new Date();
    console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
    console.log(date.getTime());
  
    // 2. 简单的写法 (最常用的写法)
    var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
    console.log(date1);
  
    // 3. H5 新增的 获得总的毫秒数
    console.log(Date.now());
</script>

4.数组对象

数组对象的创建

  • 字面量方式[]
  • new Array([length])或new Array(...元素) 检测是否为数组
  • instanceof 运算符,可以判断一个对象是否是某种类型
  • Array.isArray()判断一个对象是否是数组 isArray是H5提供的方法 添加删除数组元素的方法 image.png
<script>
  var arr = [1, 2, 3];
  
  // 1. push() 
  console.log(arr.push(4, 'pink'));
  console.log(arr);

  // 2. unshift()
  console.log(arr.unshift('red', 'purple'));
  console.log(arr);

  // 3. pop()
  console.log(arr.pop());
  console.log(arr);

  // 4. shift()
  console.log(arr.shift());
  console.log(arr);
</script>

数组排序

image.png

注意: sort()默认按照比较字符串大小的方式进行排序,数字也是,除非传入一个方法。

<script>
  // 数组排序
  // 1. 翻转数组
  var arr = ['pink', 'red', 'blue'];
  arr.reverse();
  document.write(arr + '<br/>');

  // 2. 数组排序(冒泡排序)
  var arr1 = [13, 4, 77, 1, 7];
  document.write(arr1 + '<br/>');  // 1,13,4,7,77

  arr1.sort(function (a, b) {
    // return a - b; // 升序的顺序排列 1,4,7,13,77
    return b - a; // 降序的顺序排列 77,13,7,4,1
  });
  document.write(arr1);
</script>

数组索引方法

image.png 数组转换成字符串

<script>
  var arr1 = ['green', 'blue', 'pink'];
  console.log(arr1.join()); // green,blue,pink
  console.log(arr1.join('-')); // green-blue-pink
  console.log(arr1.join('&')); // green&blue&pink
</script>

其他

image.png 5.字符串对象

  • 基本包装类型:为了方便操作基本数据类型,js提供了三个特殊的引用类型String、Number、Boolean。
  • 把简单数据类型包装成复杂数据类型,这样简单数据类型就有了属性和方法。
<script>
  var str = 'cess';
  console.log(str.length);
  // 对象 才有 属性和方法   复杂数据类型才有 属性和方法 
  // 简单数据类型为什么会有length 属性呢? 

  // 1 把简单数据类型包装为复杂数据类型 
  var temp = new String(str);
  // 2 把临时变量的值 给 str
  str = temp;
  // 3 销毁这个临时变量
  temp = null;
</script>

字符串的不可变 指的是里面的值不可变,虽然看上去内容改变了,但其实改变的是内存,新开辟了一块内存放字符串
根据字符返回位置 字符串所有的方法都不会修改字符串本身,(因为字符串本身是不可修改的)操作完成会返回一个新的字符串

image.png

<script>
  // 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
  // 核心算法:先查找第一个o出现的位置
  var str = "oabcoefoxyozzopp";
  
  var index = 0;
  var num = 0;
  while (true) {
    index = str.indexOf('o', index);
    if(index === -1) {
      break;
    }
    console.log(index);
    index++;
    num++;
  }
  console.log('o出现的次数是: ' + num);
  // 课后作业 ['red', 'blue', 'red', 'green', 'pink','red'], 求 red 出现的位置和次数
</script>

根据位置返回字符(重点)

image.png

<script>
  // 根据位置返回字符
  // 1. charAt(index) 根据位置返回字符
  var str = 'cess';
  console.log(str.charAt(3));
  // 遍历所有的字符
  for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
  }

  // 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的: 判断用户按下了那个键
  console.log(str.charCodeAt(0)); // 99

  // 3. str[index] H5 新增的
  console.log(str[0]); // c

  
  // 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。
  // 把每个字符都存储给对象, 如果对象没有该属性,就为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;
    }
  }
  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>

字符串操作方法(重点)

image.png

<script>
  // 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
  var str = 'cesscess';
  console.log(str.replace('e', 'b')); //cbsscess
  // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
  var str1 = 'abcoefoxyozzopp';
  while (str1.indexOf('o') !== -1) {
    str1 = str1.replace('o', '*');
  }
  console.log(str1);

  // 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
  var str2 = 'red,pink,blue';
  console.log(str2.split(','));
  var str3 = 'red&pink&blue';
  console.log(str3.split('&'));
</script>

二、简单类型与复杂类型

1.堆和栈

堆栈空间分配区别:
栈:由操作系统自动分配释放存放函数的参数、局部变量等值,其操作方式类似数据结构中的栈,简单数据类型放栈里面。
堆:存储复杂类型数据(对象),一般由程序员分配释放,若不释放,由垃圾回收机制回收,复杂数据类型放堆里面。
注意: js中没有堆栈的概念,通过这个堆栈的概念便于理解代码运行的方式。

2.类型传参

值类型传参
函数的形参也可以看做是一个变量,当我们把一个值类型的变量作为参数传给函数形参时,其实是把变量在栈空间的值复制了一份给形参,那么方法内部对形参做任何改变都不会影响外部的变量。
引用类型传参
函数的形参也可以看做是一个变量,当我们把一个引用类型的变量作为参数传给函数形参时,其实是把变量在栈空间的地址复制了一份给形参,形参和实参其实保存的都是同一个堆地址,所以操作的是同一个对象。