diff --git a/03-JavaScript基础/06-JavaScript语法基础:面向对象和内置对象.md b/03-JavaScript基础/06-JavaScript语法基础:面向对象和内置对象.md index 8d17893..f983fe0 100644 --- a/03-JavaScript基础/06-JavaScript语法基础:面向对象和内置对象.md +++ b/03-JavaScript基础/06-JavaScript语法基础:面向对象和内置对象.md @@ -228,41 +228,671 @@ class Customer { ``` +## 内置对象 +内置对象就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用的或是最基本而必要的功能。 + +**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 + + + + + + + + +
+ + + + + + +``` + +实现效果: + +20180202_1110.png + + +### 举例:发布会倒计时 + +实现思路: + +设置一个定时器,每间隔1毫秒就自动刷新一次div的内容。 + +代码实现: + +```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/charCodeAt:1.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 + +``` + +打印结果: + +``` + 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 + 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); + + + +``` + + +打印结果: + +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 diff --git a/推荐链接.md b/推荐链接.md index a16b1ac..15d667c 100644 --- a/推荐链接.md +++ b/推荐链接.md @@ -132,4 +132,9 @@ - [我所理解的前端](https://www.cnblogs.com/Smiled/p/8377188.html) +### 2018-02-02 + +- [开发人员的奋斗目标](https://www.cnblogs.com/1si2/p/devroad.html) + +