JavaScipt基础

 JavaScipt基础

九、对象（Object）

9.1什么是对象

9.2Javascript中的对象 

9.3如何得到一个对象

9.4this的指向 

 9.5对象的使用

十、标准库对象（内置对象）

10.1Math对象 

 10.1.1常用属性和方法

10.1.2案例 

 10.1.3属性方法对照表

10.2Date 对象(构造函数)

10.2.1常用属性和方法 

10.2.2案例 

 10.2.3方法对照表

 10.3 Array对象

10.3.1常用属性和方法 

10.3.2方法和属性对照表 

10.4String 对象

10.4.1常用属性和方法 

10.4.2方法和属性对照表

10.5包装对象

九、对象（Object）

9.1什么是对象

万物皆对象

现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。
举例： 一部车，一个手机
车是一类事物，门口停的那辆车才是对象
特征：红色、四个轮子
行为：驾驶、刹车

9.2Javascript中的对象 

Javascript中的对象其实就是生活中对象的一个抽象
Javascript的对象是无序属性的集合。
其属性可以包含基本值、对象、数组或函数。
对象就是一组没有顺序的值。
我们可以把Javascript中的对象想象成键值对，其中值可以是数据和函数。
对象的行为和特征
特征---属性
行为---方法

事物的特征在对象中用属性来表示。

事物的行为在对象中用方法来表示。

属性和方法统称为对象的成员。

9.3如何得到一个对象

var obj1 = {};//得到一个空对象
var obj2 = {name:&＃39;张三&＃39;,age:18};//得到拥有两个属性的对象
//得到拥有两个属性和一个方法的对象
var obj3 = {name:&＃39;张三&＃39;,age:18,fei:function(){console.log(&＃39;你上天啊！&＃39;);}
}
•new Object() 创建对象 （内置构造函数）var person = new Object();person.name = &＃39;lisi&＃39;;
person.age = 35;
person.sayHi = function(){console.log(&＃39;Hello,everyBody&＃39;);
}
•自定义构造函数创建对象function Person(name,age,job){this.name = name;this.age = age;this.job = job;this.sayHi = function(){console.log(&＃39;Hello,everyBody&＃39;);}
}
var p1 = new Person(&＃39;张三&＃39;, 22, &＃39;actor&＃39;);

new关键字和构造函数

构造函数 ，是一种特殊的函数，又叫做函数构造器。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。

构造函数用于创建一类对象，首字母通常大写。

构造函数要和new一起使用才有意义。

new 关键字也读做实例化。实例化构造函数，得到一个对象。

9.4this的指向 

Javascript中的this指向问题，比较复杂，有时候会让人难以捉摸，随着学习的深入，我们会不断接触this，

在学习过程中，我们可以不断总结，最终搞清楚this在何种情况下指向何处……

目前，我们只需要记住以下两点就可以了：

1: 函数如果在某个对象下，this就指向这个对象

2: 函数如果被直接调用，this指向window对象

var o1 = {name: &＃39;山治&＃39;,f: function () {console.log(this.name);}
}
o1.f(); // 山治function f(){console.log(this);
}
f();
console.log(window);

 9.5对象的使用

• 方法及属性的使用

对象.方法名()； //调用对象的方法
对象.属性；   //获取对象的属性

• 遍历对象的属性

• 通过for..in语法可以遍历一个对象

var obj1 = {name:&＃39;路飞&＃39;,age : 17,sex : &＃39;男&＃39;,
}for(var k in obj1){console.log(k);console.log(obj1[k]);
}

注意：使用for …in语法，同样可以遍历数组

注意：如果属性名或方法名，是一个变量，则使用对象[变量名] 语法

•删除对象的属性
var obj1 = {name:&＃39;路飞&＃39;,age : 17,sex : &＃39;男&＃39;,
}console.log(obj1.age); //17
delete obj1.age; //删除对象中指定的属性
console.log(obj1.age); // undefined

总结：

创建对象有三种方式，字面量、new内置构造函数及自定义构造函数；对象中有属性及方法，this指向当前对象，使用 . (点) 语法调用属性及方法；

十、标准库对象（内置对象）

Javascript 提供了很多个内置对象：Math/Array/Number/String/Boolean...

对象只是带有属性和方法的特殊数据类型。

我们在学习时其实就是要记住对象的每个属性和方法怎么使用，代表什么含义；

技术问题，遇到分歧，去哪里查找资料：

火狐开发者社区--MDN

微软开发者社区--MSDN

10.1Math对象 

Math - Javascript | MDN

 10.1.1常用属性和方法

Math 是一个内置对象， 它具有数学常数和函数的属性和方法。不是一个函数对象。

与其它全局对象不同的是, Math 不是一个构造函数. Math 的所有属性和方法都是静态的.

跟数学相关的运算直接使用Math中的成员即可

console.log(Math.PI); //圆周率3.141592653589793
Math.random();//介于 0 和 1 之间的伪随机数。Math.ceil(6.6);//获取大于或等于提供数值的最小整数--向上取整
Math.floor(8.8);//获取小于或等于提供数值的最大整数--向下取整
Math.round(9.9);//四舍五入
Math.max(10,20,15);//取多个值中的最大值
Math.min(10,20,15);//取多个值中的最小值
Math.pow(10,2);//返回x的y次幂
Math.sqrt(100);//求平方根

10.1.2案例 

• 求10-20之间的随机数

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

 10.1.3属性方法对照表

Math对象的属性（常量）

Math对象的方法（函数）

10.2Date 对象(构造函数)

Date - Javascript | MDN

10.2.1常用属性和方法 

创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
var now = new Date();
console.log(now.getTime()); // 获取距1970年1月1日（世界标准时间）起的毫秒数
console.log(now.valueOf()); // valueOf用于获取对象的原始值,与getTime()方法相同

Date构造函数的参数
1. 毫秒数 1498099000356 new Date(1498099000356)
2. 日期格式字符串  &＃39;2015-5-1&＃39;  new Date(&＃39;2015-5-1&＃39;)
3. 年、月、日……   new Date(2015, 4, 1)   // 月份从0开始

•获取日期的毫秒形式
var now = new Date();
console.log(now.getTime());
// valueOf用于获取对象的原始值
console.log(now.valueOf());// HTML5中提供的方法，有兼容性问题
var now = Date.now();// 不支持HTML5的浏览器，可以用下面这种方式
var now = + new Date(); // 隐式调用 Date对象的valueOf()
•日期格式化方法
toString() // 转换成字符串
valueOf() // 获取毫秒值
// 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
•获取日期指定部分
getTime() // 返回毫秒数和valueOf()结果一样，valueOf()内部调用的getTime()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份，***从0开始***
getFullYear() //返回4位的年份 如 2016

10.2.2案例 

•案例1：写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(d) {//如果date不是日期对象，返回if (!date instanceof Date) {return;}var year = d.getFullYear(),mOnth= d.getMonth() + 1, date = d.getDate(), hour = d.getHours(), minute = d.getMinutes(), secOnd= d.getSeconds();mOnth= month <10 ? &＃39;0&＃39; + month : month;date = date <10 ? &＃39;0&＃39; + date : date;hour = hour <10 ? &＃39;0&＃39; + hour : hour;minute = minute <10 ? &＃39;0&＃39; + minute:minute;secOnd= second <10 ? &＃39;0&＃39; + second:second;return year + &＃39;-&＃39; + month + &＃39;-&＃39; + date + &＃39; &＃39; + hour + &＃39;:&＃39; + minute + &＃39;:&＃39; + second;
}

•计算时间差，返回相差的天/时/分/秒
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}
}

 10.2.3方法对照表

Date对象 的方法。

 10.3 Array对象

Array - Javascript | MDN

10.3.1常用属性和方法 

length属性: 返回数组的成员数量。 

var arr = [&＃39;a&＃39;, &＃39;b&＃39;];
console.log(arr.length) // 2

常用方法 

• push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

1.  a = [];
   a.push(1) // 1
   a.push(&＃39;a&＃39;) // 2
   a.push(true, {}) // 4
   console.log(a); //[1, &＃39;a&＃39;, true, {}]

• pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组

1.  a = [&＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39;];
   a.pop() // &＃39;c&＃39;
   console.log(a);// [&＃39;a&＃39;, &＃39;b&＃39;]

• slice方法用于提取原数组的一部分，返回一个新数组，原数组不变。

• (从0开始)，第二个参数为终止位置(但该位置的元素本身不包括在内)。 如果省略第二个参数，则一直返回到原数组的最后一个成员。

1.  a = [&＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39;];
   a.pop() // &＃39;c&＃39;
   console.log(a);// [&＃39;a&＃39;, &＃39;b&＃39;]

• join方法用于将数组元素以指定字符拼接为字符串，返回一个字符串，原数组不变。

1.  a = [&＃39;a&＃39;,&＃39;b&＃39;,&＃39;c&＃39;,&＃39;d&＃39;,&＃39;e&＃39;];
   console.log(a.join(&＃39;-&＃39;)) // &＃39;a-b-c-d-e&＃39;

• 返回数组的字符串表示形式。

1.  arr = [1, 2, 3, 4];
   console.log(arr.toString()); //1,2,3,4

10.3.2方法和属性对照表 

Array 对象的属性。

Array 对象的方法。

10.4String 对象

String - Javascript | MDN

10.4.1常用属性和方法 

var s = &＃39;Javascript&＃39;;
// length属性返回字符串的长度。
var i = s.length; //返回参数在字符串中第一次出现的位置
var i = s.indexOf(&＃39;b&＃39;); //从原字符串取出子字符串并返回，不改变原字符串
var i = s.substr(2,4);//从下标第二个开始截取4个长度的字符串
//toLowerCase方法用于将一个字符串全部转为小写
//toUpperCase则是全部转为大写
var i = s.toLowerCase();
var i = s.toUpperCase();// 用于替换匹配的子字符串,只替换第一个匹配
var i = s.replace(&＃39;a&＃39;,&＃39;b&＃39;);
console.log(i);

10.4.2方法和属性对照表

String 对象的属性。

 String 对象的方法。

10.5包装对象

对象是 Javascript 语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”。

所谓“包装对象”，就是分别与数值、字符串、布尔值相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。

var v1 = new Number(123);
var v2 = new String(&＃39;abc&＃39;);
var v3 = new Boolean(true);typeof v1 // "object"
typeof v2 // "object"
typeof v3 // "object"v1 === 123 // false
v2 === &＃39;abc&＃39; // false
v3 === true // false

包装对象的最大目的，首先是使得 Javascript 的对象涵盖所有的值，其次使得原始类型的值可以方便地调用某些方法。

原始类型的值，可以自动当作对象调用，即调用各种对象的方法和参数。

这时，Javascript 引擎会自动将原始类型的值转为包装对象实例，在使用后立刻销毁实例。

比如，字符串可以调用length属性，返回字符串的长度。

&＃39;abc&＃39;.length // 3

上面代码中，abc是一个字符串，本身不是对象，不能调用length属性。

Javascript 引擎自动将其转为包装对象，在这个对象上调用length属性。

调用结束后，这个临时对象就会被销毁。这就叫原始类型与实例对象的自动转换。