都2024年了，再不学ES6你就out了 —— 一文搞懂ES6_net6 支持es6吗

className : “卡西诺”,
age: 18
}
let {className} = obj; // 得到卡西诺
let {age} = obj; // 得到18

// 剩余运算符
let {a, b, …demo} = {a: 1, b: 2, c: 3, d: 4};
// a = 1
// b = 2
// demo = {c: 3, d: 4}

### 3. 模板字符串


* 模板字符串相当于**加强版的字符串**，用反引号 ``
* 除了作为普通字符串，还可以用来定义多行字符串，可以在字符串中加入变量和表达式



> 
> **3.1 普通字符串**
> 
> 
> 

// 普通字符串
let string = “hello”+“小兄弟”; // hello小兄弟
// 如果想要换行
let string = “hello’\n’小兄弟”
// hello
// 小兄弟

> 
> **3.2 模板字符串**
> 
> 
> 

let str1 = “穿堂而过的”;
let str2 = “风”;
// 模板字符串
let newStr = 我是${str1}${str2};
// 我是穿堂而过的风
console.log(newStr)

// 字符串中调用方法
function fn3(){
return “帅的不行！”;
}
let string2= 我真是${fn3 ()};
console.log(string2); // 我真是帅的不行！

### 4. ES6 函数（升级后更爽）



> 
> **4.1 箭头函数**
> 
> 
> 


* 箭头函数是一种更加简洁的函数书写方式
* **箭头函数本身没有作用域（无this）**
* 箭头函数的this指向上一层，**上下文决定其this**
* 基本语法：参数 => 函数体


**a. 基本用法**

let fn = v => v;
//等价于
let fn = function(num){
return num;
}
fn(100); // 输出100

**b. 带参数的写法**

let fn2 = (num1,num2) => {
let result = num1 + num2;
return result;
}
fn2(3,2); // 输出5

**c. 箭头函数中的this指向问题**


* 箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。在函数定义的时候就已经决定了

function fn3(){
setTimeout(()=>{
// 定义时，this 绑定的是 fn3 中的 this 对象
console.log(this.a);
},0)
}
var a = 10;
// fn3 的 this 对象为 {a: 10}，因为它指向全局: window.a
fn3.call({a: 18}); // 改变this指向，此时 a = 18

**d. 箭头函数适用的场景**


* 当我们代码里存在这样的代码：let self = this;
* 需要新建变量去保存this的时候
* 案例如下：

let Person1 = {
‘age’: 18,
‘sayHello’: function () {
setTimeout(()=>{
console.log(this.age);
});
}
};
var age = 20;
Person1.sayHello(); // 18

> 
> **4.2 函数参数的扩展**
> 
> 
> 


**1. 默认参数**

// num为默认参数，如果不传，则默认为10
function fn(type, num=10){
console.log(type, num);
}
fn(1); // 打印 1，10
fn(1,2); // 打印 1，2 （此值会覆盖默认参数10）

* 需要注意的是：**只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递**。


**2. 不定参数**

// 此处的values是不定的，且无论你传多少个
function f(…values){
console.log(values.length);
}
f(1,2); // 2
f(1,2,3,4); // 4

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531222239469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70)


### 5. Class类


* class (类)作为对象的模板被引入，可以通过 class 关键字定义类
* class 的本质是 function，同样可以看成**一个块**
* 可以看作一个语法糖，让**对象原型的写法更加清晰**
* 更加标准的**面向对象编程**语法



> 
> **5.1 类的定义**
> 
> 
> 

// 匿名类
let Demo = class {
constructor(a) {
this.a = a;
}
}
// 命名类
let Demo = class Demo {
constructor(a) {
this.a = a;
}
}

> 
> **5.2 类的声明**
> 
> 
> 

class Demo {
constructor(a) {
this.a = a;
}
}

* 请注意，类不能重复声明
* 类定义不会被提升，必须在访问前对类进行定义，否则就会报错。
* 类中方法不需要 function 关键字。
* 方法间不能加分号



> 
> **5.3 类的主体**
> 
> 
> 


* 公共属性（依然可以定义在原型上）

class Demo{}
Demo.prototype.a = 2;

* 实例属性

class Demo {
a = 2;
constructor () {
console.log(this.a);
}
}

* 方法：constructor

class Demo{
constructor(){
console.log(‘我是构造器’);
}
}
new Demo(); // 我是构造器

如果不写constructor，也会默认添加



> 
> **5.4 实例化对象**
> 
> 
> 

class Demo {
constructor(a, b) {
this.a = a;
this.b = b;
console.log(‘Demo’);
}
sum() {
return this.a + this.b;
}
}
let demo1 = new Demo(2, 1);
let demo2 = new Demo(3, 1);
// 两者原型链是相等的
console.log(demo1.proto == demo2.proto); // true

demo1.proto.sub = function() {
return this.a - this.b;
}
console.log(demo1.sub()); // 1
console.log(demo2.sub()); // 2

### 6. Map()



> 
> **6.1 Maps 和 Objects 的区别**
> 
> 
> 


* 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值
* Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是
* Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210601005359180.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70)



> 
> **6.2 Map中的key**
> 
> 
> 

// 1. key是字符串
let myMap = new Map();
let keyString = “string”;

myMap.set(keyString, “和键’string’关联的值”);

// keyString === ‘string’
myMap.get(keyString); // “和键’string’关联的值”
myMap.get(“string”); // “和键’string’关联的值”

// 2.key是对象
let myMap = new Map();
let keyObj = {},

myMap.set(keyObj, “和键 keyObj 关联的值”);
myMap.get(keyObj); // “和键 keyObj 关联的值”
myMap.get({}); // undefined, 因为 keyObj !== {}

// 3. key也可以是函数或者NaN

> 
> **6.3 Map 的迭代**
> 
> 
> 

// 1.使用 forEach
let myMap = new Map();
myMap.set(0, “zero”);
myMap.set(1, “one”);

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

myMap = new Map();
myMap.set(0, “zero”);
myMap.set(1, “one”);

[外链图片转存中…(img-QcuJg6DW-1714841468354)]
[外链图片转存中…(img-rvomhZi4-1714841468355)]
[外链图片转存中…(img-8gz1mDLc-1714841468355)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取