Web/03-JavaScript基础/06-JavaScript语法基础:面向对象和内置对象.md
2018-02-04 17:07:25 +08:00

963 lines
20 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 面向对象的概念
**对象的作用是:封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。
那为什么不用数组封装信息呢?首先,数组只能存放同一种类型的数据;其次,要功过
对象具有**特征**(属性)和**行为**(方法)。
面向对象:可以创建自定义的类型、很好的支持继承和多态。
面向对象的特征:封装、继承、多态。
## 创建自定义对象
### 创建单个自定义对象
创建一个空白的对象,举例:
```
var student= new Object();
```
完整的举例如下:
```javascript
//调用对象
console.log(student); //调用对象的方法
student.sayHi(); //调用对象的方法
//1创建一个空白的对象
var student= new Object();
// 2定义对象的属性
student.name = "生命壹号";
student.age = 26;
// 3定义对象的方法
student.sayHi = function () {
console.log(this.name + "今年的岁数是" + this.age); //如果要调用自己的name可以使用this
}
```
输出如下:
20180125_1059.png
### 引入:创建多个自定义对象
举例:
```javascript
var stu1 = createStudent("生命壹号");
console.log(stu1);
stu1.sayHi();
console.log("------------------");
var stu2 = createStudent("许嵩");
console.log(stu2);
stu2.sayHi();
// 创建一个函数
function createStudent(name) {
var student = new Object();
student.name = name; //第一个name指的是student对象定义的变量。第二个name指的是createStudent函数的参数。二者不一样
student.sayHi = function () {
console.log(this.name + "厉害了");
}
return student;
}
```
打印结果:
20180125_1121.png
上方代码中,注意`student.name = name;`中这两个name是不同的。另外注意this指的是student的this。
### new和this
**this**
1、this只出现在函数中。
2、谁调用函数this就指的是谁。
3、new People(); People中的this代指被创建的对象实例。
**new之后**
1开辟内存空间存储新创建的对象。new Object()
2**把this设置为当前对象**
3执行内部代码设置对象属性和方法
4返回新创建的对象
因为this指的是new一个Object之后的对象实例。于是下面这段代码
```javascript
// 创建一个函数
function createStudent(name) {
var student = new Object();
student.name = name; //第一个name指的是student对象定义的变量。第二个name指的是createStudent函数的参数。二者不一样
}
```
可以改进为:
```javascript
// 创建一个函数
function Student(name) {
this.name = name; //this指的是构造函数中的对象实例
}
```
注意上方代码中的注释。
于是,便得出了接下来的代码。
**利用构造函数自定义对象:**(改进版)
```javascript
//利用构造函数自定义对象
var stu1 = new Student("smyh");
console.log(stu1);
stu1.sayHi();
var stu2 = new Student("vae");
console.log(stu2);
stu2.sayHi();
// 创建一个构造函数
function Student(name) {
this.name = name; //this指的是构造函数中的对象实例
this.sayHi = function () {
console.log(this.name + "厉害了");
}
}
```
打印结果:
20180125_1350.png
### 属性绑定
暂略。
### 对象字面量
**对象的字面量**就是一个{}。里面的属性和方法均是**键值对**
例如:
```javascript
var o = {
name: "生命壹号",
age: 26,
isBoy: true,
sayHi: function() {
console.log(this.name);
}
};
console.log(o);
```
控制台输出:
20180125_1834.png
### json的介绍
> 对象字面量和json比较像这里我们对json做一个简单介绍。
JSONJavaScript Object NotationJavaScript对象表示形式
JSON和对象字面量的区别JSON的属性必须用双引号引号引起来对象字面量可以省略。
json举例
```
{
"name" : "zs",
"age" : 18,
"sex" : true,
"sayHi" : function() {
console.log(this.name);
}
};
```
json里一般放常量、数组、对象等但很少放function。
另外对象和json没有长度json.length的打印结果是undefined。于是乎自然也就不能用for循环遍历因为便利时需要获取长度length
**json遍历的方法**
json 采用 `for...in...`进行遍历,和数组的遍历方式不同。如下:
```html
<script>
var myJson = {
"name": "smyhvae",
"aaa": 111,
"bbb": 222
};
//json遍历的方法for...in...
for (var key in myJson) {
console.log(key); //获取 键
console.log(myJson[key]); //获取 值(第二种属性绑定和获取值的方法)
console.log("------");
}
</script>
```
打印结果:
20180203_1518.png
## 类和对象
函数并没有创建对象的能力,类才有。
```javascript
class Customer {
//属性
public String Name;
public String Age;
public String Money;
//方法
public void Buy (String id,int num,double price) {
self.money -= num * price; //记录订单
}
}
```
## 内置对象
内置对象就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用的或是最基本而必要的功能。
**javascript的内置对象**
20180201_2330.jpg
## 内置对象Date
### Date对象的声明
写法一:
```javascript
var date1 = new Date();
console.log(date1);
```
写法二:(兼容性最强)
```javascript
var date2 = new Date("2017/09/06 09:00:00");
console.log(date2);
```
写法三和写法四:(不常用)
```javascript
var date3 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)'); //写法三
var date4 = new Date(2017, 1, 27); //写法四
```
以上四种写法的打印结果是:
20180202_1040.png
### Date对象的方法获取日期和时间
Date对象 有如下方法:
- `getDate()` 获取日 1-31
- `getDay()` **获取星期 0-6**0代表周日
- `getMonth() ` **获取月 0-11**1月从0开始
- `getFullYear() ` 获取完整年份(浏览器都支持)
- `getHours() ` 获取小时 0-23
- `getMinutes() ` 获取分钟 0-59
- `getSeconds()` 获取秒 0-59
- `getMilliseconds()` 获取毫秒 1s = 1000ms
- `getTime ()` **返回累计毫秒数**(从1970/1/1午夜)
为何累计毫秒数是从1970/1/1开始算起呢
打印结果举例:
20180202_1056.png
### 返回距离1970/01/01毫秒数
也就是返回:此刻时间 减去 1970/01/01 的毫秒数。
代码实现:
```javascript
var date1 = Date.now();
var date2 = +new Date();
var date3 = new Date().getTime();
var date4 = new Date().valueOf();
```
打印结果:
20180202_1100.png
### 举例:模拟日历
要求每天打开这个页面都能定时显示当前的日期。
代码实现:
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 800px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
//模拟日历
//需求:每天打开这个页面都能定时显示年月日和星期几
//1.创建一个当前日期的日期对象
var date = new Date();
//2.然后获取其中的年、月、日和星期
var year = date.getFullYear();
var month = date.getMonth();
var hao = date.getDate();
var week = date.getDay();
// console.log(year+" "+month+" "+hao+" "+week);
//3.赋值给div
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var div = document.getElementsByTagName("div")[0];
div.innerText = "今天是:"+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];
</script>
</body>
</html>
```
实现效果:
20180202_1110.png
### 举例:发布会倒计时
实现思路:
设置一个定时器每间隔1毫秒就自动刷新一次div的内容。
代码实现:
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 1210px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.getElementsByTagName("div")[0];
var timer = setInterval(fn, 1);
function fn() {
var nowtime = new Date();
var future = new Date("2019/02/03 11:20:00");
var timeSum = future.getTime() - nowtime.getTime(); //获取时间差:发布会时间减去此刻的毫秒值
var day = parseInt(timeSum / 1000 / 60 / 60 / 24);
var hour = parseInt(timeSum / 1000 / 60 / 60 % 24);
var minu = parseInt(timeSum / 1000 / 60 % 60);
var sec = parseInt(timeSum / 1000 % 60);
var millsec = parseInt(timeSum % 1000);
//问题处理所有的时间小于10的时候在前面自动补0毫秒值要补双0比如如把 8 秒改成 08 秒)
day = day < 10 ? "0" + day : day; //day小于10吗如果小于就补0如果不小于就是day本身
hour = hour < 10 ? "0" + hour : hour;
minu = minu < 10 ? "0" + minu : minu;
sec = sec < 10 ? "0" + sec : sec;
if (millsec < 10) {
millsec = "00" + millsec;
} else if (millsec < 100) {
millsec = "0" + millsec;
}
// console.log(day);
// console.log(parseInt(timeSum/1000/60/60/24));
if (timeSum < 0) {
div.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
clearInterval(timer);
return;
}
div.innerHTML = "距离苹果发布会还有" + day + "天" + hour + "小时" + minu + "分" + sec + "秒" + millsec + "毫秒";
}
</script>
</body>
</html>
```
实现效果:
20180202_1130.gif
## 内置对象String
### 简单数据类型、复杂数据类型
**1、简单数据类型**
注意,之前学习的简单数据类型`string`是**无法绑定属性和方法**的。比如说:
```javascript
var str = "smyhvae";
str.aaa = 12;
console.log(typeof str); //打印结果为string
console.log(str.aaa); //打印结果为undefined
```
上方代码中,当我们尝试打印`str.aaa`的时候会发现打印结果为undefined。
当然我们可以打印str.length、srt.indexOf("m")等等。因为这两个方法的底层做了数据类型转换。
**2、复杂数据类型**
复杂数据类型`String`是可以绑定属性和方法的。如下:
```javascript
var strObj = new String("smyhvae");
strObj.aaa = 123;
console.log(strObj);
console.log(typeof strObj); //打印结果Object
console.log(strObj.aaa);
```
打印结果:
20180202_1351.png
```
```
同理内置对象Number也有一些自带的方法比如
- Number.MAX_VALUE;
- Number.MIN_VALUE;
内置对象Boolean也有一些自带的方法但是用的不多。
下面讲一下内置对象String的常见方法。
### charAt/charCodeAt1.2.1 给索引查字符
```javascript
字符 = Str.charAt(索引值);
```
解释:获取相应位置的字符。
字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串。
```javascript
字符编码 = Str.charCodeAt(索引值);
```
解释: 获取相应位置的Unicode字符编码。
举例1
```javascript
var str = new String("smyhvae");
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
```
打印结果:
20180202_1401.png
上面这个例子一般不用。一般打印数组和json的时候用索引打印String不建议用索引。
举例2打印字符串的占位长度
提示:一个英文占一个位置,一个中文占两个位置。
思路判断该字符是否在0-127之间在的话是英文不在是非英文
代码实现:
```html
<script>
// sort(); 底层用到了charCodeAt();
var str = "I love my country!我你爱中国!";
//需求:求一个字符串占有几个字符位。
//思路;如果是英文,站一个字符位,如果不是英文占两个字符位。
//技术点判断该字符是否在0-127之间。在的话是英文不在是非英文
alert(getZFWlength(str));
alert(str.length);
//定义方法:字符位
function getZFWlength(string) {
//定义一个计数器
var count = 0;
for (var i = 0; i < string.length; i++) {
//对每一位字符串进行判断如果Unicode编码在0-127计数器+1否则+2
if (string.charCodeAt(i) < 128 && string.charCodeAt(i) >= 0) {
count++;
} else {
count += 2;
}
}
return count;
}
</script>
```
打印结果:
```
30
24
```
从打印结果可以看出字符串的长度是24但是却占了30个字符位一个中文占两个字符位
另外sort()方法其实底层也是用到了charCodeAt()因为用到了Unicode编码。
### indexOf/lastIndexOf给字符查索引
```javascript
索引值 = str.indexOf/(想要查询的字符);
```
解释:从前向后索引字符串的位置。
因此可以得出一个技巧:**如果获取的索引值为0说明字符串是以查询的参数为开头的**。
同理lastIndexOf()是从后向前寻找。
```javascript
var str = "abcdea";
//给字符查索引(索引值为0,说明字符串以查询的参数为开头)
console.log(str.indexOf("c"));
console.log(str.lastIndexOf("c"));
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));
```
打印结果:
20180202_1420.png
### concat字符串的链接
```javascript
新字符串 = str1.concat(str2) 链接两个字符串
```
这种方法基本不用,直接两个字符串相加就好。
### 字符串的截取(重要)
字符串的截取有好几个方法,下面分别讲解。
1、 slice()方法:
格式:
```javascript
字符串 = str.slice(索引1索引2); //两个参数都是索引值。
```
上面的参数,包左不包右。如下:
- (2,5) 表示正常,包左不包右。
- (2) 表示**从指定的索引位置开始,剪到最后**。
- (-3) 表示从倒数第几个开始,剪到最后.
- (5,2) 表示前面的大,后面的小,返回值为空。
2、substr()方法:
格式:
```javascript
字符串 = srt.substr(索引值, 长度);
```
参数解释:
- (2,4)从索引值为2的字符开始截取4个字符。
- (1):从指定位置开始,截取到最后。
- (-3):从倒数第几个开始,剪到最后.
- 不包括前大后小的情况。
### 一些特殊方法
**1、trim()**:去除字符串前后的空白。
代码举例:
```javascript
//去除前后的空格trim();
var str1 = " a b c ";
console.log(str1);
console.log(str1.trim());
```
打印结果:
20180202_1455.png
2、**replace()**:替换。
举例:
```javascript
//replace()方法:替换
var str2 = "Today is fine day,today is fine day !!!"
console.log(str2);
console.log(str2.replace("today","tomorrow")); //只能替换第一个today
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则才能替换所有的today
```
3、split():字符串变数组。
```javascript
//split()方法:字符串变数组
var str3 = "生命壹号|许嵩|smyhvae";
console.log(str3);
console.log(str3.split()); // 无参数,表示:把字符串作为一个元素添加到数组中。
console.log(str3.split("")); //参数为空字符串,则表示:分隔字符串中每一个字符,分别添加到数组中
console.log(str3.split("|")); //参数为指定字符,表示:此字符将不会出现在数组的任意一个元素中
console.log(str3.split("许")); //同理
```
打印结果:
20180202_1503.png
### 大小写转换
举例:
```javascript
var str = "abcdEFG";
//转换成小写
console.log(str.toLowerCase());
//转换成大写
console.log(str.toUpperCase());
```
## html方法
- anchor() 创建a链接
- big()
- sub()
- sup()
- link()
- bold()
注意str.link() 返回值是字符串。
举例:
```javascript
var str = "你好";
console.log(str.anchor())
console.log(str.big())
console.log(str.sub())
console.log(str.sup())
console.log(str.link("http://www.baidu.com"));
console.log(str.bold())
```
20180202_1536.png
## 字符串练习
**练习1**"smyhvaevaesmyh"查找字符串中所有m出现的位置。
代码实现:
```javascript
var str2 = "abcoefoxyozzopp";
for(var i=0;i<str2.length;i++){
//如果指定位置的符号=== "o"
//str2[i]
if( str2.charAt(i)==="o"){
console.log(i);
}
}
```
**练习2**判断一个字符串中出现次数最多的字符,统计这个次数
```html
<script>
var str2 = "smyhvaevaesmyhvae";
//定义一个json然后判断json中是够有该属性如果有该属性那么值+1;否则创建一个该属性并赋值为1
var json = {};
for (var i = 0; i < str2.length; i++) {
//判断:如果有该属性,那么值+1;否则创建一个该属性并赋值为1
var key = str2.charAt(i);
if (json[key] === undefined) {
json[key] = 1;
} else {
json[key] += 1;
}
}
console.log(json);
console.log("----------------");
//获取json中属性值最大的选项
var maxKey = "";
var maxValue = 0;
for (var k in json) {
// if(maxKey == ""){
// maxKey = k;
// maxValue = json[k];
// }else{
if (json[k] > maxValue) {
maxKey = k;
maxValue = json[k];
}
// }
}
console.log(maxKey);
console.log(maxValue);
</script>
```
打印结果:
20180202_1540.png
## 内置对象 Math
内置对象 Math的常见方法
- Math.abs(); **取绝对值**
- Math.floor(); **向下取整**(向小取)
- Math.ceil(); **向上取整**(向大取)
- Math.round(); 四舍五入取整(正数四舍五入,负数五舍六入)
- Math.random(); 随机数0-1
举例:
```javascript
var num = -0.6;
console.log(Math.abs(num)); //取绝对值
console.log(Math.floor(num)); //向下取整,向小取
console.log(Math.ceil(num)); //向上取整,向大取
console.log(Math.round(num)); //四舍五入取整(正数四舍五入,负数五舍六入)
console.log(Math.random()); //随机数 0-1
```
20180202_1601.png
## url 编码和解码
URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码以便发送给浏览器。有效的URI中不能包含某些字符例如空格。而这URI编码方法就可以对URI进行编码它们用特殊的UTF-8编码替换所有无效的字符从而让浏览器能够接受和理解。
```javascript
encodeURIComponent(); //把字符串作为 URI 组件进行编码
decodeURIComponent(); //把字符串作为 URI 组件进行解码
```
举例:
```javascript
var url = "http://www.cnblogs.com/smyhvae/";
var str = encodeURIComponent(url);
console.log(str); //打印url的编码
console.log(decodeURIComponent(str)); //对url进行编码后再解码还原为url
```
打印结果:
20180202_1432.png