第十五章 ECMAScript6新增的常用语法

一、声明关键字

1. ES6新增的声明关键字：
   • let，const：声明变量
   • class：声明类
   • import，export：模块化开发
2. let和const的特点
   1. 不存在提升
   2. 不允许重复声明
   3. 全局不会绑定到window
   4. 块级作用域
   5. 暂时性死区
   6. const声明的变量不允许修改地址
3. 使用规范：const -> let -> var

二、箭头函数

1. 箭头函数的特点等同于无名函数
   1. 赋值式创建函数的值
   2. 作为参数，回调函数
   3. 作为返回值，闭包函数
   4. 作为事件处理函数，不推荐
   5. 作为匿名函数的函数体使用
2. 语法：
   • 完整语法：()=>{}
   • 极简语法：=>
     • 当有且只有一个参数时，可以省略小括号
     • 当有且直接返回了数据时，可以省略花括号和return，花括号和return必须同时省略
3. 特点：
   1. 可读性差
   2. 语法极简
   3. 没有自身的this，自动使用外层this
   4. 不能被new执行

三、解构赋值

1. 解开结构赋值，一般用于处理对象或数组
2. 对象的解构
   • 规则：按照键和值的关系，一一对应，进行解构
   • 不存在的键，为undefined
   • 可以在声明变量时直接使用=号设置默认值
     • let {name,age=18,sex} = obj;
3. 数组的解构
   • 规则：按照索引从左向右，一一对应，进行解构
   • 不存在的索引，为undefined
   • 可以在声明变量时直接使用=号设置默认值
     • let [q, w, e=0] = arr
4. 字符的解构
   • 字符是一种类数组的结构，等同于数组的结构规则
     • let [a, s, d] = str;

四、展开运算符

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

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

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

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}今
天
送
我
一
件
礼
物`;

2. 方法
   • 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对象：：无序的无重复的值值对集合
2. Set：
   • 创建：const s = new Set()
   • 属性：s.size
   • 方法：
     • 添加数据：s.add( val )
     • 删除数据：s.delete( val )
     • 查询是否存在数据：s.has( val )
     • 清空数据：s.clear()
     • 获取所有键名：s.keys()
     • 获取所有值：s.values()
     • 获取所有键值：s.entries()
     • 遍历所有数据：s.forEach( callback )
3. Map：
   • 创建：const m = new Map()
   • 属性：m.size
   • 方法：
     • 添加数据：m.set( key, val )
     • 查询数据：m.get( key )
     • 删除数据：m.delete( key )
     • 查询是否存在数据：m.has( key )
     • 清空数据：m.clear()
     • 获取所有键名：m.keys()
     • 获取所有值：m.values()
     • 获取所有键值：m.entries()
     • 遍历所有数据：m.forEach( callback )

九、for-of

1. ES6新增的遍历语句：主要用于遍历set和map
2. for-of遍历的是值
   • 能否遍历数组
   • 能否遍历对象
   • 能否遍历字符
3. for-in遍历的是键
   • 能否遍历set
   • 能否遍历map

• for-of 可以遍历：Set 和 Map 结构、数组、某些类似数组的对象（比如arguments对象、DOM NodeList 对象），以及字符串。