箭头函数
+
+ ```js
+ let addUser=()=>{
+ console.log("添加一个用户")
+ }
+ ```
+ 普通函数
+
+ ```js
+function addUser(){
+ console.log("添加一个用户")
+ }
+ ```
+- 区别1:箭头函数使用箭头命名，普通函数中没有。
+
+- 区别2:箭头函数都为匿名函数，普通函数可以为匿名函数，也可以为具体名函数。
+
+- 区别3:箭头函数不能用于构造函数(不可以使用new) ,普通函数可以。
+
+``` JS
+let FunConstructor = () => {
+ console.log('lll');
+}
+
+let fc = new FunConstructor();
+```
+
+
+- 区别4：箭头函数不绑定`arguments`，取而代之用rest参数...解决(`arguments` 是一个对应于传递给函数的参数的类数组对象。)
+
+```JS
+function A(a){
+ console.log(arguments);
+}
+A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
+
+
+let B = (b)=>{
+ console.log(arguments);
+}
+B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined
+
+
+let C = (...c) => {
+ console.log(c);
+}
+C(3,82,32,11323); // [3, 82, 32, 11323]
+```
+## 箭头函数中this指向问题详解
+- 区别5：箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
+
+``` JS
+var obj = {
+ a: 10,
+ b: () => {
+ console.log(this.a); // undefined
+ console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
+ },
+ c: function() {
+ console.log(this.a); // 10
+ console.log(this); // {a: 10, b: ƒ, c: ƒ}
+ }
+}
+obj.b();
+obj.c();
+```
+例子1
+
+``` JS
+var name = 'window';
+
+var A = {
+ name: 'A',
+ sayHello: function(){
+ var s = () => console.log(this.name)
+ return s//返回箭头函数s
+ }
+}
+
+var sayHello = A.sayHello();
+sayHello();// 输出A
+
+var B = {
+ name: 'B';
+}
+
+sayHello.call(B); //还是A
+sayHello.call(); //还是A
+
+```
+例子2
+
+OK，这样就做到了永远指向A对象了，我们再根据“该函数所在的作用域指向的对象”来分析一下：
+
+- 该函数所在的作用域：箭头函数s 所在的作用域是sayHello,因为sayHello是一个函数。(该函数所指的为箭头函数，只有函数才有作用域（也就是sayHello)，也就是箭头函数所在的函数this即为箭头函数的this)
+- 作用域指向的对象：A.sayHello指向的对象是A。
+- 所以箭头函数s 中this就是指向A啦 ～～
+
+下面看一个错误例子
+
+```js
+var A = {
+ name: 'A',
+ sayHello:{
+ name: 'B',
+ print:()=>{
+ console.log(this.name);
+ }
+ }
+}
+var name='c'
+A.sayHello.print() //输出为 "c"
+```
+例子3
+为什么这里既没有输出B,也没有输出A呢，请记住上面那句话，该函数所在作用域指向的对象。在这个例子中，箭头函数所在的作用域既非sayHello，也非A，因为他们都不是函数，非函数是没有作用域的,this只能用在函数中，对象中是没有this的。这里箭头函数所在的作用域为window(在浏览器中)，故输出为“c"。
+
+
+总结：箭头函数this在定义时就已经确定了，不会更改了。箭头函数this永远为该函数所在作用域指向的对象（结合上面例子仔细理解这句话）
+
+
diff --git a/docs/vueguide/rendermechanism.md b/docs/vueguide/rendermechanism.md
new file mode 100644
index 0000000..e88ab06
--- /dev/null
+++ b/docs/vueguide/rendermechanism.md
@@ -0,0 +1 @@
+### vue 渲染机制
--
Gitee
From bea19dc2a70bf9f7691911a318bd8772704c93d7 Mon Sep 17 00:00:00 2001
From: Leocat81 <35863352+Leocat81@users.noreply.github.com>
Date: Thu, 11 Mar 2021 23:40:31 +0800
Subject: [PATCH 3/9] reduce
---
docs/.vuepress/config.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 2badff9..e1ebe69 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -47,7 +47,7 @@ module.exports = {
{
title: "ECMAScript",
collapsable: true,
- children: ["/guide/", "/guide/a", "/guide/prototype","guide/ArrowDifNomal"],
+ children: ["/guide/", "/guide/a", "/guide/prototype","guide/ArrowDifNomal","guide/reduce"],
},
{
title: "VUE",
--
Gitee
From 58bec99b0244cb9d0b8c28b4a82920bd71f6c447 Mon Sep 17 00:00:00 2001
From: Leocat81 <35863352+Leocat81@users.noreply.github.com>
Date: Thu, 11 Mar 2021 23:41:06 +0800
Subject: [PATCH 4/9] reduce
---
docs/guide/reduce.md | 142 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 142 insertions(+)
create mode 100644 docs/guide/reduce.md
diff --git a/docs/guide/reduce.md b/docs/guide/reduce.md
new file mode 100644
index 0000000..6594940
--- /dev/null
+++ b/docs/guide/reduce.md
@@ -0,0 +1,142 @@
+# reduce 函数
+
+## 语法
+
+```js
+array.reduce(function (total, currentValue, currentIndex, arr),initialValue )
+```
+
+## 参数解析
+
+| 参数 | 描述 |
+| ------------ | :------------------------------------: |
+| total | 必需。初始值, 或者计算结束后的返回值。 |
+| currentValue | 必需。当前元素 |
+| currentIndex | 可选。当前元素的索引 |
+| arr | 可选。当前元素所属的数组对象。 |
+| initialValue | 可选。传递给函数的初始值 |
+
+## 简单用法
+
+- 数组求和，求积。
+
+```JS
+let names = [1,2,3,4];
+
+let sum=names.reduce((pre,cur)=> pre+cur) //数组求和
+let mul=names.reduce((pre,cur)=>pre*cur) //数组求积
+let sum2=names.reduce((pre,cur)=> pre+cur,5) // 传递给函数初始值为5 故为5+1+2+3+4+5
+let mul2=names.reduce((pre,cur)=>pre*cur,5) // 传递给函数初始值为5 故为5*1*2*3*4*5
+
+console.log(sum); // 10
+console.log(mul); // 24
+console.log(sum2); // 15
+console.log(mul2); // 120
+```
+
+例子1
+
+## 高级用法
+
+(1) 计算数组中每个元素出现的次数
+
+```ts
+let strArr: Array = ["a", "b", "c", "a", "b", "c", "c", "d"];
+
+interface LabelledValue {
+ [index: string]: number;
+}
+
+let countStrNum: object = strArr.reduce((pre: LabelledValue, cur: string) => {
+ if (cur in pre) {
+ pre[cur]++;
+ } else {
+ pre[cur] = 1;
+ }
+ return pre;
+}, {});
+console.log(JSON.stringify(countStrNum)); // {"a":2,"b":2,"c":3,"d":1}
+```
+
+(2) 数组去重
+
+```ts
+let arr: number[] = [1, 2, 3, 4, 4, 1];
+let newArr: Array = arr.reduce((pre: Array, cur: number) => {
+ // 方法一：使用push
+ if (!pre.includes(cur)) {
+ pre.push(cur);
+ }
+ return pre;
+ // 方法二：使用concat
+ // if (!pre.includes(cur)) {
+ // return pre.concat(cur);
+ // } else {
+ // return pre;
+ // }
+}, []);
+console.log(newArr); // [1,2,3,4]
+```
+
+（3）将二维数组转化为一维
+
+```ts
+let arr: Array = [
+ [0, 1],
+ [2, 3],
+ [4, 5],
+];
+let newArr: Array = arr.reduce(
+ (pre: Array, cur: Array) => {
+ return pre.concat(cur);
+ }
+);
+console.log(newArr); // [0, 1, 2, 3, 4, 5]
+```
+
+（4）将多维数组转化为一维
+
+```ts
+let arr: any = [
+ [0, 1],
+ [2, 3],
+ [4, [5, 6, 7]],
+];
+const newArr: any = function(arr: any) {
+ return arr.reduce((pre: any, cur: any) => {
+ return pre.concat(Array.isArray(cur) ? newArr(cur) : cur);
+ }, []);
+};
+console.log(newArr(arr));
+```
+
+(5) 对象里的属性求和
+
+```JS
+var result = [
+ {
+ subject: 'math',
+ score: 10
+ },
+ {
+ subject: 'chinese',
+ score: 20
+ },
+ {
+ subject: 'english',
+ score: 30
+ }
+];
+
+var sum = result.reduce(function(prev, cur) {
+ return cur.score + prev;
+}, 0);
+console.log(sum) //60
+```
+
+
--
Gitee
From 6b56c0d6b746d8d0ffa2e1605e59d80530d5582c Mon Sep 17 00:00:00 2001
From: Leocat81 <35863352+Leocat81@users.noreply.github.com>
Date: Thu, 11 Mar 2021 23:42:50 +0800
Subject: [PATCH 5/9] add env
---
package.json | 2 ++
1 file changed, 2 insertions(+)
diff --git a/package.json b/package.json
index 311f3da..a66e929 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
"description": "",
"main": "index.js",
"scripts": {
+ "start":"npm docs:dev",
+ "build":"npm run docs:build",
"docs:dev": "vuepress dev docs --temp .temp",
"docs:build": "vuepress build docs"
},
--
Gitee
From 286bfe13d1c591071f3ba899314731f210d2c326 Mon Sep 17 00:00:00 2001
From: pipe <1173882893@qq.com>
Date: Fri, 12 Mar 2021 15:33:18 +0800
Subject: [PATCH 6/9] add emoji
---
README.md | 10 +++++-----
docs/.vuepress/config.js | 23 ++++++++++++++++++++---
docs/guide/DataHijacking.md | 3 +++
docs/httpguide/README.md | 8 ++++++++
package.json | 2 +-
5 files changed, 37 insertions(+), 9 deletions(-)
create mode 100644 docs/guide/DataHijacking.md
create mode 100644 docs/httpguide/README.md
diff --git a/README.md b/README.md
index 3110252..d890cd6 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,14 @@
-# blog_vuecode
+# ❤️ ❤️ blog_vuecode
-#### 介绍
+#### ✨✨✨ 介绍 ✨✨✨
使用 vuepress 构建的个人博客。
-#### 运行
+#### ⚡⚡⚡ 运行 ⚡⚡⚡
1.npm install
2.npm run docs:dev
-#### 打包
+#### ⛄ ⛄ ⛄ 打包 ⛄ ⛄ ⛄
-npm run docs:build 111111
+npm run docs:build
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e1ebe69..5ee0a94 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -37,6 +37,12 @@ module.exports = {
["vuepress-plugin-gotop-plus"],
],
themeConfig: {
+ lastUpdated: 'Last Updated',
+ // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
+ repo: 'https://gitee.com/pipepandafeng/blog_vuecode',
+ // 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
+ // "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
+ repoLabel: '查看源码',
// nav : [
// { text: '接口定义', link: '/apiword' },
// { text: '接口字段定义', link: '/api' },
@@ -47,16 +53,27 @@ module.exports = {
{
title: "ECMAScript",
collapsable: true,
- children: ["/guide/", "/guide/a", "/guide/prototype","guide/ArrowDifNomal","guide/reduce"],
+ children: [
+ "/guide/",
+ "/guide/a",
+ "/guide/prototype",
+ "guide/ArrowDifNomal",
+ "guide/reduce",
+ "guide/DataHijacking"
+ ],
},
{
title: "VUE",
- children: ["/vueguide/","/vueguide/rendermechanism"],
+ children: ["/vueguide/", "/vueguide/rendermechanism"],
},
- {
+ {
title: "CSS3",
children: ["/css3guide/"],
},
+ {
+ title: "http协议",
+ children: ["/httpguide/"],
+ },
],
sidebarDepth: 1,
},
diff --git a/docs/guide/DataHijacking.md b/docs/guide/DataHijacking.md
new file mode 100644
index 0000000..470242b
--- /dev/null
+++ b/docs/guide/DataHijacking.md
@@ -0,0 +1,3 @@
+# 简单模拟数据劫持
+
+
diff --git a/docs/httpguide/README.md b/docs/httpguide/README.md
new file mode 100644
index 0000000..f5f78aa
--- /dev/null
+++ b/docs/httpguide/README.md
@@ -0,0 +1,8 @@
+# 状态码 401 和 403 区别
+
+| 状态码 | 状态码英文名称 | 描述 |
+| ------ | :------------: | :--------------------------------------------: |
+| 401 | Unauthorized | 请求要求用户的身份认证 |
+| 403 | Forbidden | 服务器理解请求客户端的请求，但是拒绝执行此请求 |
+
+总结：401 未过服务端身份认证，403 过了身份认证，但是用户无权限操作。
diff --git a/package.json b/package.json
index a66e929..d2c7965 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
- "start":"npm docs:dev",
+ "start":"npm run docs:dev",
"build":"npm run docs:build",
"docs:dev": "vuepress dev docs --temp .temp",
"docs:build": "vuepress build docs"
--
Gitee
From 0f4126f918657c5b9b3567d92a321a1c38bd7e07 Mon Sep 17 00:00:00 2001
From: pipe <1173882893@qq.com>
Date: Fri, 12 Mar 2021 15:38:39 +0800
Subject: [PATCH 7/9] update emoji
---
README.md | 19 +++++++++++--------
1 file changed, 11 insertions(+), 8 deletions(-)
diff --git a/README.md b/README.md
index d890cd6..9028a50 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,17 @@
-# ❤️ ❤️ blog_vuecode
+# ❤️ blog_vuecode ❤️
-#### ✨✨✨ 介绍 ✨✨✨
+#### 介绍
-使用 vuepress 构建的个人博客。
+
+✨使用 vuepress 构建的个人博客。✨
-#### ⚡⚡⚡ 运行 ⚡⚡⚡
+#### 运行
-1.npm install
-2.npm run docs:dev
+
+⚡1.npm install⚡
+⚡2.npm run docs:dev⚡
-#### ⛄ ⛄ ⛄ 打包 ⛄ ⛄ ⛄
+#### 打包
-npm run docs:build
+
+⛄npm run docs:build⛄
--
Gitee
From e63d99d1b955c9a5859dd9304f9316c13649da66 Mon Sep 17 00:00:00 2001
From: pipe <1173882893@qq.com>
Date: Fri, 12 Mar 2021 15:40:53 +0800
Subject: [PATCH 8/9] update
---
README.md | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 9028a50..195cd79 100644
--- a/README.md
+++ b/README.md
@@ -14,4 +14,8 @@
#### 打包
-⛄npm run docs:build⛄
+⛄
+
+`npm run docs:build`
+
+⛄
--
Gitee
From b4aed14430ab6bc4c5f7360a4d19f8b5ab6c3cbb Mon Sep 17 00:00:00 2001
From: pipe <1173882893@qq.com>
Date: Fri, 12 Mar 2021 15:42:28 +0800
Subject: [PATCH 9/9] update
---
README.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/README.md b/README.md
index 195cd79..1086a73 100644
--- a/README.md
+++ b/README.md
@@ -19,3 +19,5 @@
`npm run docs:build`
⛄
+
+欢迎大家在评论区留下自己的意见，博主会第一时间回答。
\ No newline at end of file
--
Gitee