update: Date 对象的方法

This commit is contained in:
qianguyihao 2020-05-14 17:52:07 +08:00
parent 9c1007c292
commit f76e642400
7 changed files with 138 additions and 55 deletions

View File

@ -143,10 +143,10 @@ hrefhypertext reference超文本地址。读作“喝瑞夫”不要
![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_17.png)
当然我们也可以直接点进链接访问一个网址举例如下
当然我们也可以直接点进链接访问一个网址代码举例如下
```
<a href="http://www.baidu.com" target="_blank">点我点我</a>
```html
<a href="http://www.baidu.com" target="_blank">点我点我</a>
```
### 2锚链接

View File

@ -86,7 +86,7 @@ person.height = '180';
## 对象和数据类型之间的关系
数据类型分类
### 数据类型分类
- **基本数据类型值类型**String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义
@ -100,7 +100,7 @@ person.height = '180';
只要不是那五种基本数据类型就全都是对象
如果使用基本数据类型的数据我们所创建的变量都是独立不能成为一个整体
如果使用基本数据类型的数据我们所创建的变量都是独立不能成为一个整体
对象属于一种复合的数据类型在对象中可以保存多个不同数据类型的属性
@ -110,7 +110,9 @@ person.height = '180';
**如果两个变量保存的是同一个对象引用当一个通过一个变量修改属性时另一个也会受到影响**
例如
上面这句话很重要我们来看个例子
### 一个经典的例子
```javascript
var obj = new Object();
@ -118,11 +120,24 @@ person.height = '180';
var obj2 = obj;
//修改obj的name属性
obj.name = "猪八戒";
//修改obj2的name属性
obj2.name = "猪八戒";
```
上面的代码中当我修改obj的name属性后会发现obj2的name属性也会被修改因为obj和obj2指向的是堆内存中的同一个地址
上面的代码中当我修改 obj2 的name属性后会发现obj name 属性也会被修改因为obj和obj2指向的是堆内存中的同一个地址
这个例子要尤其注意实战开发中很容易忽略
对于引用类型的数据赋值相当于地址拷贝ab占用了同一段地址所以改了ba也会变本质上ab就是一个东西
如果你打算把引用类型 A 的值赋值给 B让A和B相互不受影响的话可以通过 Object.assign() 来复制对象效果如下
```js
var obj = {name: '孙悟空'};
// 复制对象:把 obj 赋值给 obj3。两者之间互不影响
var obj3 = Object.assign({}, obj);
```
## 对象的分类

View File

@ -87,21 +87,18 @@ console.log(date26);
Date对象 有如下方法可以获取日期和时间的**指定部分**
- `getFullYear() ` 获取年份
| 方法名 | 含义 | 备注 |
| ------------- | ----------------- | --------- |
| getFullYear() | 获取年份 | |
| getMonth() | **获取月 0-11** | 0代表一月 |
| getDate() | **获取日1-31** | 获取的是几号 |
| getDay() | **获取星期0-6** | 0代表周日1代表周一 |
| getHours() | 获取小时0-23 | |
| getMinutes() | 获取分钟0-59 | |
| getSeconds() | 获取秒0-59 | |
| etMilliseconds() | 获取毫秒 | 1s = 1000ms |
- `getMonth() ` **获取月 0-11**0代表一月
- `getDate()` **获取日 1-31**获取的是几号
- `getDay()` **获取星期 0-6**0代表周日1代表周一
- `getHours() ` 获取小时 0-23
- `getMinutes() ` 获取分钟 0-59
- `getSeconds()` 获取秒 0-59
- `getMilliseconds()` 获取毫秒 1s = 1000ms
**代码举例**
@ -115,7 +112,9 @@ Date对象 有如下方法,可以获取日期和时间的**指定部分**
console.log(myDate.getMonth() + 1); // 打印结果2
console.log(myDate.getDate()); // 打印结果4
var dayArr = ['星期日', '星期一', '星期二', '星期三', '星期四','星期五', '星期六'];
console.log(myDate.getDay()); // 打印结果1
console.log(dayArr[myDate.getDay()]); // 打印结果:星期一
console.log(myDate.getHours()); // 打印结果13
console.log(myDate.getMinutes()); // 打印结果23
@ -127,45 +126,62 @@ Date对象 有如下方法,可以获取日期和时间的**指定部分**
获取了日期和时间的指定部分之后我们把它们用字符串拼接起来就可以按照自己想要的格式来展示日期
### 举例1年月日的格式化
### 举例年月日的格式化
代码举例
```javascript
// 格式化年月日2020年2月2日 星期三
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
```js
console.log(formatDate());
/*
方法日期格式化
格式要求今年是2020年02月02日 08:57:09 星期日
*/
function formatDate() {
var date = new Date();
var year = date.getFullYear(); // 年
var month = date.getMonth() + 1; // 月
var day = date.getDate(); // 日
var week = date.getDay(); // 星期几
var weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var hour = date.getHours(); // 时
hour = hour < 10 ? '0' + hour : hour; // 如果只有一位,则前面补零
var minute = date.getMinutes(); // 分
minute = minute < 10 ? '0' + minute : minute; // 如果只有一位,则前面补零
var second = date.getSeconds(); // 秒
second = second < 10 ? '0' + second : second; // 如果只有一位,则前面补零
var result = '今天是:' + year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second + ' ' + weekArr[week];
return result;
}
console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
```
### 举例2时分秒的格式化
封装一个函数返回当前时间的时分秒格式为 06:06:06
## getTime()获取时间戳
## 获取时间戳
Date对象 还有如下方法
- `getTime()` 获取当前日期对象的**时间戳**这个方法在实际开发中用得比较多
- `getTime()` 获取日期对象的**时间戳**单位毫秒这个方法在实战开发中用得比较多
啥叫时间戳接下来我们解释一下
### 时间戳的定义和作用
**时间戳**指的是从格林威治标准时间的`1970年1月1日0时0分0秒`到当前日期所花费的**毫秒数**1 = 1000毫秒
计算机底层在保存时间时使用的都是时间戳时间戳的存在就是为了**统一**时间的单位
我们经常会利用时间戳来计算时间因为它更精确
我们再来看下面这样的代码
```javascript
@ -183,7 +199,41 @@ Date对象 还有如下方法:
为啥打印结果是`-28800000`而不是`0`这是因为我们的当前代码是在中文环境下运行的与英文时间会存在**8个小时的时差**中文时间比英文时间早了八个小时如果代码是在英文环境下运行打印结果就是`0`
**利用时间戳检测代码的执行时间**
### 获取 Date 对象的时间戳
代码演示
```js
// 方式一:获取 Date 对象的时间戳(最常用的写法)
var date1 = +new Date();
console.log(date2); // 打印结果举例1589448165370
var date2 = new Date();
// 方式二:获取 Date 对象的时间戳
console.log(date2.getTime()); // 打印结果举例1589448165370
// 方式三:获取 Date 对象的时间戳
console.log(date2.valueOf()); // 打印结果举例1589448165370
```
上面这三种写法都可以获取任意 Date 对象的时间戳最常见的写法是**方式一**其次是方式二
根据前面所讲的关于时间戳的概念上方代码获取到的时间戳指的是 `1970年1月1日0时0分0秒` 到现在所花费的总毫秒数
### 获取当前时间的时间戳
如果我们要获取**当前时间**的时间戳除了上面的三种方式之外还有另一种方式代码如下
```js
// 方式四:获取当前时间的时间戳
console.log(Date.now()); // 打印结果举例1589448165370
```
上面这种方式用得也很多只不过`Date.now()`是H5标准中新增的特性如果你的项目需要兼容低版本的IE浏览器就不要用了这年头谁还用IE呢
### 利用时间戳检测代码的执行时间
我们可以在业务代码的前面定义 `时间戳1`在业务代码的后面定义 `时间戳2`把这两个时间戳相减就能得出业务代码的执行时间

View File

@ -58,10 +58,10 @@ this.todayList.splice(0, 0, ...dataList);
**对象赋值的正确写法**
```javascript
Object.assign(this.dataObj, dataObj);
Object.assign(obj2, obj1);
```
上方代码中是将`dataObj` 的值追加到`this.dataObj`如果对象里属性名相同会被覆盖
上方代码中是将`obj1` 的值追加到`obj2`如果对象里属性名相同会被覆盖
### 2019-11-25-在新的窗口中打开url

View File

@ -167,7 +167,10 @@ ES6中的字符串扩展用得少而且逻辑相对简单。如下
代码解释还是刚刚说的那样`Object.is(v1, v2)`比较的是字符串是否相等
### 扩展2重要
### Object.assign()
Object.assign() 在实战开发中使用到的频率非常高一定要重视
```javascript
Object.assign(目标对象, 源对象1, 源对象2...)
@ -178,8 +181,7 @@ ES6中的字符串扩展用得少而且逻辑相对简单。如下
其实可以理解成将多个对象**合并**为一个新的对象
举例
**举例1**对象的属性复制
```javascript
let obj1 = { name: 'smyhvae', age: 26 };
@ -194,8 +196,18 @@ ES6中的字符串扩展用得少而且逻辑相对简单。如下
![](http://img.smyhvae.com/20180404_2240.png)
上图显示成功将obj1和obj2的属性复制给了obj3
上图显示成功将obj1和obj2的属性复制追加给了obj3如果属性名相同会被覆盖
**举例2**将对象 A 赋值给对象B
```js
const obj1 = { name: 'smyhvae', age: 26 };
const obj2 = Object.assign({}, obj1);
```
注意将对象 A 复制给对象 B不要直接使用 `B = A`而是要使用 Object.assign()至于为何这样做的原因我们在之前的JS基础/对象简介和对象的基本操作里已经讲过
### 扩展3`__proto__`属性

View File

@ -231,19 +231,19 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用
// 先发起request1等resolve后再发起request2紧接着等 request2有了 resolve之后再发起 request3
request1()
.then(data => {
.then(res1 => {
// 接口1请求成功后打印接口1的返回结果
console.log(data);
console.log(res1);
return request2();
})
.then(data => {
.then(res2 => {
// 接口2请求成功后打印接口2的返回结果
console.log(data);
console.log(res2);
return request3();
})
.then(data => {
.then(res3 => {
// 接口3请求成功后打印接口3的返回结果
console.log(data);
console.log(res3);
});
</script>
</body>

View File

@ -1,5 +1,11 @@
### 2020-05-14
- [React中setState的怪异行为 setState没有即时生效](https://blog.csdn.net/handsomexiaominge/article/details/86348235)
React 中的 setState 是异步操作
### 2020-04-09