这里写目录标题

• 对象
• 对象的创建方式
• new关键词
• this详解

• 遍历对象的属性
• 删除对象的属性
• 简单类型和复杂类型的区别
• 基本类型在内存中的存储
• 复杂类型在内存中的存储
• 基本类型作为函数的参数
• 复杂类型作为函数的参数

• MDN
• 如何学习一个方法？
• Math对象
• 案例

• 案例

• 案例

对象

对象的创建方式

• 对象字面量

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中没有堆和栈的概念，此处我们用堆和栈来讲解，目的方便理解和方便以后的学习。

基本类型在内存中的存储

复杂类型在内存中的存储

所有的对象都是基于Object

基本类型作为函数的参数

<script>// 简单类型作为函数的参数，在内存中如何存储function fn(a, b) {// 函数的参数 其实就是函数内部的局部变量a = a + 1;b = b + 1;console.log(a);console.log(b);}var x = 10;var y = 20;fn(x, y);//11 21console.log(x);//10console.log(y);//20</script>

复杂类型作为函数的参数

内置对象

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-59getMinutes()  // 返回0-59getHours()    // 返回0-23getDay()      // 返回星期几 0周日   6周6getDate()     // 返回当前月的第几天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()

// 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 迭代方法 不会修改原数组(可选)  html5every()、filter()、forEach()、map()、some()// 7 方法将数组的所有元素连接到一个字符串中。join()

• 清空数组

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

案例

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

// 方式1var 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);// 方式2var 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的参数

<script>// 获取url中?后面的内容// 例如：http://www.itheima.com/login?name=zs&age=18&a=1&b=2// console.log(url.substr(2));// var index = url.indexOf(\'?\') + 1;// console.log(url.substr(index));// {//   name: \'zs\',//   age: 18// }var url = \'http://www.itheima.com/login?name=zs&age=18&a=1&b=2\';// 获取url后面的参数function getParams(url) {// 获取? 后面第一个字符的索引var index = url.indexOf(\'?\') + 1;// url中?后面的字符串 name=zs&age=18&a=1&b=2var params = url.substr(index);// 使用& 切割字符串 ，返回一个数组var arr = params.split(\'&\');var o = {};// 数组中每一项的样子 key = valuefor (var i = 0; i < arr.length; i++) {var tmpArr = arr[i].split(\'=\');var key = tmpArr[0];var value = tmpArr[1];o[key] = value;}return o;}var obj = getParams(url);console.log(obj);console.log(obj.name);console.log(obj.age);</script>