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

一，内置对象

1，概述

JavaScript中的对象分为3种

1. 自定义对象，属于 ECMAScript
2. 内置对象，属于 ECMAScript
3. 浏览器对象，属于JS独有的

内置对象：指JS语言自带的一些对象，提供开发者使用，提供了一些常用的最基本而必要的功能（属性和方法）

• 内置对象最大的优点就是帮助我们快速开发
• JavaScript提供了多个内置对象：Math，Date，Attay，String等

2，查文档

学习内置对象的使用，只要学会其常用的成员的使用即可，可以查文档学习，通过 MDN/W3C来查询

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

MDN: JavaScript | MDN

如何学习对象中的方法

1. 查询该方法的功能
2. 查看里面参数的意义和类型
3. 查看返回值的意义和类型
4. 通过 demo 进行测试

3，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

<script>
  console.log(Math.max(1, 99, 'pink老师')); // NaN
  console.log(Math.max()); // -Infinity
  
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  console.log(getRandom(1, 10));

</script>

4，日期对象

Date 实例用来处理日期和时间

Date 对象和 Math 对象不一样，他是一个构造函数，所以需要实例化后才能使用

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

Date() 构造函数

new Date();

new Date(value);

new Date(dateString);

new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

• 如果Date()不写参数，就返回当前时间
• 如果Date()里面写参数，就返回括号里面输入的时间
  • 例如日期格式字符串为“2019-5-1”，可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')

日期格式化

<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>

5，数组对象

数组对象的创建

• 字面量方式 [ ]
• new Array([length])new Array(...元素)

检测是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型

Array.isArray() 用于判断一个对象是否为数组，isArray() 是HTML5 中提供的方法

添加删除数组元素的方法

<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>

数组排序

 注意：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>

数组索引方法

 数组转换为字符串

<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>

其他

 slice(start, end)

• start 可以为负数，表示数组尾部开始算起的位置。-1 指最后一个元素，-2 指倒数第二个元素，以此类推
• end 如果没有被指定，表示到最后
• 方法不会修改数组本身，而是返回一个新数组

splice(start[,deleteCount[,item1[,item2[, ...]]]])

• start 表示从什么位置开始添加或删除数组元素
• deleteCount 表示删除的元素数量，如果为 0 ，则表示不能删除数组元素
• item1[,item2[,...]]]] 表示新增的数组元素
• 方法会改变原始数组

6，字符串对象

基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：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>

字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间

根据字符返回位置

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串

<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);
</script>

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

<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>

字符串操作方法（重点）

 replace(被替换的字符串，替换为的字符串）用于在字符串中用一些字符替换另一些字符，只替换第一个

split() 用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组

toUpperCase() 转换大写

toLowerCase() 转换小写

includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false

<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，简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

• 值类型：简单数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string，number，Boolean，undefined，null
• 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型。通过 new 关键字创建的对象（系统对象，自定义对象），如 Object，Array，Date等

2，堆和栈

堆栈空间分配区别

• 栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
• 堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面

 注意：JavaScript中没有堆栈的概念

3，内存分配

值类型变量的数据直接存放在变量（栈空间）中

 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

 4，类型传参

值类型传参：函数的形参也可以看做一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里面的值复制了一份给形参，那么在方法内部对形参做任何修改，的都不会影响到外部变量

引用类型传参：函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里面保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象