add: Object.freeze()
This commit is contained in:
qianguyihao
parent
cc41ddb71a
commit
ada7d784c0
9
.prettierrc
Normal file
9
.prettierrc
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"printWidth": 300,
|
||||
"tabWidth": 4,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"tslintIntegration": true,
|
||||
"insertSpaceBeforeFunctionParenthesis": false
|
||||
}
|
||||
@ -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 | | 删除光标之后的整行内容 | |
|
||||
| | | | |
|
||||
|
||||
备注：上面所讲到的移动光标、编辑操作、删除操作的快捷键，在其他编辑器里，基本适用。
|
||||
备注：上面所讲到的移动光标、编辑操作、删除操作的快捷键，在其他编辑器里，大部分都适用。
|
||||
|
||||
### 编程语言相关
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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`）。
|
||||
|
||||
@ -110,33 +110,52 @@ person.height = '180';
|
||||
|
||||
**如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响**。
|
||||
|
||||
上面这句话很重要，我们来看个例子。
|
||||
上面这句话很重要，我们来看看下面的例子。
|
||||
|
||||
### 一个经典的例子
|
||||
## 传值和传址的区别
|
||||
|
||||
|
||||
### 传值
|
||||
|
||||
代码举例：
|
||||
|
||||
```js
|
||||
let a = 1;
|
||||
|
||||
let b = a;// 将 b 赋值给 a
|
||||
|
||||
b = 2; // 修改 b 的值
|
||||
```
|
||||
|
||||
上方代码中，当我修改 b 的值之后，a 的值并不会发生改变。这个大家都知道。我们继续往下看。
|
||||
|
||||
### 传址（一个经典的例子）
|
||||
|
||||
代码举例：
|
||||
|
||||
```javascript
|
||||
var obj = new Object();
|
||||
obj.name = "孙悟空";
|
||||
var obj1 = new Object();
|
||||
obj1.name = "孙悟空";
|
||||
|
||||
var obj2 = obj;
|
||||
var obj2 = obj1; // 将 obj1 的地址赋值给 obj2。从此， obj1 和 obj2 指向了同一个堆内存空间
|
||||
|
||||
//修改obj2的name属性
|
||||
obj2.name = "猪八戒";
|
||||
```
|
||||
|
||||
上面的代码中，当我修改 obj2 的name属性后，会发现，obj 的 name 属性也会被修改。因为obj和obj2指向的是堆内存中的同一个地址。
|
||||
上面的代码中，当我修改 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);
|
||||
```
|
||||
|
||||
## 对象的分类
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
## 对象的基本操作
|
||||
|
||||
### 创建对象
|
||||
@ -31,10 +30,10 @@
|
||||
var obj = new Object();
|
||||
|
||||
//向obj中添加一个name属性
|
||||
obj.name = "孙悟空";
|
||||
obj.name = '孙悟空';
|
||||
|
||||
//向obj中添加一个gender属性
|
||||
obj.gender = "男";
|
||||
obj.gender = '男';
|
||||
|
||||
//向obj中添加一个age属性
|
||||
obj.age = 18;
|
||||
@ -42,7 +41,6 @@
|
||||
console.log(JSON.stringify(obj)); // 将 obj 以字符串的形式打印出来
|
||||
```
|
||||
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
@ -60,7 +58,7 @@
|
||||
语法：
|
||||
|
||||
```javascript
|
||||
对象.属性名
|
||||
对象.属性名;
|
||||
```
|
||||
|
||||
如果获取对象中没有的属性，不会报错而是返回`undefined`。
|
||||
@ -71,10 +69,10 @@
|
||||
var obj = new Object();
|
||||
|
||||
//向obj中添加一个name属性
|
||||
obj.name = "孙悟空";
|
||||
obj.name = '孙悟空';
|
||||
|
||||
//向obj中添加一个gender属性
|
||||
obj.gender = "男";
|
||||
obj.gender = '男';
|
||||
|
||||
//向obj中添加一个age属性
|
||||
obj.age = 18;
|
||||
@ -84,7 +82,6 @@
|
||||
console.log(obj.color); // 打印结果：undefined
|
||||
```
|
||||
|
||||
|
||||
**方式 2**：可以使用`[]`这种形式去操作属性
|
||||
|
||||
对象的属性名不强制要求遵守标识符的规范，不过我们尽量要按照标识符的规范去做。
|
||||
@ -95,8 +92,7 @@
|
||||
|
||||
```javascript
|
||||
// 注意，括号里的属性名，必须要加引号
|
||||
对象['属性名'] = 属性值
|
||||
|
||||
对象['属性名'] = 属性值;
|
||||
```
|
||||
|
||||
上面这种语法格式，举例如下：
|
||||
@ -105,24 +101,20 @@
|
||||
obj['123'] = 789;
|
||||
```
|
||||
|
||||
|
||||
**重要**：使用`[]`这种形式去操作属性，更加的灵活，因为，我们可以在`[]`中直接传递一个**变量**。
|
||||
|
||||
|
||||
### 修改对象的属性值
|
||||
|
||||
语法：
|
||||
|
||||
```javascript
|
||||
对象.属性名 = 新值
|
||||
对象.属性名 = 新值;
|
||||
```
|
||||
|
||||
|
||||
```javascript
|
||||
obj.name = "tom";
|
||||
obj.name = 'tom';
|
||||
```
|
||||
|
||||
|
||||
### 删除对象的属性
|
||||
|
||||
语法：
|
||||
@ -131,7 +123,6 @@
|
||||
delete obj.name;
|
||||
```
|
||||
|
||||
|
||||
### in 运算符
|
||||
|
||||
通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回 true，没有则返回 false。
|
||||
@ -139,18 +130,25 @@
|
||||
语法：
|
||||
|
||||
```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
|
||||
|
||||
@ -178,34 +176,30 @@ for (var key in obj) {
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8" />
|
||||
<title></title>
|
||||
<script type="text/javascript">
|
||||
var obj = {
|
||||
name: "smyhvae",
|
||||
name: 'smyhvae',
|
||||
age: 26,
|
||||
gender: "男",
|
||||
address: "shenzhen",
|
||||
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]
|
||||
console.log('属性名:' + key);
|
||||
console.log('属性值:' + obj[key]); // 注意，因为这里的属性名 keu 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
|
||||
<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
34
04-JavaScript基础/24-对象的高级操作：Object.assign().md
Normal 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 里面的属性值，是无效的。
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user