diff --git a/01-HTML/05-HTML标签：字体标签和超链接.md b/01-HTML/05-HTML标签：字体标签和超链接.md index 3a67fde..b70cd22 100644 --- a/01-HTML/05-HTML标签：字体标签和超链接.md +++ b/01-HTML/05-HTML标签：字体标签和超链接.md @@ -143,10 +143,10 @@ href（hypertext reference）：超文本地址。读作“喝瑞夫”，不要 ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_17.png) -当然，我们也可以直接点进链接，访问一个网址。举例如下： +当然，我们也可以直接点进链接，访问一个网址。代码举例如下： -``` - 点我点我 +```html +点我点我 ``` ### 2、锚链接 diff --git a/04-JavaScript基础/09-对象简介和对象的基本操作.md b/04-JavaScript基础/09-对象简介和对象的基本操作.md index d841562..00593ca 100644 --- a/04-JavaScript基础/09-对象简介和对象的基本操作.md +++ b/04-JavaScript基础/09-对象简介和对象的基本操作.md @@ -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指向的是堆内存中的同一个地址。 + +这个例子要尤其注意，实战开发中，很容易忽略。 + +对于引用类型的数据，赋值相当于地址拷贝，a、b占用了同一段地址。所以改了b，a也会变；本质上a、b就是一个东西。 + +如果你打算把引用类型 A 的值赋值给 B，让A和B相互不受影响的话，可以通过 Object.assign() 来复制对象。效果如下： + +```js +var obj = {name: '孙悟空'}; + +// 复制对象：把 obj 赋值给 obj3。两者之间互不影响 +var obj3 = Object.assign({}, obj); +``` ## 对象的分类 diff --git a/04-JavaScript基础/21-内置对象：Date.md b/04-JavaScript基础/21-内置对象：Date.md index 450fbaa..61cb246 100644 --- a/04-JavaScript基础/21-内置对象：Date.md +++ b/04-JavaScript基础/21-内置对象：Date.md @@ -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`。把这两个时间戳相减，就能得出业务代码的执行时间。 diff --git a/05-JavaScript进阶/JavaScript开发积累.md b/05-JavaScript进阶/JavaScript开发积累.md index 0b0f26d..076f678 100644 --- a/05-JavaScript进阶/JavaScript开发积累.md +++ b/05-JavaScript进阶/JavaScript开发积累.md @@ -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 diff --git a/09-ES6/06-ES6：字符串、数组、对象的扩展.md b/09-ES6/06-ES6：字符串、数组、对象的扩展.md index 0f0b817..057ce2b 100644 --- a/09-ES6/06-ES6：字符串、数组、对象的扩展.md +++ b/09-ES6/06-ES6：字符串、数组、对象的扩展.md @@ -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__`属性 diff --git a/09-ES6/07-ES6：Promise入门详解.md b/09-ES6/07-ES6：Promise入门详解.md index f465474..144e2b1 100644 --- a/09-ES6/07-ES6：Promise入门详解.md +++ b/09-ES6/07-ES6：Promise入门详解.md @@ -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); }); diff --git a/16-推荐链接/04-前端文章推荐.md b/16-推荐链接/04-前端文章推荐.md index c96100a..396985c 100644 --- a/16-推荐链接/04-前端文章推荐.md +++ b/16-推荐链接/04-前端文章推荐.md @@ -1,5 +1,11 @@ +### 2020-05-14 + +- [React中setState的怪异行为 ——setState没有即时生效](https://blog.csdn.net/handsomexiaominge/article/details/86348235) + +React 中的 setState 是异步操作。 + ### 2020-04-09