update: 模板字符串

2020-08-25 20:47:55 +08:00
parent 516051b422
commit bae724f3bd
6 changed files with 204 additions and 240 deletions
--- a/04-JavaScript基础/04-基本数据类型：String
+++ b/04-JavaScript基础/04-基本数据类型：String
@@ -181,9 +181,9 @@ str = 'qianguyihao';



-## 模板字面量（模板字符串）
+## 模板字符串（模板字面量）

-ES6中引入了**模板字面量**，让我们省去了字符串拼接的烦恼。
+ES6中引入了**模板字符串**，让我们省去了字符串拼接的烦恼。下面一起来看看它的特性。

 ### 在模板字符串中插入变量

@@ -214,7 +214,7 @@ console.log(`我是${name},age:${age}`); //ES6 写法。注意语法格式

 -   [ES6 的 rest 参数和扩展运算符](https://segmentfault.com/a/1190000010222698)

-### 在模板字面量中插入表达式
+### 在模板字符串中插入表达式

 以前，在字符串中插入表达式的写法必须是这样的：

@@ -223,28 +223,58 @@ const a = 5;
 const b = 10;
 console.log('this is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
 ```
-现在，通过模板字面量，我们可以使用一种更优雅的方式来表示：
+
+现在，通过模板字符串，我们可以使用一种更优雅的方式来表示：

 ```js
 const a = 5;
 const b = 10;

+// 下面这行代码，故意做了换行。
 console.log(`this is ${a + b} and
 not ${2 * a + b}.`);
 ```
+
 打印结果：

-```
+```bash
 this is 15 and
 not 20.
 ```

+### 模板字符串中可以换行

-### 换行时不容易出错
+因为模板字符串支持换行，所以可以让代码写得非常美观。

-上面的例子中，也可以看出这个特征。
+代码举例：

-### 在模板字面量中插入函数返回值
+```js
+const result = {
+	name: 'qianguyihao',
+	age: 28,
+	sex: '男',
+};
+
+// 模板字符串支持换行
+const html = `<div>
+	<span>${result.name}</span>
+	<span>${result.age}</span>
+	<span>${result.sex}</span>
+</div>`;
+
+console.log(html); // 打印结果也会换行
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20200825_2016.png)
+
+
+
+
+### 模板字符串中可以调用函数
+
+模板字符串中可以调用函数。字符串中调用函数的位置，将会显示函数执行后的返回值。

 举例：

@@ -257,7 +287,7 @@ console.log(`www.${getName()}.com`); // 打印结果：www.qianguyihao.com
 ```


-### 模板字面量支持嵌套使用
+### 模板字符串支持嵌套使用

 ```js
 const nameList = ['千古壹号', '许嵩', '解忧少帅'];
--- a/04-JavaScript基础/17-数组的常见方法.md
+++ b/04-JavaScript基础/17-数组的常见方法.md
@@ -48,6 +48,7 @@
 | :-------------------- | :----------------------------------------------------------------------------- | :------------------------------------------------------- |
 | indexOf(value)        | 从前往后索引，检索一个数组中是否含有指定的元素                                 |                                                          |
 | lastIndexOf(value)    | 从后往前索引，检索一个数组中是否含有指定的元素                                 |                                                          |
+| includes(item)  | 数组中是否包含指定的内容                                                        |                                                        |
 | find(function())      | 找出**第一个**满足「指定条件返回 true」的元素                                  |                                                          |
 | findIndex(function()) | 找出**第一个**满足「指定条件返回 true」的元素的 index                          |                                                          |
 | every()               | 确保数组中的每个元素都满足「指定条件返回 true」，则停止遍历，此方法才返回 true | 全真才为真。要求每一项都返回 true，最终的结果才返回 true |
@@ -869,6 +870,26 @@ console.log(result); // 打印结果：9

 上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。

+## includes()
+
+**语法**：
+
+```js
+布尔值 = arr.includes(想要查找的元素, [position]);
+```
+
+**解释**：判断一个数组中是否包含指定的元素。如果是，则会返回 true；否则返回 false。
+
+参数中的 `position`：如果不指定，则默认为0；如果指定，则规定了检索的起始位置。
+
+```js
+const arr = [11, 12, 13, 14, 15];
+console.log(arr.includes(12)); // 打印结果：true
+console.log(name.includes(20)); // 打印结果：false
+
+console.log(name.includes(11, 1)); // 打印结果：false
+```
+
 ## find()

 **语法**：
--- a/04-JavaScript基础/26-对象的创建&构造函数.md
+++ b/04-JavaScript基础/26-对象的创建&构造函数.md
@@ -6,9 +6,9 @@

 **对象的字面量**就是一个{}。里面的属性和方法均是**键值对**：

- 键：相当于属性名。
+-   键：相当于属性名。

- 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）。
+-   值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）。

 使用对象字面量来创建一个对象，非常简洁，举例如下：：

@@ -18,7 +18,7 @@ var obj = {};

 使用对象字面量，可以在创建对象时，直接指定对象中的属性。语法：{属性名:属性值,属性名:属性值....}

-例1：（一个简单的对象）
+例 1：（一个简单的对象）

 ```js
 const obj1 = {
@@ -27,9 +27,7 @@ const obj1 = {
 };
 ```

-例2：（一个较复杂的对象）
-
-
+例 2：（一个较复杂的对象）

 ```javascript
 const obj2 = {
@@ -64,17 +62,17 @@ console.log(JSON.stringify(obj));
 *  通过该方法可以大批量的创建对象
 */
 function createPerson(name, age, gender) {
-  //创建一个新的对象
-  var obj = new Object();
-  //向对象中添加属性
-  obj.name = name;
-  obj.age = age;
-  obj.gender = gender;
-  obj.sayName = function () {
-    alert(this.name);
-  };
-  //将新的对象返回
-  return obj;
+    //创建一个新的对象
+    var obj = new Object();
+    //向对象中添加属性
+    obj.name = name;
+    obj.age = age;
+    obj.gender = gender;
+    obj.sayName = function () {
+        alert(this.name);
+    };
+    //将新的对象返回
+    return obj;
 }

 var obj2 = createPerson('猪八戒', 28, '男');
@@ -90,7 +88,7 @@ obj.name = '猪八戒';
 obj.age = 28;
 obj.gender = '男';
 obj.sayHi = function () {
-  alert('hello world');
+    alert('hello world');
 };
 ```

@@ -112,10 +110,10 @@ stu2.sayHi();

 // 创建一个构造函数
 function Student(name) {
-  this.name = name; //this指的是当前对象实例【重要】
-  this.sayHi = function () {
-    console.log(this.name + '厉害了');
-  };
+    this.name = name; //this指的是当前对象实例【重要】
+    this.sayHi = function () {
+        console.log(this.name + '厉害了');
+    };
 }
 ```

@@ -132,12 +130,12 @@ function Student(name) {
 ```javascript
 // 创建一个构造函数，专门用来创建Person对象
 function Person(name, age, gender) {
-  this.name = name;
-  this.age = age;
-  this.gender = gender;
-  this.sayName = function () {
-    alert(this.name);
-  };
+    this.name = name;
+    this.age = age;
+    this.gender = gender;
+    this.sayName = function () {
+        alert(this.name);
+    };
 }

 var per = new Person('孙悟空', 18, '男');
@@ -164,11 +162,11 @@ var dog = new Dog();

 **this 的指向也有所不同**：

- 1.以函数的形式调用时，this 永远都是 window。比如`fun();`相当于`window.fun();`
+-   1.以函数的形式调用时，this 永远都是 window。比如`fun();`相当于`window.fun();`

- 2.以方法的形式调用时，this 是调用方法的那个对象
+-   2.以方法的形式调用时，this 是调用方法的那个对象

- 3.以构造函数的形式调用时，this 是新创建的实例对象
+-   3.以构造函数的形式调用时，this 是新创建的实例对象

 ### new 一个构造函数的执行流程

@@ -187,8 +185,8 @@ new 在执行时，会做下面这四件事：
 ```javascript
 // 创建一个函数
 function createStudent(name) {
-  var student = new Object();
-  student.name = name; //第一个name指的是student对象定义的变量。第二个name指的是createStudent函数的参数。二者不一样
+    var student = new Object();
+    student.name = name; //第一个name指的是student对象定义的变量。第二个name指的是createStudent函数的参数。二者不一样
 }
 ```

@@ -197,7 +195,7 @@ function createStudent(name) {
 ```javascript
 // 创建一个函数
 function Student(name) {
-  this.name = name; //this指的是构造函数中的对象实例
+    this.name = name; //this指的是构造函数中的对象实例
 }
 ```

@@ -207,9 +205,9 @@ function Student(name) {

 JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的 this 上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。

- 静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问。
+-   静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问。

- 实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问。
+-   实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问。

 ### 类、实例

@@ -281,18 +279,18 @@ json 采用 `for...in...`进行遍历，和数组的遍历方式不同。如下

 ```html
 <script>
-  var myJson = {
-    name: 'smyhvae',
-    aaa: 111,
-    bbb: 222,
-  };
+    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('------');
-  }
+    //json遍历的方法：for...in...
+    for (var key in myJson) {
+        console.log(key); //获取 键
+        console.log(myJson[key]); //获取 值（第二种属性绑定和获取值的方法）
+        console.log('------');
+    }
 </script>
 ```

@@ -300,7 +298,6 @@ json 采用 `for...in...`进行遍历，和数组的遍历方式不同。如下

 ![](http://img.smyhvae.com/20180203_1518.png)

-
 ## 我的公众号

 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
@@ -308,4 +305,3 @@ json 采用 `for...in...`进行遍历，和数组的遍历方式不同。如下
 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

 ![](http://img.smyhvae.com/20200101.png)
-
--- a/04-JavaScript基础/28-浅拷贝和深拷贝.md
+++ b/04-JavaScript基础/28-浅拷贝和深拷贝.md
@@ -55,13 +55,19 @@ obj2:{"name":"qianguyihao","age":28,"info":{"desc":"永不止步"}}
 **语法**：

 ```js
+// 语法1
 obj2 = Object.assgin(obj2, obj1);
+
+// 语法2
+Object.assign(目标对象, 源对象1, 源对象2...);
 ```

 **解释**：将`obj1` 拷贝给 `obj2`。执行完毕后，obj2 的值会被更新。

 **作用**：将 obj1 的值追加到 obj2 中。如果对象里的属性名相同，会被覆盖。

+从语法2中可以看出，Object.assign() 可以将多个“源对象”拷贝到“目标对象”中。
+
 **例 1**：

 ```js
@@ -91,32 +97,42 @@ obj2:{"name":"qianguyihao","age":28,"info":{"desc":"hello"}}
 obj2:{"name":"qianguyihao","age":28,"info":{"desc":"永不止步"}}
 ```

-**例 2**：(和上面的例 1 等价)
+**例 2**：

 ```js
-const obj1 = {
+const myObj = {
    name: 'qianguyihao',
    age: 28,
 };

-const obj2 = {};
-// 浅拷贝：把 obj1 拷贝给 obj2
-Object.assign(obj2, obj1);
+// 【写法1】浅拷贝：把 myObj 拷贝给 obj1
+const obj1 = {};
+Object.assign(obj1, myObj);
+
+// 【写法2】浅拷贝：把 myObj 拷贝给 obj2
+const obj2 = Object.assign({}, myObj);
+
+// 【写法3】浅拷贝：把 myObj 拷贝给 obj31。注意，这里的 obj31 和 obj32 其实是等价的，他们指向了同一个内存地址
+const obj31 = {};
+const obj32 = Object.assign(obj31, myObj);
+
 ```

-**例 3**：(和上面的例 2 等价)
+上面这三种写法，是等价的。所以，当我们需要将对象 A 复制（拷贝）给对象 B，不要直接使用 `B = A`，而是要使用 Object.assign(B, A)。
+
+**例 3**：

 ```js
-const obj1 = {
-    name: 'qianguyihao',
-    age: 28,
-};
+let obj1 = { name: 'qianguyihao', age: 26 };
+let obj2 = { city: 'shenzhen', age: 28 };
+let obj3 = {};

-const obj2 = {};
-// 浅拷贝：把 obj1 拷贝给 obj2。注意，这里的 obj2 和 obj3 其实是等价的，他们指向了同一个内存地址
-const obj3 = Object.assign(obj2, obj1);
+Object.assign(obj3, obj1, obj2); // 将 obj1、obj2的内容赋值给 obj3
+console.log(obj3); // {name: "qianguyihao", age: 28, city: "shenzhen"}
 ```

+上面的代码，可以理解成：将多个对象（obj1和obj2）合并成一个对象 obj3。
+
 **例4**：【重要】

 ```js