webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: Object.freeze()

Browse Source
This commit is contained in:
qianguyihao 2020-05-30 23:24:59 +08:00
parent cc41ddb71a
commit ada7d784c0
7 changed files with 204 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.prettierrc Normal file
View File

@ -0,0 +1,9 @@
{
"printWidth": 300,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tslintIntegration": true,
"insertSpaceBeforeFunctionParenthesis": false
}

19
00-前端工具/01-VS Code的使用.md
View File

@ -4,17 +4,17 @@
> 本文的最新内容，也会在[GitHub](https://github.com/qianguyihao/Web/blob/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/01-VS%20Code%E7%9A%84%E4%BD%BF%E7%94%A8.md)上同步更新，欢迎 star。
VS Code 软件本身是为前端同学量身定制的，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的代码编辑器。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。
写下这篇文章，是顺势而为。
如果你是做前端开发（JavaScript 编程语言为主），则完全可以将 VS Code 作为「**主力开发工具**」。这款软件是为前端同学量身定制的。但由于它实在是太好用了，越来越多的人正在使用它。
如果你是做其他语言方向的开发，并且不需要太复杂的集成开发环境，那么，你可以把 VS Code 作为「**代码编辑器**」来使用，纵享丝滑。
甚至是一些写作的同学，也把 VS Code 作为 markdown **写作工具**，毫无违和感。
甚至是一些写作的同学，也可以把 VS Code 作为 markdown **写作工具**，毫无违和感。
退而求其次，即便你不属于以上范畴，你还可以把 VS Code 当作最简单的**文本编辑器**来使用，完爆 Windows 系统自带的记事本。
写下这篇文章，是顺势而为。
退而求其次，即便你不在以上范畴，你还可以把 VS Code 当作**文本编辑器**来使用，完爆 Windows 系统自带的记事本。
## 一、VS Code 的介绍
@ -100,7 +100,7 @@ VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的
| Cmd + ` | | 在同一个软件的多个窗口之间切换 | |
| | | | |
| **Cmd + Option + 左右方向键** | Ctrl + Pagedown/Pageup | 在已经打开的文件之间进行**切换** | 非常实用 |
| Ctrl + Tab | Ctrl + Tab | 在已经打开的文件之间进行跳转 | 不如上面的快捷键实用 |
| Ctrl + Tab | Ctrl + Tab | 在已经打开的文件之间进行跳转 | 不如上面的快捷键快 |
| | | | |
| Cmd + Shift + O | Ctrl + shift + O | 在当前文件的各种**方法之间**进行跳转 | |
| Ctrl + G | Ctrl + G | 跳转到指定行 | |
@ -141,7 +141,6 @@ VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的
| **Option + Shift + ↓** | **Alt + Shift + ↓** | 将代码向下复制 | 写重复代码的利器 |
### 多光标编辑
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
@ -152,7 +151,6 @@ VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的
| Cmd + Shift + L | Ctrl + Shift + L | 在选中文本的所有相同内容处，出现光标 | |
其他的多光标编辑操作：（很重要）
- 选中某个文本，然后反复按住快捷键「 **Cmd + D** 」键（windows 用户是按住「**Ctrl + D**」键）， 即可将全文中相同的词逐一加入选择。
@ -160,7 +158,6 @@ VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的
- 选中一堆文本后，按住「**Option + Shift + i**」键（windows 用户是按住「**Alt + Shift + I**」键），既可在**每一行的末尾**都创建一个光标。
### 删除操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
@ -170,11 +167,11 @@ VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的
| **option + Backspace** | **Ctrl + Backspace** | 删除光标之前的一个单词 | 英文有效，很常用 |
| option + delete | Ctrl + delete | 删除光标之后的一个单词 | |
| | | | |
| **Cmd + delete** | | 删除光标之前的整行内容 | 很常用 |
| **Cmd + Backspace** | | 删除光标之前的整行内容 | 很常用 |
| Cmd + delete | | 删除光标之后的整行内容 | |
| | | | |
备注：上面所讲到的移动光标、编辑操作、删除操作的快捷键，在其他编辑器里，基本适用。
备注：上面所讲到的移动光标、编辑操作、删除操作的快捷键，在其他编辑器里，大部分都适用。
### 编程语言相关

41
00-前端工具/02-Git的使用.md
View File

@ -133,14 +133,12 @@ git自动合并成功。不管是git自动合并成功，还是在人工解决
git config user.name ""
```
然后，当我们再输入`git pull`等命令行时，就会被要求重新输入*新的*账号密码。此时，密码就可以修改成功了。最后，我们还要输入如下命令，还原当前仓库的用户名：
```
git config user.name "smyhvae"
```
### 修改已经push的某次commit的作者信息
已经push的记录，如果要修改作者信息的话，只能 通过--force命令。我反正是查了很久，但最终还是不敢用公司的仓库尝试。
@ -155,7 +153,6 @@ git config user.name "smyhvae"
- [修改 git repo 历史提交的 author](http://baurine.github.io/2015/08/22/git_update_author.html)
### 将 `branch1`的某个`commit1`合并到`branch2`当中
切换到branch2中，然后执行如下命令：
@ -164,7 +161,6 @@ git config user.name "smyhvae"
git cherry-pick commit1
```
### 20190118-修改GitHub已提交的用户名和邮箱
参考链接：（亲测有效）
@ -176,6 +172,41 @@ git cherry-pick commit1
在执行`./email.sh`后，如果出现`permission denied`的错误，可以先执行`chmod 777 email.sh`，修改文件的权限。
### 20200520-将Git 项目迁移到另一个仓库
我们假设旧仓库的项目名称叫`old-repository`，新仓库的项目名称叫`new-repository`。操作如下：
（1）创建旧仓库的裸克隆：
```bash
git clone --bare https://github.com/exampleuser/old-repository.git
```
执行上述命令后，会在本地生成一个名叫 `old-repository.git`的文件夹。
（2）迁移到新仓库：
```bash
cd old-repository.git
git push --mirror https://github.com/exampleuser/new-repository.git
```
这样的话，项目就已经迁移到新仓库了。
注意，我们**不需要**手动新建一个空的新仓库，当我们执行上述命令之后，新仓库就已经自动创建好了。
参考链接：
- [复制仓库](https://help.github.com/cn/github/creating-cloning-and-archiving-repositories/duplicating-a-repository)
- [Git 本地仓库和裸仓库](https://moelove.info/2016/12/04/Git-%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93%E5%92%8C%E8%A3%B8%E4%BB%93%E5%BA%93/)
## git客户端推荐
市面上的Git客户端我基本都用过了，我最推荐的一款Git客户端是：[Tower](https://www.git-tower.com) 或者 [Fork](https://git-fork.com)。
@ -189,7 +220,7 @@ git cherry-pick commit1
**SmartGit**：
商业用途收费， 个人用户免费：
s
![](http://img.smyhvae.com/20180623_1305.png)

27
04-JavaScript基础/02-变量.md
View File

@ -55,15 +55,29 @@ if (true) {
## 变量的声明和赋值
### 变量的声明（变量的定义）
### 变量的声明/变量的定义
在ES6语法之前，统一使用`var`关键字来声明一个变量。比如：
```javascript
var name; // 生命一个名为 name 的变量
var name; // 声明一个名为 name 的变量
```
补充：在ES6语法及之后，统一使用 `const`、`let`关键字来声明一个变量。这个以后再讲。
PS：**在JavaScript中，永远都是用var来定义变量**（在ES6 之前），这和C、Java等语言不同。
### 变量的声明/定义（ES6）
在ES6语法及之后，可以使用 `const`、`let`关键字来声明一个变量
```js
const name; // 定义一个常量
let age;
```
如果你想定义一个常量，就用 const；如果你想定义一个变量，就用 let。
### 变量的赋值
@ -73,7 +87,7 @@ var name; // 生命一个名为 name 的变量
name= '千古壹号'
```
变量的声明和赋值，举例如下：
变量的声明和赋值，写在一起，举例如下：
```javascript
var a = 100; // ES5语法
@ -94,7 +108,6 @@ var是英语“variant”变量的缩写。后面要加一个空格，空格后
- 变量名：我们可以给变量任意的取名字。
PS：**在JavaScript中，永远都是用var来定义变量**（在ES6 之前），这和C、Java等语言不同。
### 变量的初始化
@ -212,7 +225,7 @@ console.log(a); // 会报错
### 关键字
**关键字**：是指 JS 本身已经使用了的单词，不能再用它们充当变量、函数名等标识符。
**关键字**：是指 JS 本身已经使用了的单词，我们不能再用它们充当变量、函数名等标识符。
JS 中的关键字如下：
@ -269,6 +282,8 @@ a2 = temp;
```
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。

45
04-JavaScript基础/09-对象简介.md
View File

@ -110,33 +110,52 @@ person.height = '180';
**如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响**。
上面这句话很重要，我们来看个例子。
上面这句话很重要，我们来看看下面的例子。
### 一个经典的例子
## 传值和传址的区别
```javascript
var obj = new Object();
obj.name = "孙悟空";
var obj2 = obj;
### 传值
//修改obj2的name属性
obj2.name = "猪八戒";
代码举例：
```js
let a = 1;
let b = a;// 将 b 赋值给 a
b = 2; // 修改 b 的值
```
上面的代码中，当我修改 obj2 的name属性后，会发现，obj 的 name 属性也会被修改。因为obj和obj2指向的是堆内存中的同一个地址。
上方代码中，当我修改 b 的值之后，a 的值并不会发生改变。这个大家都知道。我们继续往下看。
### 传址（一个经典的例子）
代码举例：
```javascript
var obj1 = new Object();
obj1.name = "孙悟空";
var obj2 = obj1; // 将 obj1 的地址赋值给 obj2。从此， obj1 和 obj2 指向了同一个堆内存空间
//修改obj2的name属性
obj2.name = "猪八戒";
```
上面的代码中，当我修改 obj2 的name属性后，会发现，obj1 的 name 属性也会被修改。因为obj1和obj2指向的是堆内存中的同一个地址。
这个例子要尤其注意，实战开发中，很容易忽略。
对于引用类型的数据，赋值相当于地址拷贝，a、b占用了同一段地址。所以改了b，a也会变；本质上a、b就是一个东西。
对于引用类型的数据，赋值相当于地址拷贝，a、b指向了同一个堆内存地址。所以改了b，a也会变；本质上a、b就是一个东西。
如果你打算把引用类型 A 的值赋值给 B，让A和B相互不受影响的话，可以通过 Object.assign() 来复制对象。效果如下：
```js
var obj = {name: '孙悟空'};
var obj1 = {name: '孙悟空'};
// 复制对象：把 obj 赋值给 obj3。两者之间互不影响
var obj3 = Object.assign({}, obj);
// 复制对象：把 obj1 赋值给 obj3。两者之间互不影响
var obj3 = Object.assign({}, obj1);
```
## 对象的分类

133
04-JavaScript基础/23-对象的基本操作.md
View File

@ -1,14 +1,13 @@
## 对象的基本操作
### 创建对象
使用new关键字调用的函数，是构造函数constructor。**构造函数是专门用来创建对象的函数**。
使用 new 关键字调用的函数，是构造函数 constructor。**构造函数是专门用来创建对象的函数**。
例如：
```javascript
var obj = new Object();
var obj = new Object();
```
记住，使用`typeof`检查一个对象时，会返回`object`。
@ -22,27 +21,26 @@
向对象添加属性的语法：
```javascript
对象.属性名 = 属性值;
对象.属性名 = 属性值;
```
举例：
```javascript
var obj = new Object();
var obj = new Object();
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个name属性
obj.name = '孙悟空';
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个gender属性
obj.gender = '男';
//向obj中添加一个age属性
obj.age = 18;
//向obj中添加一个age属性
obj.age = 18;
console.log(JSON.stringify(obj)); // 将 obj 以字符串的形式打印出来
console.log(JSON.stringify(obj)); // 将 obj 以字符串的形式打印出来
```
打印结果：
```
@ -55,12 +53,12 @@
### 获取对象中的属性
**方式1**：
**方式 1**：
语法：
```javascript
对象.属性名
对象.属性名;
```
如果获取对象中没有的属性，不会报错而是返回`undefined`。
@ -68,24 +66,23 @@
举例：
```javascript
var obj = new Object();
var obj = new Object();
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个name属性
obj.name = '孙悟空';
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个gender属性
obj.gender = '男';
//向obj中添加一个age属性
obj.age = 18;
//向obj中添加一个age属性
obj.age = 18;
// 获取对象中的属性，并打印出来
console.log(obj.gender); // 打印结果：男
console.log(obj.color); // 打印结果：undefined
// 获取对象中的属性，并打印出来
console.log(obj.gender); // 打印结果：男
console.log(obj.color); // 打印结果：undefined
```
**方式2**：可以使用`[]`这种形式去操作属性
**方式 2**：可以使用`[]`这种形式去操作属性
对象的属性名不强制要求遵守标识符的规范，不过我们尽量要按照标识符的规范去做。
@ -95,62 +92,63 @@
```javascript
// 注意，括号里的属性名，必须要加引号
对象['属性名'] = 属性值
对象['属性名'] = 属性值;
```
上面这种语法格式，举例如下：
```javascript
obj['123'] = 789;
obj['123'] = 789;
```
**重要**：使用`[]`这种形式去操作属性，更加的灵活，因为，我们可以在`[]`中直接传递一个**变量**。
### 修改对象的属性值
语法：
```javascript
对象.属性名 = 新值
对象.属性名 = 新值;
```
```javascript
obj.name = "tom";
obj.name = 'tom';
```
### 删除对象的属性
语法：
```javascript
delete obj.name;
delete obj.name;
```
### in 运算符
通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true，没有则返回false。
通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回 true，没有则返回 false。
语法：
```javascript
"属性名" in 对象
'属性名' in 对象;
```
举例：
```javascript
//检查obj中是否含有name属性
console.log("name" in obj);
//检查对象 obj 中是否含有name属性
console.log('name' in obj);
```
我们平时使用的对象不一定是自己创建的，可能是从接口获取的，这个时候，in 运算符可以派上用场。
我们平时使用的对象不一定是自己创建的，可能是别人提供的，这个时候，in 运算符可以派上用场。
当然，还有一种写法可以达到上述目的：
```js
if (obj.name) {
// 如果对象 obj 中有name属性，我就继续做某某事情。
}
```
## 遍历对象：for in
@ -168,8 +166,8 @@ for (var 变量 in 对象名) {
```javascript
for (var key in obj) {
console.log(key); // 这里的 key 是：对象属性的键（也就是属性名）
console.log(obj[key]); // 这里的 obj[key] 是：对象属性的值（也就是属性值）
console.log(key); // 这里的 key 是：对象属性的键（也就是属性名）
console.log(obj[key]); // 这里的 obj[key] 是：对象属性的值（也就是属性值）
}
```
@ -178,34 +176,30 @@ for (var key in obj) {
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript">
var obj = {
name: 'smyhvae',
age: 26,
gender: '男',
address: 'shenzhen',
sayHi: function () {
console.log(this.name);
},
};
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var obj = {
name: "smyhvae",
age: 26,
gender: "男",
address: "shenzhen",
sayHi: function() {
console.log(this.name);
// 遍历对象中的属性
for (var key in obj) {
console.log('属性名:' + key);
console.log('属性值:' + obj[key]); // 注意，因为这里的属性名 keu 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
}
};
// 遍历对象中的属性
for (var key in obj) {
console.log("属性名:" + key);
console.log("属性值:" + obj[key]); // 注意，因为这里的属性名 keu 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
}
</script>
</head>
<body>
</body>
</script>
</head>
<body></body>
</html>
```
打印结果：
@ -228,3 +222,4 @@ for (var key in obj) {
console.log(this.name);
}
```

34
04-JavaScript基础/24-对象的高级操作：Object.assign().md Normal file
View File

@ -0,0 +1,34 @@
## Object.assgin()
### 把 对象 obj1 复制给 obj2（两者之间互不影响）
代码举例：
```js
// 复制对象：把 obj1 赋值给 obj1。两者之间互不影响
var obj2 = Object.assign({}, obj1);
```
## Object.freeze() 冻结对象
Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。
代码举例：
```js
const params = {
name: 'qianguyihao';
port: '8899';
}
Object.freeze(params); // 冻结对象 params
params.port = '8080';// 修改无效
```
上方代码中，把 params 对象冻结后，如果想再改变 params 里面的属性值，是无效的。