JavaScript中的对象

知识内容：

1.JavaScript对象

2.JavaScript对象的分类

3.访问对象的属性和方法

4.JavaScript内建对象

 

 

 

1、JavaScript对象

1.什么是JavaScript对象

JavaScript对象：

• JavaScript对象能够说是JavaScript基本数据类型之一，不过是复合类型
• JavaScript中几乎全部事物都是对象
• JavaScript对象是拥有属性和方法的数据

 

 

2.如何理解JavaScript对象

能够把JavaScript对象简单理解为键值对(name:value)的形式：

• JavaScript对象相似python中的字典、PHP中的关联数组等数据类型
• 名称(name)能够是变量名也能够是函数名
• 值(value)能够是任何数据类型(固然也包括对象)

 

 

 

2、JavaScript对象的分类

1.JavaScript中对象分为两类：自定义对象和内建对象

自定义对象由咱们本身去定义，内建对象则是JavaScript自带的，相似python中的内置模块

 

 

2.JavaScript自定义对象

在经典的面向对象语言中，对象是指数据和在这些数据上进行的操做的集合。与 C++ 和 Java 不一样，JavaScript 是一种基于原型的编程语言，并无 class 语句，而是把函数用做类

 

(1)自定义对象的建立方法以下：

 

(2)建立对象实例：

 1 // 上面第二种:
 2 var person = Object()
 3 person.name = "wyb"
 4 person.age = 21
 5 
 6 
 7 // 对象字面量法:
 8 var person = {
 9     name: "xasdf",
10     age: 21  
11 }
12 // 注：这里的属性名可使用字符串也能够不用字符串，不用字符串的属性名会自动转化成字符串

 

(3)注意属性名能够放在引号之间，也能够不放在引号之间直接写上去，当属性名有如下的状况时必须加引号：

 

 

3.JavaScript内建对象

JavaScript内建对象有：Date、RegExp、Error、数组对象(Array)、Object、Function、Math等，将在最后介绍

 

 

 

3、访问对象的属性和方法

1.对象中的属性

对象中的属性能够分为数据属性和存取器属性，以下图所示(了解便可)：

 

 

2.属性操做和访问方法

(1)对属性可进行的操做以下所示：

实例：

 1 var person={
 2     username:'wyb',
 3     age: 21,
 4     salary: 6666,
 5     addr:'武汉',
 6     sex:'男'
 7 };
 8 
 9 // 访问属性
10 console.log('用户名为：'+person.username+"\n"+'性别'+person.sex);
11 console.log('薪水：'+person['salary']+'\n'+'地址：'+person["addr"]);
12 
13 // 若是属性不肯定须要使用[]
14 var key='username';
15 console.log(person.key);
16 console.log(person[key]);
17 console.log(person['key']);
18 
19 
20 function PersonInfo(name,age,sex){
21     this.name=name;
22     this.age=age;
23     this.sex=sex;
24 }
25 var person1=new PersonInfo('wyb',21,'男');
26 console.log(person1.name+person['sex']);
27 
28 // 添加属性
29 var obj={};//空对象
30 obj.username='wyb666';
31 obj.age=22;
32 obj.addr='武汉';
33 obj['test']='this is a test';
34 console.log(obj.username+'\n'+obj.age+'\n'+obj.addr+'\n'+obj['test']);
35 
36 //修改指定属性
37 obj.username='sss';
38 obj['test']='666';
39 console.log('修改以后的名字: '+obj.username);
40 console.log(obj['test']);
41 
42 //经过delete删除指定属性
43 delete obj.test;
44 console.log(obj['test']);
45 delete obj.username;
46 console.log(obj['username']);
47 
48 //经过for/in遍历属性
49 var obj1={
50     x:1,
51     y:2,
52     test:'this is a test',
53 };
54 for(var p in obj1){
55     console.log(p+'\n');
56 }

 

(2)访问方法

对象中方法的访问：对象名.方法名()

另外注意若是用对象名.方法名将返回定义函数的字符串

实例：

 1 //对象中有方法
 2 var obj={
 3     username: 'sdf',
 4     age: 22,
 5     addr: '武汉',
 6     sayHi: function (){
 7         return 'say Hi';
 8     },
 9     info: function(){
10         return '用户名：'+this.username+'\n'+'年龄：'+this.age+'\n地址：'+this.addr;
11     }
12 };
13 console.log(obj2.sayHi());
14 console.log(obj2.info());
15 console.log(obj2.info);
16 
17 function Person(username,age,sex,addr){
18     this.username=username;
19     this.age=age;
20     this.sex=sex;
21     this.addr=addr;
22     this.info=function(){
23         return this.username+this.addr;
24     }
25 }
26 var p1=new Person('zl',22,'女','上海');
27 console.log(p1.info());
28 p1.test='this is a test';
29 console.log(p1.test);
30 p1.info1=function(){
31     return 'this is a test1111';
32 };
33 console.log(p1.info1()); 

 

 

 

4、JavaScript内建对象

1.JavaScript中有哪些内建对象

JavaScript内建对象有：Date、RegExp、Error、数组对象(Array)、Object、Function、Math等，详情看下面的介绍：

 

 

2.Object类型

(1)建立Object实例

 1 // 第一种:
 2 var person = Object()
 3 person.name = "wyb"
 4 person.age = 21
 5 
 6 
 7 // 第二种:
 8 var person = { 9 name: "xasdf", 10 age: 21 11 } 12 // 注：这里的属性名可使用字符串也能够不用字符串，不用字符串的属性名会自动转化成字符串

上述两种方法开发人员应该使用第二种，第二种更直接、代码量更少

 

(2)访问对象的属性

 1 var person = {
 2     name: "wyb",
 3     age: 20
 4 }
 5 
 6 // 访问对象的属性有如下两种方法: 方括号法或者点表示法
 7 console.log(person["name"])
 8 console.log(person.name)
 9 
10 // 访问不存在的属性时返回undefined
11 console.log(person["666"])
12 
13 // 通常推荐使用点表示法，可是当属性名中包含可能致使语法错误的字符(空格时)
14 // 或者属性名使用的是关键字或保留字，就不能使用点表示法就只能使用方括号表示法
15 eg: person["first name"] = "xxxx"

 

 

3.Array类型

(1)Array类型 -> 其余语言中的数组，在后面咱们称它为JavaScript中的数组

JavaScript中的数组中的每一项能够保存任意类型的数据，另外JavaScript数组的大小能够动态调整便可以随着数据的添加自动增加以容纳新数据

Array类型其实就是数组，在这里面也有详细的介绍：http://www.javashuo.com/article/p-cymgwpas-h.html

 

(2)建立数组

 1 // 第一种: 直接使用Array构造函数建立数组
 2 var colors = new Array()        // 建立空数组
 3 var colors = new Array(20)    // 指定数组的长度
 4 var colors = new Array("red", "blue", "green")  // 建立带初值的数组
 5 // 注: 也能够省略上述中的new操做符
 6 
 7 // 第二种: 数组字面量表示法
 8 var colors = ["aaa", "wyb", 21]
 9 
10 注：上述两种方法推荐使用第二种，缘由就是第二种简单

 

(3)数组的经常使用方法

 1 // 访问数组 用下标访问
 2 var colors = ["red", "blue", "green"]
 3 console.log(colors[0])   // 显示第一项
 4 
 5 // 修改数组的值
 6 colors[2] = "black"     // 修改第三项值
 7 colors[3] = "brown"   // 新增第四项     
 8 console.log(colors)     // ["red", "blue", "black", "brown"]
 9 
10 
11 // 返回数组长度
12 var names = [] 13 console.log(names.length) // 0 14 names[0] = "wyb" 15 console.log(names.length) // 1 16 names[1] = "sz" 17 console.log(names.length) // 2 18 19 20 // 利用length属性在数组末尾添加新项 21 var colors = ["red", "blue", "green"] 22 colors[colors.length] = "xxxx" 23 colors[colors.length] = "yyyy" 24 console.log(colors) 25 26 27 // 检测数组 isArray方法和instanceof操做符 下面的value表明待检测的数据 28 if (value isinstanceof Array){ 29 // 对数组进行操做 30 } 31 32 is (Array.isArray(value)){ 33 // 对数组进行操做 34 }

 

(4)数组的高阶用法

栈方法

JavaScript中的数组能够像栈同样，值的插入与删除只在栈的顶部发生，JavaScript中提供了push和pop方法以便实现相似栈的行为

 1 // push方法: 接受任意数量的参数，把它们逐个添加到数组末尾，并返回修改后的数组长度
 2 // pop方法: 从数组末尾移除最后一项，减小数组的length值，而后返回移除的项
 3 var colors = new Array()
 4 var count = colors.push("red", "green") 5 console.log(count) 6 7 count = colors.push("black") 8 console.log(count) 9 console.log(colors) 10 11 var item = colors.pop() 12 console.log(item) 13 console.log(colors.length)

 

队列方法

JavaScript中的数组也能够像队列同样，在列表的末端添加项而后在列表的前端移除项，使用JavaScript中的push和shift方法既能够实现队列

// push方法: 接受任意数量的参数，把它们逐个添加到数组末尾，并返回修改后的数组长度
// shift方法:  移除数组中第一项并返回数据，同时将数组长度减1
var colors = []
var count = colors.push("red", "green") console.log(count) count = colors.push("blue") console.log(count) console.log(colors) var item = colors.shift() console.log(item) console.log(colors.length) console.log(colors)

注：JavaScript中还有unshift方法能够实如今数组前端添加任意个项的值并返回数组长度

 

排序方法

数组中以及有两个用来排序的方法: reverse方法和sort方法

• reverse方法：反转数组项的顺序
• sort方法：默认升序排序

以上方法实例：

1 var values = [1, 5, 3, 9, 7]
2 values.reverse() 3 console.log(values) 4 values.sort() 5 console.log(values)

注：关于降序排序能够先用sort升序排序而后再用reverse逆序便可

 

数组的其余操做方法:

concat() - 基于当前数组建立新数组

var colors = ["red", "green", "blue"]
var colors2 = colors.concat("yellow", ["black", "brown"]) console.log(colors) console.log(colors2) // 输出结果: // ["red", "green", "blue"] // ["red", "green", "blue", "yellow", "black", "brown"]

 

slice() - 切片: 基于当前数组的一项或多项建立新数组

1 var colors = ["red", "green", "blue", "yellow", "purple"]
2 var colors2 = colors.slice(1) 3 var colors3 = colors.slice(1, 4) 4 5 console.log(colors2) 6 console.log(colors3) 7 // 输出结果: 8 // ["green", "blue", "yellow", "purple"] 9 // ["green", "blue", "yellow"]

 

splice() - 删除、插入、替换

删除：只需指定两个参数便可删除任意数量的项，指定要删除的第一项的位置和要删除的项数，eg：splice(0, 2)删除数组中的开始两项

插入：只需提供三个参数便可向数组中插入任意数量的项，指定要插入的起始位置、要删除的项数和要插入的项，eg：splice(2, 0, "red", "green")从当前数组的位置2开始插入字符串"red"和"green"                             

替换：只需提供三个参数便可向指定位置插入任意数量的项，且同时删除任意数量的项，指定要插入的起始位置、要删除的项数和要插入的项，eg：splice(2, 1, "red", "green")会删除当前数组位置为2的项，而后再从位置2开始插入字符串"red"和"green"

 1 var colors = ["red", "green", "blue"]
 2 var removed = colors.splice(0, 1)      // 删除第一项
 3 console.log(colors)                    // ["green", "blue"]
 4 console.log(removed)                   // ["red"]
 5 
 6 removed = colors.splice(1, 0, "yellow", "orange")  // 从位置1开始插入两项
 7 console.log(colors)                                // ["green", "yellow", "orange", "blue"]
 8 console.log(removed)                               // []
 9 
10 removed = colors.splice(1, 1, "red", "purple")  // 插入两项 删除一项
11 console.log(colors)                             // ["green", "red", "purple", "orange", "blue"]
12 console.log(removed)                            // ["yellow"]

 

indexOf()和lastIndexOf()

 1 var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]
 2 console.log(numbers.indexOf(4))          // 3
 3 console.log(numbers.lastIndexOf(4))    // 5
 4 
 5 var person = { name: "wyb"} 6 var people = [{name: "wyb"}] 7 8 var morePeople = [person] 9 10 console.log(people.indexOf(person)) // -1 11 console.log(morePeople.indexOf(person)) // 0

 

迭代方法

• every()：对数组中每一项运行给定函数，若是该函数对每一项都返回true则返回true
• filter()：对数组中每一项运行给定函数，返回该函数会返回true的项组成的项组成的数组
• some()：对数组中的每一项运行给定函数，若是该函数对任一项返回true则返回true
• forEach()：对数组中的每一项运行给定函数，这个方法没有返回值
• map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

注：以上方法均不会修改数组中的包含的值

 

归并方法

reduce()和reduceRight()：这两个方法都会迭代数组中全部项，reduce方法从前日后迭代，而reduceRight方法从后往前迭代

这两个方法都接收两个参数：一个在每一项上调用的函数和可选的做为归并基础的初始值；传给reduce方法和reduceRight方法的函数则接受四个参数：前一个值、当前值、项的索引和数组对象

使用reduce方法执行求数组中全部值之和的操做：

1 var values = [1, 2, 3, 4, 5]
2 var sum = values.reduce(function(prev, cur, index, array){ 3 return prev + cur 4 }) 5 console.log(sum)

 

使用reduceRight方法执行求数组中全部值之和的操做：

1 var values = [1, 2, 3, 4, 5]
2 var sum = values.reduceRight(function(prev, cur, index, array){ 3 return prev + cur 4 }) 5 console.log(sum)

 

 

4.Date类型

Date类型中提供了JavaScript中提供了时间相关的操做，时间操做中分为两种时间：

• 时间统一时间
• 本地时间（东8区）

更多操做参见：http://www.shouce.ren/api/javascript/main.html

 1 // JavaScript中的时间对象 -> Date对象
 2 // ===
 3 // 经常使用用法以下:
 4 /*
 5 var d = new Date()
 6 
 7 d.getFullYear()
 8 年份, 2016
 9 
10 d.getMonth()
11 月份, 0-11
12 
13 d.getDate()
14 日期, 1-31
15 
16 d.getHours()
17 小时, 0-23
18 
19 d.getMinutes()
20 分钟, 0-59
21 
22 d.getSeconds()
23 秒数, 0-59
24 
25 d.getMilliseconds()
26 毫秒, 0-999
27 
28 d.getDay()
29 星期几, 0-6
30 */

 

 

5.RegExp类型

JavaScript中经过RegExp支持正则表达式，使用如下语法能够建立一个正则表达式：

var expression = / pattern / flags ;

上面的pattern是模式，能够是任意简单或者复杂的正则表达式，flags是正则表达式的标志用来代表正则表达式的做用，正则表达式的匹配模式支持下列3个标志：

• g：全局模式
• i：不区分大小写模式
• m：多行模式

关于正则表达式语法：http://www.runoob.com/regexp/regexp-syntax.html

正则表达式的做用：检测字符串、判断字符串是否合法 -> 登录注册验证

(1)定义正则表达式

• /.../  用于定义正则表达式
• /.../g 表示全局匹配
• /.../i 表示不区分大小写
• /.../m 表示多行匹配
• JS正则匹配时自己就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容
• 也可使用RegExp构造函数，它接受两个参数：一个是要匹配的字符串模式，另外一个是可选的标志字符串

实例：

 1 // 匹配字符串中全部"at"的实例
 2 var pattern1 = /at/g                       // 等同于 var pattern1 = new RegExp("at", "g") 3 4 // 匹配第一个"bat"或"cat"，不区分大小写 5 var pattern2 = /[bc]at/i // 等同于 var pattern2 = new RegExp("[bc]at", "i") 6 7 // 匹配字符串中全部以"at"结尾的3个字符的组合，不区分大小写 8 var pattern3 = /.at/gi 9 10 // 匹配第一个"[bc]at"，不区分大小写 11 var pattern4 = /\[bc\]at/i 12 13 // 匹配字符串中全部".at"，不区分大小写 14 var pattern5 = /\.at/gi

 

(2)匹配

JavaScript中支持正则表达式，其主要提供了两个功能：

• test(string)     检查字符串中是否和正则匹配
• exec(string)    获取正则表达式匹配的内容，若是未匹配，值为null，不然，获取匹配成功的数组

 1 // test实例
 2 // test: 判断字符串是否和正则匹配 3 // 判断字符串中是否有数字: 4 rep = /\d+/ 5 rep.test("asfasfaf32") // true 6 rep.test("asfasfafadfasdfas") // false 7 8 // 判断字符串中只能含数字 9 rep = /^\d+$/ 10 rep.test("asfasfafadfasdfas") // false 11 rep.test("34523542344") // true 12 13 14 // exec实例 15 // exec: 获取正则表达式匹配的内容 16 // 若是未匹配，值为null，不然，获取匹配成功的数组。 17 rep = /\d+/; 18 str = "wyb is a 21 years old boy!23333" 19 res = rep.exec(str) 20 console.log(res) 21 22 非全局模式: 23 获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配） 24 pattern = /\bJava\w*\b/; 25 text = "JavaScript is more fun than Java or JavaBeans!"; 26 result = pattern.exec(text) 27 // 匹配到JavaScript 28 29 pattern = /\b(Java)\w*\b/; 30 text = "JavaScript is more fun than Java or JavaBeans!"; 31 result = pattern.exec(text) 32 // 匹配到JavaScript和Java 33 34 全局模式: 35 须要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕 36 pattern = /\bJava\w*\b/g; 37 text = "JavaScript is more fun than Java or JavaBeans!"; 38 result = pattern.exec(text) // 反复执行这一句 39 40 pattern = /\b(Java)\w*\b/g; 41 text = "JavaScript is more fun than Java or JavaBeans!"; 42 result = pattern.exec(text) // 反复执行这一句

 

(3)字符串中相关方法

1 obj.search(regexp)                   获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
2 obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，若是正则是g模式找到所有 3 obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换全部，不然只替换第一个匹配项， 4  $数字：匹配的第n个组内容； 5 $&：当前匹配的内容； 6  $`：位于匹配子串左侧的文本； 7 $'：位于匹配子串右侧的文本 8 $$：直接量$符号

 

(4)JavaScript正则实例

 

 

 

6.Math对象

详细：http://www.w3school.com.cn/jsref/jsref_obj_math.asp

实例1-最大最小数：

1 var max = Math.max(3, 54, 33, 21)  
2 console.log(max)  // 54
3 
4 var min= Math.min(3, 54, 33, 21) 5 console.log(min) // 3 6 7 var values = [1, 2, 3, 4, 5, 6, 7, 8] 8 var max = Math.max.apply(Math, values) 9 console.log(max) // 8

 

实例2-舍入：

 1 // 向上舍入
 2 console.log(Math.ceil(25.9))  // 26
 3 console.log(Math.ceil(25.5))  // 26
 4 console.log(Math.ceil(25.1))  // 26
 5 
 6 // 向下舍入
 7 console.log(Math.floor(25.9))  // 25
 8 console.log(Math.floor(25.5))  // 25
 9 console.log(Math.floor(25.1))  // 25
10 
11 // 四舍五入
12 console.log(Math.round(25.9))  // 26
13 console.log(Math.round(25.5))  // 26
14 console.log(Math.round(25.1))  // 25

 

实例3-随机数生成：

 1 // Math.random(): 返回一个大于等于0 小于1的一个随机数
 2 console.log(Math.random())
 3 
 4 // 经典使用方法: 值 =Math.floor(Math.random() * 值的最大数 + 值的最小数)
 5 var num =Math.floor(Math.random() * 10 + 1) 6 console.log(num) // num是介于1和10之间(包括1和10)的一个数值 7 8 // 把上述方法封装成一个函数来使用: 9 var selectFrom = function(lowerValue, upperValue){ 10 var choices = upperValue - lowerValue + 1 11 return Math.floor(Math.random() * choices + lowerValue) 12 } 13 14 var num = selectFrom(2, 10) 15 console.log(num) // num是介于2和10之间(包括2和10)的一个数值

补充：利用上述的函数随机从数组中选择元素

1 var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]
2 var color = colors[selectFrom(0, colors.length-1)] 3 console.log(color)