ES6（day15 保姆级攻略）

ES6（即ECMAScript 6）是JavaScript的一个重要版本，它引入了许多新的语言特性和功能，使得前端开发变得更加现代化和高效。ES6的出现为前端开发带来了一系列的改变，包括箭头函数、模板字符串、解构赋值、类和模块化等等。这些新特性和功能让前端开发人员能够更加轻松地编写复杂的应用程序，并且提高了代码的可读性和可维护性。在本文中，我们将深入探讨ES6在前端开发中的应用，介绍其主要特性和语法规则，帮助读者更好地理解和应用ES6。

一、声明关键字

1. ES6新增的声明关键字：

• • let，const：声明变量
  • class：声明类
  • import，export：模块化开发

1. let和const的特点

2. 1. 不存在提升
   2. 不允许重复声明
   3. 全局不会绑定到window
   4. 块级作用域
   5. 暂时性死区
   6. const声明的变量不允许修改地址

3. 使用规范：const -> let -> var

二、箭头函数

1. 箭头函数的特点等同于无名函数

2. 1. 赋值式创建函数的值
   2. 作为参数，回调函数
   3. 作为返回值，闭包函数
   4. 作为事件处理函数，不推荐
   5. 作为匿名函数的函数体使用

3. 语法：

• • 完整语法：()=>{}
  • 极简语法：=>
• • • 当有且只有一个参数时，可以省略小括号
    • 当有且直接返回了数据时，可以省略花括号和return，花括号和return必须同时省略

1. 特点：

2. 1. 可读性差
   2. 语法极简
   3. 没有自身的this，自动使用外层this
   4. 不能被new执行

三、解构赋值

1. 解开结构赋值，一般用于处理对象或数组
2. 对象的解构

• • 规则：按照键和值的关系，一一对应，进行解构
  • 不存在的键，为undefined
  • 可以在声明变量时直接使用=号设置默认值
• • • let {name,age=18,sex} = obj;

1. 数组的解构

• • 规则：按照索引从左向右，一一对应，进行解构
  • 不存在的索引，为undefined
  • 可以在声明变量时直接使用=号设置默认值
• • • let [q, w, e=0] = arr

1. 字符的解构

• • 字符是一种类数组的结构，等同于数组的结构规则
• • • let [a, s, d] = str;

四、展开运算符

1. 一般用于快速展开复杂的数据，获取其内部的值
2. 语法：...要展开的数据
3. 展开对象：只能在能接收键值对的位置展开对象

• • 花括号内

const obj1 = {name:"Admin"};
// 花括号内
const obj2 = {...obj1};

1. 展开数组：只能在能接收多个数据的位置展开数组

const arr = [3, 4, 5];
// 中括号内
const arr2 = [...arr];
// 参数
const max = Math.max(...arr);
// 伪数组转真数组
const arr3 = [...aLi];

五、对字符的补充

1. 字符串模板：```

• • 支持反引号内回车换行
  • 反引号内的变量使用${}进行标记

const msg = "小王";
const str = `今天${msg}真好`;
const str2 = `${msg}今
天
送
我
一
件
礼
物`;

1. 方法

• • str.repeat()
  • str.startsWith()
  • str.endsWith()
  • str.includes()
  • str.codePointAt()
  • String.fromCodePoint()

六、Symbol

1. 类似于字符，基本数据类型，任何两个Symbol都不相等，用于表示标记值或状态
2. 用于消除使用字符或数值或布尔等常规数据作为状态时的隐患
3. 语法：const s = Symbol()

七、对象的简写语法

let name = "张三";
// 当对象的键和存储了值的变量名重名时，可以简写成一个单词
const obj = {
  name
}
console.log(obj);	// {name:"张三"}

const obj = {
  // 方法可以省略冒号和function
  show(){
		console.log(this)
	}
}
obj.show(); // { show:f }

八、Set和Map

1. 数据的打包形式

• • 数组对象：有序的可重复的值集合
  • 对象：无序的无重复的键值对集合
  • Set对象：无序的无重复的值集合
  • Map对象：：无序的无重复的值值对集合

1. Set：

• • new Set()

1. Map：

• • new Map()

九、for-of

1. ES6新增的遍历语句：主要用于遍历set和map
2. for-of遍历的是值

• • 能否遍历数组
  • 能否遍历对象
  • 能否遍历字符

1. for-in遍历的是键

• • 能否遍历set
  • 能否遍历map