【ES6和Vue3】前端复习重点知识点

Bankcary

已于 2023-04-08 01:18:52 修改

阅读量388

点赞数 1

文章标签：前端 es6 javascript

于 2023-03-01 19:37:40 首次发布

本文链接：https://blog.csdn.net/Bankcary/article/details/129288193

版权

复习提纲
ES	let关键字	√
const关键字	√
this关键字	√
剪头函数	√
解构赋值	√
模板字符串	√
模块	√
数组的方法	√
node	包管理工具	命令
Vue3	单文件组件	√
模板语法	√
响应式基础	√
计算属性	√
类与样式绑定	√
条件渲染	√
列表渲染	√
事件处理	√
双向绑定	√
生命周期	√
侦听器	√
模板引用	√
组件基础	√
组件注册	√
Props	√
事件	√
插槽	√
依赖注入	√
组合式函数	√
插件	安装及注册
路由	基础入门

以下是对以上列出的前端相关知识点的简要总结：

关键字:

let 关键字用于声明块级作用域的变量。
const 关键字用于声明常量，一旦赋值后不能再次修改。
this 关键字用于指向当前对象。
let关键字:
- let 关键字用于声明变量，它所声明的变量具有块级作用域，只能在声明的块内部访问。let 声明的变量可以被重新赋值，但不允许重复声明同名变量。
const关键字:
- const 关键字用于声明常量，它所声明的常量具有块级作用域，只能在声明的块内部访问。const 声明的常量必须在声明时初始化，且不允许被重新赋值，但不代表它是不可变的，只是它的值不能被改变。
this关键字:
- this 关键字用于指向当前对象，其指向的对象会根据上下文而变化。在全局作用域中，this 指向 window 对象，在函数内部，this 的指向根据函数的调用方式而变化。
这三个关键字的区别：
- let 和 const 都是用来声明变量或常量的关键字，但let 声明的变量可以被重新赋值，而const 声明的常量不允许被重新赋值。
- let 和 const 声明的变量或常量都具有块级作用域，只能在声明的块内部访问。
- this 关键字用于指向当前对象，其指向的对象会根据上下文而变化，而 let 和 const 关键字并不涉及上下文的变化。

函数:

剪头函数是一种简写形式的函数声明，它使用箭头语法，通常用于回调函数或匿名函数的声明。
（1）箭头函数语法更简洁清晰，快捷。

（2）箭头函数没有原型prototype，并不会自己创建this，并且this不能被修改，call等都不能修改到。只能间接修改被继承的this

（3）箭头函数的this在定义时就定了，继承外一层的普通函数

（4）如果箭头函数外一层再外一层都不能找到普通函数，在严格和非严格情况下都会指向window对象

（5）箭头函数的this指向全局，使用arguments会报未声明的错误

（6）箭头函数的this指向外一层的普通函数，使用argument继承该普通函数

（7）箭头函数不能构造函数，不能new.target，不能new，没有constructor

（8）箭头函数不支持重复命名参数，普通函数可以重复命名参数

一、箭头函数的介绍

1.1 什么是箭头函数

ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。

1.2 基本语法
```
// 箭头函数
let fn = (name) => {
 // 函数体
 return `Hello ${name} !`;
};

// 等同于
let fn = function (name) {
 // 函数体
 return `Hello ${name} !`;
};
```
箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数，省去关键字function。

函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中

1.3 箭头函数的参数

①如果箭头函数没有参数，写空括号
```
//没有参数，写空括号
 let fn = () => {
     console.log('hello');
 };
```
②如果箭头函数有一个参数，也可以省去包裹参数的括号
```
//只有一个参数，可以省去参数括号
 let fn = name => {
     console.log(`hello ${name}!`)
 };
```
③如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中。
```
 let fn = (val1, val2, val3, val4) => {
     return [val1, val2, val3, val4];
 }
```
1.4 箭头函数的函数体

①如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的js表达式，可以省去函数体花括号{ }
```
//返回某个简单变量val
let f = val => val;
// 等同于
let f = function (val) { return val };


//返回一个简单的js表达式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
return num1 + num2;
};
```
②如果箭头函数的函数体只有一句代码，返回的不是变量和简单的js表达式，而是一个对象。
```
//错误写法—花括号会被解释为函数体
 let getItem = id => {
     id: id,
     name: 'gaby'
 };
//正确写法
 let getItem = id => ({
     id: id,
     name: 'gaby'
 });
```
③如果箭头函数的函数体只有一条语句且不需要返回值（最常用于回调函数），加上void关键字
```
let fn = () => void doesNotReturn();
```
箭头函数用于回调函数，常见简洁
```
//栗子1
//普通函数
 [1, 2, 3].map(function (x) {
     return x + x;
 });
//ES6箭头函数
[1, 2, 3].map(x => x + x);
//栗子2
//普通函数
 var result = [2, 4, 5, 1, 6].sort(function (a, b) {
     return a - b;
 });
//ES6箭头函数
	var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);
```

解构赋值:

解构赋值是一种用于从数组或对象中提取值并将其赋给变量的语法。
数组解构

下面是一个将数组解构到变量中的例子：
```
// 我们有一个存放了名字和姓氏的数组
let arr = ["John", "Smith"]

// 解构赋值
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;

alert(firstName); // John
alert(surname);  // Smith
```
现在我们就可以针对这些变量进行操作，而不是针对原来的数组元素。

当与 split 函数（或其他返回值是数组的函数）结合使用时，看起来就更优雅了：
```
let [firstName, surname] = "John Smith".split(' ');
alert(firstName); // John
alert(surname);  // Smith
```
正如我们所看到的，语法很简单。但是有几个需要注意的细节。让我们通过更多的例子来加深理解。
“解构”并不意味着“破坏”

这种语法叫做“解构赋值”，因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。

这只是下面这些代码的更精简的写法而已：
```
// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];
```
忽略使用逗号的元素

数组中不想要的元素也可以通过添加额外的逗号来把它丢弃：
```
// 不需要第二个元素
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul
```
在上面的代码中，数组的第二个元素被跳过了，第三个元素被赋值给了 title 变量，数组中剩下的元素也都被跳过了（因为在这没有对应给它们的变量）。
等号右侧可以是任何可迭代对象

……实际上，我们可以将其与任何可迭代对象一起使用，而不仅限于数组：
```
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);
```
这行得通，因为在内部，结构赋值是通过迭代右侧的值来完成工作的。这是一种用于对在 = 右侧的值上调用 for..of 并进行赋值的操作的语法糖。
赋值给等号左侧的任何内容

我们可以在等号左侧使用任何“可以被赋值的”东西。

例如，一个对象的属性：
```
let user = {};
[user.name, user.surname] = "John Smith".split(' ');

alert(user.name); // John
alert(user.surname); // Smith
```
与 .entries() 方法进行循环操作

在前面的章节中我们已经见过了 Object.entries(obj) 方法。

我们可以将 .entries() 方法与解构语法一同使用，来遍历一个对象的“键—值”对：
```
let user = {
name: "John",
age: 30
};

// 循环遍历键—值对
for (let [key, value] of Object.entries(user)) {
alert(`${key}:${value}`); // name:John, then age:30
}
```
用于 Map 的类似的代码更简单，因为它是可迭代的：
```
let user = new Map();
user.set("name", "John");
user.set("age", "30");

// Map 是以 [key, value] 对的形式进行迭代的，非常便于解构
for (let [key, value] of user) {
alert(`${key}:${value}`); // name:John, then age:30
}
```
交换变量值的技巧

有一个著名的使用结构赋值来交换两个变量的值的技巧：
```
let guest = "Jane";
let admin = "Pete";

// 让我们来交换变量的值：使得 guest = Pete，admin = Jane
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane（成功交换！）
```
这里我们创建了一个由两个变量组成的临时数组，并且立即以交换了的顺序对其进行了解构。

我们可以用这种方式交换两个以上的变量。
其余的 ‘…’

通常，如果数组比左边的列表长，那么“其余”的数组项会被省略。

例如，这里只取了两项，其余的就被忽略了：
```
let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar
// 其余数组项未被分配到任何地方
```
如果我们还想收集其余的数组项 —— 我们可以使用三个点 "..." 来再加一个参数以获取“其余”数组项：
```
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

// rest 是包含从第三项开始的其余数组项的数组
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2
```
rest 的值就是数组中剩下的元素组成的数组。

不一定要使用变量名 rest，我们也可以使用任何其他的变量名，只要确保它前面有三个点，并且在解构赋值的最后一个参数位置上就行了。
```
let [name1, name2, ...titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// 现在 titles = ["Consul", "of the Roman Republic"]
```
对象解构

解构赋值同样适用于对象。

基本语法是：
```
let {var1, var2} = {var1:…, var2:…}
```
在等号右侧应该有一个已经存在的对象，我们想把它拆分到变量中。等号左侧包含了对象相应属性的一个类对象“模式（pattern）”。在最简单的情况下，等号左侧的就是 {...} 中的变量名列表。

举个例子：
```
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
```
属性 options.title、options.width 和 options.height 值被赋给了对应的变量。

变量的顺序并不重要，下面这个代码也奏效：
```
// 改变 let {...} 中元素的顺序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }
```
等号左侧的模式（pattern）可以更加复杂，并且指定了属性和变量之间的映射关系。

如果我们想把一个属性赋值给另一个名字的变量，比如把 options.width 属性赋值给名为 w 的变量，那么我们可以使用冒号来设置变量名称：
```
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200
```
冒号表示“什么值：赋值给谁”。上面的例子中，属性 width 被赋值给了 w，属性 height 被赋值给了 h，属性 title 被赋值给了同名变量。

对于可能缺失的属性，我们可以使用 "=" 设置默认值，如下所示：
```
let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
```
就像数组或函数参数一样，默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。

在下面的代码中，prompt 提示输入 width 值，但不会提示输入 title 值：
```
let options = {
  title: "Menu"
};

let {width = prompt("width?"), title = prompt("title?")} = options;

alert(title);  // Menu
alert(width);  // (prompt 的返回值)
```
我们还可以将冒号和等号结合起来：
```
let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200
```
如果我们有一个具有很多属性的复杂对象，那么我们可以只提取所需的内容：
```
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// 仅提取 title 作为变量
let { title } = options;

alert(title); // Menu
```

模板字符串:

模板字符串是一种用于在字符串中嵌入表达式的语法，使用反引号 ` 括起来。

一、基本使用

1、传统字符串

传统做法需要使用大量的“”（双引号）和+来拼接才能得到我们需要的模版。但是这样是十分不方便的。并且存下一下几点缺陷：

1）传统的字符串拼接不能正常换行 2）传统的字符串拼接不能友好的插入变量 3）传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。
console.log('string text line 1\n' +
         'string text line 2');
     // "string text line 1
     // string text line 2"
复制

2、模板字符串

使用反引号（`）做标识，可以定义多行字符串，在字符串中使用${}嵌入变量。在模板字符串中的任何变量最终都会变为String类型输出。
console.log(`string text line 1 string text line 2`);
     // "string text line 1
     // string text line 2"
复制

二、区别

1、拼接区别

普通拼接
var html = '<div>' +
         '<img src="" alt="">' +
         '<p>Today is a good day</p>' +
         '</div>'
模板字符串拼接
var html = ` <div> <img src="" alt=""> <p>Today is a good day</p> </div>`
省了很多 ‘+’ 而且结构更加清晰，更加简单。

2、嵌套区别

普通对象嵌套
let name = "浩东"
     let good = "today"
     let zhd = 'Hello' + name + '，' + 'How are you' + good + '?'
     console.log(zhd);
模板字符对象串嵌套
// 字符串中嵌入变量
     let name = "浩东"
     let good = "today"
     let zhd = `Hello ${ 
  name}, How are you ${ 
  good}?`
     console.log(zhd);
普通表达式嵌套
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."
模板字符串表达式嵌套
var a = 5;
var b = 10;
console.log(`Fifteen is ${ 
  a + b} and not ${ 
  2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
可以看到Es6模板字符串的嵌套不仅更加的简单，而且逗号显示也更加的清晰。普通的嵌套更容易出错。而且模板字符串还有一个更大的优点，那就是嵌套里面还能嵌套。

模板字符串多重嵌套
const tmpl = addrs => ` <table> ${ 
  addrs.map(addr => ` <tr><td>${ 
  addr.first}</td></tr> <tr><td>${ 
  addr.last}</td></tr> `).join('')}
</table>
`;

//调用
const data = [
	{ 
 first: '<Jane>', last: 'Bond' },
	{ 
 first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));
// <table>
//
// <tr><td><Jane></td></tr>
// <tr><td>Bond</td></tr>
//
// <tr><td>Lars</td></tr>
// <tr><td><Croft></td></tr>
//
// </table>
三、更多特点

1、模板字符串调用函数
<script>
     function gettime() { 

         var myDate = new Date;
         var year = myDate.getFullYear(); //获取当前年
         var mon = myDate.getMonth() + 1; //获取当前月
         var date = myDate.getDate(); //获取当前日
         var week = myDate.getDay();
         var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
         return year + "年" + mon + "月" + date + "日" + weeks[week]
     }
     let a = `<p>${ 
  gettime()}</p>`
     console.log(a);
 </script>
四、封装一个模板字符串

目的

实现将字符串’我是{ {name}}，职业{ {job}}，工资{ {salary}}’里的占位符用变量代替。

思想

1、定义一个模板字符串正则/{ {(\w+)}}/，匹配字符串中{ {}}的内容，然后通过if判断模板里是否有字符串模板。

2、如果有，那么就查找模板里的第一个模板字符串字段，并将其渲染，用相应的值替代，并通过render函数递归的渲染返回渲染后的结构。

3、如果没有，那么直接返回模板字符串。

代码
function render(template, data) { 

 const reg = /\{\{(\w+)\}\}/;     
 if (reg.test(template)) { 

     const name = reg.exec(template)[1];        
     template = template.replace(reg, data[name]);        
     return render(template, data); 
 }    
 return template; 
}
let template = '我是{ 
{name}}，职业{ 
{job}}，工资{ 
{salary}}';
let person = { 
 name: '阿巴', job: '前端', salary:30000};
console.log(render(template, person)); // 我是阿巴，职业前端，工资30000

模块:

模块是一种将代码分割成独立文件并进行组织的方式，通常用于实现代码复用和可维护性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R21VjlRF-1677670594150)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20230228225933855.png)]

数组的方法:

数组有许多方法可以用于对数组进行操作，如 push、pop、shift、unshift、slice、splice、map、filter、reduce 等。

包管理工具:

包管理工具是一种用于管理项目依赖的工具，如 npm、yarn 等。

单文件组件:

单文件组件是 Vue.js 中一种用于将组件的模板、脚本和样式组织在一个文件中的方式。

模板语法:

Vue.js 中的模板语法是一种用于描述视图的声明性语法，它可以包含表达式、指令和事件处理等内容。

响应式基础:

Vue.js 中的响应式基础是一种通过数据劫持来实现自动更新视图的机制，它使用 Object.defineProperty() 或 ES6 的 Proxy 来实现。

计算属性:

计算属性是一种用于计算衍生数据的属性，它可以缓存计算结果并在依赖数据发生变化时自动更新。

类与样式绑定:

类与样式绑定是一种用于根据数据绑定动态更新元素的 class 和 style 属性的方式。

条件渲染:

条件渲染是一种根据条件动态渲染元素或组件的方式，可以使用 v-if、v-else-if 和 v-else 指令实现。

列表渲染:

列表渲染是一种根据数组数据动态渲染多个相同结构的元素或组件的方式，可以使用 v-for 指令实现。

事件处理:

Vue.js 中的事件处理可以使用 v-on 指令绑定事件监听器，也可以使用 $emit() 方法触发自定义事件。

双向绑定:

双向绑定是一种将视图和数据进行双向绑定的方式，可以使用 v-model 指令实现。
v-on事件修饰符
- v-on .stop 阻止事件冒泡。
- v-on .prevet 阻止事件的默认行为。
- v-on .capture 添加事件侦听器，使用事件捕获模式。
- v-on .self 只当事件在该元素本身触发时，触发回调。
- v-on .once 事件只触发一次

生命周期:

Vue.js 组件
侦听器:
- 侦听器是一种用于监听数据变化并触发回调函数的方式，可以使用 watch 属性或 $watch() 方法实现。
模板引用:
- 模板引用是一种用于获取组件或元素的引用并在父组件中使用的方式，可以使用 ref 属性实现。
组件基础:
- 组件是一种将视图、逻辑和样式封装在一起的可复用的代码块，它们可以像原生 HTML 元素一样使用。
组件注册:
- 组件注册是一种将组件声明并注册到 Vue.js 中以便在其他组件中使用的方式，可以使用全局或局部注册方式实现。
Props:
- Props 是一种从父组件向子组件传递数据的方式，它们可以是任何 JavaScript 数据类型，并在子组件中通过 props 属性访问。
事件:
- 事件是一种在组件之间进行通信的方式，它们可以使用 $emit() 方法触发自定义事件，并在父组件中使用 v-on 指令监听。
插槽:
- 插槽是一种用于在父组件中向子组件传递内容的方式，它们可以在子组件中定义并在父组件中使用。
依赖注入:
- 依赖注入是一种将依赖注入到组件中以便在组件中使用的方式，可以使用 provide 和 inject 实现。
组合式函数:
- 组合式函数是一种将组件逻辑和样式封装在一起的可复用的代码块，它们可以接收和返回其他组合式函数。
插件:
- 插件是一种将功能封装成可复用的代码块并注册到 Vue.js 中以便在全局范围内使用的方式，可以使用 Vue.use() 方法注册。
路由:
- 路由是一种用于管理单页面应用中页面切换的方式，可以使用 Vue Router 实现。
以上是对前端相关知识点的简要总结，但并不是完整的知识体系，每个知识点都有其详细的细节和实现方式，需要更深入的学习和实践才能掌握。