前端-JS-对象/简单复杂类型

1. 自定义对象

1. 对象是一组无序的相关属性和方法的集合，如：字符串/数组/数值/函数等

2. 属性：事物的特征，在对象中用属性来表示（常用名词）

3. 方法：事物的行为，在对象中用方法来表示（常用动词）

4. 对象表达结构更清晰，更强大，可以保存一整个完整信息库

5. js对象分为：自定义对象、内置对象、浏览器对象

1. 创建对象-字面量创建

a. 变量是单独声明并赋值，使用的时候直接写变量名（单独存在）

b. 属性在对象里不需要声明，使用时必须是 对象名.属性名/对象名[‘属性名’]

c. 函数是单独声明并调用 函数名()（单独存在）

d. 方法在对象里调用时 对象名.方法()

   ⚠️ 一次只能创建一个对象
   // 创建对象
   var obj = {
      uname:'IU', // 多个属性或方法用逗号隔开
      age:18,
      sex:'女',
      sayHi:function(){
         console.log('hi~');
      }
   }  
   // 调用对象
   console.log(obj.uname);  // 调用对象属性（方法一）
   console.log(obj['age']); // 调用对象属性（方法二）
   obj.sayHi(); // 调用对象方法

2. 创建对象-new Object创建对象

   ⚠️ 一次只能创建一个对象
   // 创建对象
   var obj = new Object();
   obj.uname = 'IU'; // 多个属性或方法用分号隔开
   obj.age = 18;
   obj.sex = '女';
   obj.sayHi = function(){
      console.log('hi~');
   }
   // 调用对象
   console.log(obj.uname);  // 调用对象属性（方法一）
   console.log(obj['age']); // 调用对象属性（方法二）
   obj.sayHi(); // 调用对象方法

3. 创建对象-构造函数创建对象

   ⚠️ 一次创建多个对象，构造函数是泛指某一大类，构造函数创建对象的过程称为对象的实例化
   // 创建对象
   function Star(uname,age,sex){  // 构造函数名首字母必须大写
      this.name = uname;
      this.age = age;
      this.sex = sex;
      this.sing = function(sang){
         console.log('sang')
      }
   }  // 构造函数不需要return就可以返回结果
   // 调用对象
   var ldh = new Star('刘德华'，18,'男');
   console.log(ldh.name);
   ldh.sing('冰雨'); // 调用对象方法
   
   // new关键词的执行步骤
   a. new构造函数可以在内存中创建一个空的对象
   b. this指向创建的空对象
   c. 执行构造函数中的代码，给空对象添加属性和方法
   d. 返回对象

4. 遍历对象属性

   var obj = {
      uname:'IU',
      age:18,
      sex:'女',
   }
   // 利用for(变量 in 对象)遍历所有对象
   for(var k in obj){  // for..in中常用k或key
      console.log(k); // 输出为属性名
      console.log(obj[k]); // 输出为属性值
   }

2. 内置对象

内置对象指js自带的一些对象，这些对象供开发者使用且提供了一些常用或基本必要的属性和方法

文档查询：MDN/W3C

1. Math函数

   Math不是一个构造函数，直接使用即可
   console.log(Math.PI);  // 输出圆周率
   console.log(Math.max(1,2,3));  // 输出为最大值3
   console.log(Math.max(1,'IU'));  // 输出为NaN，非数字无法判定最大值
   console.log(Math.max());  // 输出-Infinity
   
   console.log(Math.abs('-1'));  // 绝对值，输出为1，存在隐式转换
   console.log(Math.abs('IU'));  // 输出为NaN
   console.log(Math.floor(1.9));  // 向下取整，取最小值，输出1
   console.log(Math.ceil(1.1));  // 向上取整，取最大值，输出2
   console.log(Math.round(1.5));  // 就近取整，四舍五入，输出为2（若为负值，-1.5 输出为 -1）
   
   // 随机数random()；返回一个浮点数，范围为(>=0;<1)；里面不跟参数
   function getRandom(min,max){
      Math.ceil = max;
      Math.floor = min;
      return Math.floor(Math.random()*(max - min + 1))+min;
   }  // 输出两个数之间的随机整数且包括这两个数
   

2. 日期对象（Date）

   Date是一个构造函数，需要new来调用创建日期对象
   
   var date = new Date();
   console.log(date);  // 如果Date没有参数则返回系统当前时间
   
   var date = new Date(2019,10,01);  // 输出为：2019年11月1日（数字型参数，不能有分秒）
   var date = new Date('2019-10-1 6:6:6');  // 输出为：2019年10月1日，6点6分6秒（字符串型参数，可以有分秒）
   
   日期格式化：
   console.log(date.getFullYear()); // 返回当前年份
   console.log(date.getMonth() + 1); // 返回当前月份,需要+1(计算机计算月份从0-11)
   console.log(date.getDate()); // 返回当前日
   console.log(date.getDay()); // 返回星期几（周日返回为0）
   console.log(date.getHours()); // 返回当前小时
   console.log(date.getMinutes); // 返回当前分钟
   console.log(date.getSeconds); // 返回当前秒数
   
   Date的时间从1970年1月1日开始计算
   // 获取Date总毫秒数(时间戳)，现在时间距离1970-1-1的总毫秒数
   方法一：用valueOf 或 getTime
   var date = new Date();
   console.log(date.valueOf());
   console.log(date.getTime());
   
   方法二：在new前补上+（常用写法）
   var date1 = +new Date();
   console.log(date1);
   
   方法三：Date.now(),H5新增
   console.log(Date.now());
   
   时间转换公式：
   d = parseInt（总秒数 / 60 / 60 / 24）； // 计算天数
   h = parseInt（总秒数 / 60 / 60 % 24）； // 计算小时
   m = parseInt（总秒数 / 60 % 60）； // 计算分钟
   s = parseInt（总秒数 % 60）； // 计算秒数

3. 数组对象

  // 检测是否为数组
   a. instanceof 运算符
   var arr = [];
   var obj = {};
   console.log(arr instanceof Array); // 返回ture，是数组
   console.log(obj instanceof Array); // 返回false，不是数组
   
   b.Array.isArray() , H5新增
   var arr = [];
   var obj = {};
   console.log(Array.isArray(arr)); // 返回ture，是数组
   console.log(Array.isArray(obj)); // 返回false，不是数组
   
   // 添加删除数组元素
   var arr = [1,2,3];
   a. push() 在数组末尾添加一个或多个数组元素
   arr.push(4); // 输出arr为1，2，3，4，括号内直接写数组元素
   console.log(arr.push(4)); // 输出为4（数组长度）
   
   b. unshift() 在数组开头添加一个或多个数组元素
   arr.unshift(4); // 输出arr为4，1，2，3
   console.log(arr.unshift(4)); // 输出为4（数组长度）
   
   c. pop() 删除数组最后一个元素
   arr.pop(); // 输出为1，2；括号内不写参数
   console.log(arr.pop()); // 输出为3（删除的那个元素）
   
   d. shift() 删除数组第一个元素
   arr.shift(); // 输出为2，3；
   console.log(arr.shift()); // 输出为1（删除的那个元素）
   
   // 数组排序
   a. 翻转数组
   var arr =[1,2,3,4];
   arr.reverse();
   console.log(arr); // 输出为[4,3,2,1]
   
   b. 冒泡排序
   var arr = [1,3,2,5,4];
   arr.sort(); // 只能实现个位数从小到大排序
   console.log(arr); // 输出为[1,2,3,4,5];
   arr.sort(function(a,b){  // 可以实现多位数排序
      return a - b; // 升序排列
      return b - a; // 降序排列
   })
   
   // 数组索引方法(数组去重方法)
   var arr = ['red','green','blue','pink'];
   a. indexOf(数组元素)，从前往后查询，存在多个相同元素时只返回数组第一个满足条件的索引号，若数组无该元素返回为-1
   console.log(arr.indexOf('blue'));  // 输出为2，索引号为2
   
   b. lastIndixOf(数组元素)，从后往前查询，存在多个相同元素时只返回数组最后一个满足条件的索引号，若数组无该元素返回为-1
   console.log(arr.laseIndexOf('green')); // 输出为1，索引号为1
   
   // 数组转换为字符串
   var arr = [1,2,3];
   a. toString() 多个值之间用逗号分隔（默认）
   console.log(arr.toString()); // 输出为1，2，3
   
   b. join() 括号内为多个值之间的分隔符号，可自定义(默认为逗号分隔)
   console.log(arr.join('&')); // 输出为1&2&3
   
   // 连接数组
   concat() 连接两个或多个数组，返回一个新数组，不影响原数组
   var arr = [1,2,3,4,5];
   var arr1 = [6,7,8,9];
   var newArr = arr.concat(arr1);
   console.log(newArr);  // 输出为[1,2,3,4,5,6,7,8,9]
   
   // 数组截取
   slice(start, end) 数组截取start到end的元素（不包括end）
   // 括号内可留空，则输出原始数组（括号内为元素索引号）
   // start与end可只写一个，则输出相应索引号之后的元素
   // 为负值的则从后往面算相应的个数
   // start大于数组索引号，则返回一个空数组，end大于索引号，则取到数组最后一个元素
   var arr = ['ant', 'bison', 'camel', 'duck','pink','elephant'];
   console.log(-2)； // 输出为['pink','elephant']
   console.log(2,-2); // 输出为['camel', 'duck']
   console.log(2,5); // 输出为['camel', 'duck','pink'],不包含第5个元素
   
   // 数组删除
   splice(数字) 数组删除
   // 括号中第一数代表数组中第几个元素（若为负值则从后往前计算相应个数），若果只有一个数，则代表删除这个数后面的所有元素
   // 括号中第二数代表第一个数开始后面的多少个元素（增加元素时可为0）
   // 括号中第三个开始代表数组内需要添加的元素
   var arr = ['IU','IU1','IU2','IU3'];
   arr.splice(3);  // 输出为['IU','IU1','IU2'],删除第三个元素之后的所有元素
   arr.splice(3,0,'IU4');  // 输出为['IU','IU1','IU2','IU4','IU3'],在第三个元素后添加一个新元素
   arr.splice(3,2); // 输出为['IU','IU1','IU2'],删除第三个元素后的两个元素
   arr.splice(-3,2); // 输出为['IU','IU3'],删除倒数第三个元素后的两个

4. 字符串对象

   基本包装类型：把简单数据类型包装成为复杂数据类型
   var str = 'andy';
   console.log(str.length);
   // 执行思路：
   var temp = new String('andy'); // 将简单数据类型包装为复杂数据类型
   str = temp; // 把临时变量的值给str
   temp = null; // 销毁临时变量
   
   字符串的不可变：指里面的值不可变，虽然看上去可以改变内容，但只是地址变了，在内存中新开辟了一个空间存放新值
   var str = 'andy';
   str = 'IU';  // andy值还存在，IU值另开辟了一个新的空间，数据量大的情况下加载变慢
   
   a. 字符返回位置，indexOf('要查找的字符',[起始的位置])
   var str = '改革春风吹满地';
   console.log(str.indexOf('春')); // 返回值为2
   console.log(str.indexOf('春',3))； // 从索引3开始往后查找春
   
   ❤️案例：返回'abcoefoxyozzopp'中o的位置以及次数
   function str(str){
      var index = str.indexOf('o');
      var num = 0; // 设置出现次数变量
      while(index !== -1){
         num++; // 出现一次自加1
         index = str.indexOf('o',index + 1);
      }
      console.log(num);
   }
   str('abcoefoxyozzopp');
   
   b. 根据位置返回字符
   	1. charAt(索引号)；
   	var str = 'andy';
   	console.log(str.charAt(3)); // 输出为y
   	2. charCodeAt(索引号)；返回相应索引号的字符ASCII值，判断用户按下了哪个键
   	console.log(str.charCodeAt(0)); // 小写a对应的ASCII为97
   	3. str[索引号]，H5新增
   	console.log(str[0]); // 输出为a
   
   扩展：
   var o = {
      age:19
   }
   if (o['age']){
      console.log('存在该属性')
   }  // 这里可以用来判断对象中是否有该属性
   
   c. 字符串操作方法
   	1. concat() 连接两个字符串，等价于+
   	var str = 'andy';
   	console.log(str.concat('red'));  // 输出为andyred，andy+red
   
   	2. 截取字符床：substr('截取的起始位置','截取几个字符')
   	var str = '改革春风吹满地';
   	console.log(str.substr(2,2)); // 从索引号2开始取2个字符，输出为'春风'
   
   	3. 替换字符床：replace('被替换的字符','替换为的字符')
   	var str = 'andy';
   	console.log(str.replace('a','b')); // 输出为bndy,若存在多个相同字符的情况下，只会替换第一个字符
   
   	4. 字符串转换为数组：split('分隔符')，分隔符取决于字符串中的分隔符号
   	var str = 'red,pink,blue';
   	console.log(str.split(','));  // 输出为['red','pink','blue']
   
   	5. 转换大小写：
   	toUpperCase() // 转换为大写
   	toLowerCase() // 转换为小写

3. javaScrip简单类型与复杂类型

1. 简单类型：又称为简单数据类型或值类型，如：string/number/Boolean/underfined/null

2. null比较特殊，var timer = null；console.log(typeof timer); 返回的值是一个空对象Object（故后续可以用null代替空对象）

3. 复杂类型：又称为引用数据类型，通过new关键字创建的对象都为复杂类型，如：Object/Array/Date

4. 栈：存储简单数据类型，在栈内开辟一个空间存放值

5. 堆：存储复杂数据类型，在栈内存储地址（16进制，系统自动分配），在从这个地址指向堆内的数据

function fn(name){
   this.name = name; // 第二步将p代入name = '刘德华'
}
function f1(x){  // x=p，p的地址复制给x，则x修改p也跟着修改
   console.log(x.name); // 第五步输出结果为'刘德华'
   x.name = '张学友'; // 第六步 x重新赋值为'张学友'，此时p的值也随之更改
   console.log(x.name); // 第七步输出结果为'张学友'
}
var p = new fn('刘德华');  // 第一步赋值p='刘德华'，new创建开启复杂数据类型
console.log(p.name);  // 第三步输出'刘德华'
f1(p); // 第四步调用f1函数，将p传给f1中的x
console.log(p.name); // 第八步输出结果为'张学友'