前端与移动开发----JS高级----ES6新增，解构赋值，箭头函数
JS高级04
回顾
- 函数
- 普通函数 function 函数名() {}
- 对象里函数 key: function(){}
- 事件处理函数 事件源.事件类型 = function(){}
- 定时器/计时器: setTimeout(function(){}, 毫秒)
- 构造函数: function 大写开头函数名(){} , 用new 调用
- 匿名函数 function () {}
- 立即执行函数 (function(){})();
- 递归函数: function myFn(){ myFn() } myFn()
- 高阶函数: 把函数体当参数 / 返回值 使用的 函数
- 回调函数: 在函数中, 回调参数传入的函数体执行
- 闭包: 内层函数引用外层函数声明的变量形成闭包
- call和apply马上触发函数执行修改this指向
- call以形参传
- apply以数组形式传
- bind会返回一个函数, 需要自己手动调用
-
深拷贝 浅拷贝
只有引用(复杂)数据类型, 是在堆里开辟空间, 那么就会有深拷贝还是浅拷贝问题存在
- 浅拷贝 -> 只拷贝第一层的数组/对象的值, 第二层往里之间还是会互相影响
- 深拷贝 - > 深层次, 递归拷贝所有的数组和对象, 彻底让2个数组/对象之间再毫无瓜葛
-
正则表达式
创建方式 /正则表达式/
使用.test() 传入字符串 如果符合正则条件则返回true
- 边界符 ^ $
- i g
- |
- []
- 量词
- 星号 代表 0 - 多次
- 加号 代表 1- 多次
- ? 代表 0 - 1次
- {n,m} n - m 次
12. ES6 - 声明变量
javaScript - 脚本语言运行在浏览器的html文件中
作用: 编写代码实现交互
JS组成:
- ECMAScript标准: ES5 (ES的第五代标准)
- DOM
- BOM
ES6: ECMAScript第6代标准
浏览器会向下兼容 - 既支持先进的也支持原来的 (所以新学的和原来的都可以使用)
12.0 let - 块级作用域
大括号 - let声明的变量 - 块级作用域 - 只能在大括号里使用
// 作用域:
// 1. 函数级作用域: 在function内, var声明的变量, 只能在函数内使用
function myFn() {
var myName = "小传";
console.log(myName); // 小传
}
myFn();
// console.log(myName); // 报错: myName is not defined
// 2. 块级作用域: (if大括号/for大括号/while大括号/function大括号/独立的大括号), 在大括号内, 用let声明的变量, 形成块级作用域, 只能在大括号内使用
if (true) {
let youName = "老李头";
console.log(youName); // 老李头
}
// console.log(youName); // 报错: youName is not defined
// 总结:
// (1): 作用域其实就是影响变量访问的方式
// (2): 在大括号里使用let 声明的变量 - 是块级作用域
12.1 let - for不泄露
避免for循环 变量 泄露到 全局作用域上
// 1. 避免全局污染问题
var i = 100;
for (var i = 0; i < 10; i++){
}
console.log(i); // 10
// 问题: 变量泄露到了全局上
// 解决: ES6引入了let来解决
var j = 90;
for (let j = 0; j < 10; j++){
}
// console.log(j); // 90
12.2 let - 不挂载到window上
避免污染window原有的全局变量
// 问题: 变量叫alert, 会覆盖原有功能
// var alert = function(){};
// window.alert("我要弹窗");
// 使用let呢?
// let alert = function(){};
// window.alert("我要弹窗");
let a = 10;
console.log(window.a);
// 总结: let声明的全局变量 - 不会挂载到window上(防止污染window原有的全局变量)
12.3 let - 无变量提升 - 变量名不重复
// 回顾: ES5, var 变量提升
function myFn() {
console.log(theName); // undefined
var theName = "我的";
}
myFn();
// 变量提升: 在代码编译期间, 只会把声明, 提升到当前作用域的第一行
// 1. let不存在变量提示 - 暂时性死区
function youFn() {
// console.log(youName); // 报错: Cannot access 'youName' before initialization, 初始化之前不能访问youName
let youName = "let声明的变量";
// 2. 同一个作用域下 - let变量名不可以重复
// let youName = 100; // Identifier 'youName' has already been declared
}
youFn()
// 好处: 去掉不严谨的代码格式, 一定要先声明变量, 再使用.
// 注意: let声明的变量不能重复 (在同一个作用域下)
12.4 案例 - 使用let实现循环绑定点击事件
例子: 循环遍历加监听, 使用let取代var是趋势
var liList = document.querySelectorAll("#myUL>li");
// 方式1. 自定义属性
// for (var i = 0; i < liList.length; i++) {
// liList[i].index = i;
// liList[i].onclick = function(){
// console.log(this.index);
// }
// }
// 方式2. 闭包
// for (var i = 0; i < liList.length; i++) {
// (function (ind) {
// liList[ind].onclick = function () {
// console.log(ind);
// }
// })(i);
// }
// 方式3. let
for (let i = 0; i < liList.length; i++) {
liList[i].onclick = function () {
console.log(i);
}
}
// 总结:
// for循环比较特殊, let每次都会产生一个父级的块级作用域, JS引擎内部会自动记录i的值, 分配给下个循环时, 父级作用域上i的初始值
// 内部使用时, {}里没有声明过i, 所以自然会向外层父级作用域查找
12.5 const - 不可修改
作用: 与var和let一样, 也是用于定义变量的
- 但是此变量, 只能赋予初始值, 以后无法被重新赋值, 所以也叫常量(无法被重新赋值的量)
- 其他特点和let相同
- 块级作用域
- 不挂载到 window 上
- 没有变量提升 (必须先声明再使用)
- 同一个作用域下, 不能重复声明同一个名字的变量
// let / var 声明的是变量, 变量的值可以重新赋予
// 1. 值不可以被重新赋予, 其他特点同let
const MYCONST = "我是常量";
// MYCONST = "123"; // Assignment to constant variable. 常量不可以重新赋值, 只能在初始化时, 给一次值
// 2. 应用场景
// 数学, 圆的周长2πr, π的值是固定的
const PI = 3.1415926;
console.log(2 * PI * 3);
// 总结: 大家遵循规范, 为了和普通的变量做一个区分, 要求常量必须都大写
12.6 const - 注意事项
const声明的变量, 保存的是对象/数组的堆内存地址
const修饰的变量的值不能重新赋值, 但是指向的对象/数组可以操作
const OBJ = {
name: "张三",
age: 19
};
// 疑问: 如果const修饰的变量, 保存的是对象/数组, 那么对象/数组能否修改?
// const修饰的变量不能被重新赋值, 但是指向的对象可以添加/删除key+value
OBJ['age'] = 18;
console.log(OBJ);
// OBJ = {}; // 会报错, 对象本身不能被重新赋值, 这是在修改OBJ对象本身, 重新赋予对象
总结
| 关键字 | 初始值 | 块级作用域 | 变量提升 | 重新赋值 | 通过window调用 |
|---|---|---|---|---|---|
| let | - | √ | x | Yes | No |
| const | YES | √ | x | No | No |
| var | - | x | √ | Yes | Yes |
let 和 const 是块级作用域, 不会挂载到window上, 没有变量提升
var 是函数级作用域
const必须有初始值, 之后无法重新赋予
13. 解构赋值
概念: ES6 允许 按照一个模式, 从目标结构(数组/对象)中提取值, 赋予给变量, 解构的目的方便取值.
关键字：模式 数组/对象 提取 赋值 变量
目的: 优化取值赋值的过程
13.0 解构赋值好处
// 什么是解构赋值: ES6 允许 按照一个模式, 从数组/对象中提取值, 赋予给变量
// 例1: 数组解构举例
let arr = ["春天", "夏天", "秋天", "冬天"];
// let winOne = arr[0];
// let winTwo = arr[1];
// let winThree = arr[2];
// let winFour = arr[3];
// 写起来很麻烦, 解构赋值怎么写呢?
let [winOne, winTwo, winThree, winFour] = arr;
// 右侧是数组, 左侧[] 对应模式
console.log(winThree);
// 例2: 对象解构举例
let obj = {
username: "小花",
age: 18
}
// let myUserName = obj['username'];
// let myAge = obj['age'];
// console.log(myUserName); // "小花"
let { username: myUserName, age: myAge } = obj;
console.log(myUserName, myAge); // "小花", 18
// 上面这行代码的意思如下
// let {key : 变量, key : 变量} = obj;
// 总结：赋值运算符, 左边的是模式和变量声明，右边是要解构的数组或对象
// 以[]或{}的形式出现在赋值运算符左边的时候，一定是解构赋值（模式）
13.1 数组的解构赋值
-
完全解构
-
不完全解构赋值
-
使用场景: 交换2个变量值
注意: 一般数组里的数据每个取出, 还是正常循环
let arr = ["春天", "夏天", "秋天", "明天"];
// 解构赋值 = 左右两边的模式要匹配
// 模式: 左边是[], 右边也要是[]
// 解构赋值的目的: 优化取值和赋值的过程
// 1. 完全解构 - 都接收
// 会按照下角标对应的关系, 把右侧结构里面对应下标的值, 赋予给左边的变量
// 核心: 下标对应
let [one, two, three, four] = arr;
// 2. 不完全解构 - 只要某几个
let [, , , last] = arr;
console.log(last);
// 3. 交换数组里2个元素的值
var x = 20;
var y = 50;
[x, y] = [y, x]; // 注意这里右侧是把变量的值都取到原地, 才开始赋予给左侧(=赋值运算符先看右边)
console.log(x, y);// 50, 20
// 注意1: 模式匹配, 不写var就是重新赋值, 而不是重新声明+赋值
// 注意2: = 是把右侧的变量的值, 都赋予给左边 (所以在右侧先把值取到原地再赋予给左边)
var brr = [49, 27];
[brr[1], brr[0]] = [brr[0], brr[1]];
console.log(brr);
13.2 对象的解构赋值
- 对象的解构赋值
- 解构对象使用默认值
- 嵌套解构
var userObj = {
name: "小王",
age: 8,
sex: "女",
height: 100
}
// 1. 对象的完全解构
// (1): 左右两边模式 {} = {} 模式要匹配
// (2): key对应的, 右侧key的值, 对应赋予给左边同名key的变量
// var {name: theName, age: theAge, sex: theSex, height: theHeight} = userObj;
// 2. 不完全解构
var {age: theAge} = userObj;
console.log(theAge);
// 3. 解构失败
var {address: theAddress} = userObj;
console.log(theAddress); // undefined
// 4. 解构变量的默认值使用
// 变量在值为undefined的时候, 才会被默认值覆盖
var {address: theAddress = '北京'} = userObj;
console.log(theAddress);
// 5. 嵌套结构
var theObj = {
name: "老李",
age: 58,
family: {
firstName: "老",
lastName: "李"
}
}
// 嵌套结构, 不用变量接受了, 而是又用一个嵌套的模式来接收
var {family: {firstName, lastName}} = theObj;
console.log(firstName, lastName);
- 使用场景
// 4. 使用场景
// (1): 取值方便
var obj = {
info: {
uname: "小明",
age: 18,
sex: "男",
hobby: "抬杠"
}
};
// 以前:
console.log(obj.info.uname + "今年" + obj.info.age + "岁" + "性别" + obj.info.sex + "爱好是" + obj.info.hobby);
// 现在:
var {uname, age, sex, hobby} = obj.info;
console.log(uname + "今年" + age + "岁, 性别:" + sex + "爱好是" + hobby);
// (2): 配合默认值, 省略很多判断
// 计算对象里3个value的和(threeNum未定义)
let obj8 = {
oneNum: 10,
twoNum: 20
}
// 直接非法运算了
console.log(obj8.oneNum + obj8.twoNum + obj8.threeNum); // NaN
// 用if判断/条件运算符
// let oneNum = obj8.oneNum === undefined ? 0 : obj8.oneNum;
// let twoNum = obj8.twoNum === undefined ? 0 : obj8.twoNum;
// let threeNum = obj8.threeNum === undefined ? 0 : obj8.threeNum;
// console.log(oneNum + twoNum + threeNum); // 30
// 解构赋值+默认值写法
let { oneNum = 0, twoNum = 0, threeNum = 0 } = obj8;
console.log(oneNum + twoNum + threeNum); // 30
14. 箭头函数
14.0 箭头函数 - 基础语法
作用: 定义匿名函数, 简化回调函数和普通函数的写法
例如: arr.filter(function(val){
return val >= 18;
})
箭头函数: arr.filter(val => val >= 18);
使用:
- 无参, 无返回 / 无参, 有返回 / 有参, 有返回
// 1. 无形参, 无返回值的
var fn1 = () => {
console.log("我是无形参无返回值的箭头函数");
}
fn1();
// 2. 有形参, 无返回值
var fn2 = (x) => {
console.log(x * 5);
}
fn2(100);
// 3. 有形参, 有返回值
var fn3 = (x, y) => {
return x + y;
}
var result = fn3(5, 9);
console.log(result);
// 注意: 就是把function 变成了 =>, =>千万不要加空格, 其他的使用和之前学的函数一样
14.1 箭头函数 - 简化
- 参数只有1个, 可以省略小括号
- 方法体只有一行代码, 可以省略大括号, 省略大括号后, 默认返回此表达式结果
// 优势1: 如果形参只有一个, 可以省略小括号
var fn = x => {
return x * 2;
}
// 优势2: 如果函数体只有一行代码, 可以省略大括号, 默认返回这个表达式的结果
var fn = x => x * 2;
console.log(fn4(10));
14.2 箭头函数 - this指向
- function函数: this指向的是函数的调用者
- 箭头函数: this指向的是外层作用域this的值
var obj = {
a: function(){
console.log(this); // obj
},
b: () => {
console.log(this); // window
},
c: function(){
setTimeout(function(){
console.log(this); // window
}, 1000);
},
d: function(){ // this:obj
setTimeout(() => {
console.log(this); //obj
}, 1000);
},
e: () => {// this:window
setTimeout(() => {
console.log(this); // this:window
}, 2000);
},
f: function(){ // this的值: obj
return () => {
console.log(this); // obj
}
},
g: function(){//obj
var d = (function(){//window
return {
o: function(){ //d
setTimeout(() => {
console.log(this); //d
}, 1000);
}
}
})();// d = {o: function}
d.o();
}
}
obj.g()
obj.a();
obj.b();
obj.c();
obj.d();
obj.e();
var d = obj.f();
d();
14.3 函数形参默认值
允许我们在function / 箭头函数中, 对形参赋予默认值
形参的默认值----当不传入参数的时候/形参的值是undefined, 会被默认值覆盖掉
// 默认值作用: 防止在不传递参数时, 有问题
// 以前做法:
// function fnOne(a, b){
// a = a || 0;
// b = b || 0;
// console.log(a + b);
// }
// fnOne();
// 其实想在不传数字时, 默认是0+0, 但是现在是undefined相加(结果是NaN了)
// 使用默认值解决问题
function fnOne(a = 0, b = 0) {
console.log(a + b);
}
fnOne();
fnOne(10, 20);
// 箭头函数体也能使用默认值
let fnTwo = (a = 0, b = 0) => {
console.log(a + b);
}
fnTwo();
fnTwo(100, 200);
14.4 箭头函数的特点
- 不能用作构造函数, 和new
- 箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候查看
- 不能使用arguments
// 1. 箭头函数不能被用作构造函数使用, 不能用new来调用
// 原因箭头函数里没有自己的this指向, 所以也改不了
// var Person = (theName, theAge) => {
// this.name = theName;
// this.age = theAge;
// }
// var p = new Person();
// console.log(p);
// 2. 箭头函数不能使用arguments
// var fn = () => {
// console.log(arguments);
// }
// fn(10, 20, 56);
14.5 剩余参数运算符reset
…剩余参数运算符 -> 函数形参上, 为了 接收所有的参数
- 一般配合箭头函数, 因为箭头函数内不能用arguments
- 必须出现在形参的最后面
// 使用 ...来替代arguments
// 注意: ...变量名, 变量名随便起, 用于接收参数 (参数接收每个位置要对应)
// 作用: 接收个数不确定的, 参数值, 形成一个数组使用
function youSum(a, ...arg){
console.log(a, arg);
}
youSum(5, 10);
youSum(100, 200, 300);
youSum(100, 200, 300, 8);
var mySum = (...arg) => {
console.log(arg);
}
mySum(10, 20, 30, 40, 50);
14.6 展开语法spread
…spread展开运算符 -> 数组/对象上, 为了快速拷贝一个数组/对象
// ...变量名: 在函数的形参上, 可以接受剩余参数的值, 形成一个数组
// ...变量名: 用在了函数形参以外的地方, 展开运算
// 1. 数组的展开使用
var arr = [10, 5, 8];
console.log(arr[0], arr[1], arr[2]);
console.log(...arr); // 上下是等价的
console.log(Math.max(...arr)); // 10
// 2. 对象的展开使用
var obj = {
age: 18,
sex: "不知道",
address: "泰国"
}
console.log({...obj}); // 不需要forin来拷贝对象了
// 既然是拷贝内容, 那是深还是浅拷贝呢?
// ...只是第一层内容的拷贝(所以是浅拷贝)
var obj2 = {
age: 18,
grade: [90, 100, 98],
family: {
fName: "李"
}
}
var newObj = {...obj2}; // ...常用于内容的复制(浅拷贝)
console.log(newObj);
newObj.grade[0] = 1000;
console.log(obj2); // 发现里面的grade第一个值为1000, 被影响了, 证明...内容拷贝是浅拷贝
// 如果只有一层, 直接用...复制内容过来就ok
// 但是如果有多层, 调用deepCopy方法即可深拷贝
15. ES6新增 数据类型
15.0 Set容器
无序不重复的value集合体
let set = new Set([1, 3, 3, '9', true, 2, 3, 4, 1, 5, true, '9']);
- Set()
- set.add(value)
- set.delete(value)
- set.has(value) 查找 (返回true, 代表存在)
- set.size 容器的长度
- for…of 遍历
- set.clear() 清空
场景: 去除数组中重复的元素
区别: 数组是有序可重复的, Set是无序不重复的
备注: 可使用Array.from() 再转回成数组
15.1 Map容器
无序不重复的多个key-value的集合体
let map = new Map([['bbcc', 12],[25, 'age']]);
- Map()
- map.set(key, value)//添加
- map.get(key)
- map.delete(key)
- map.has(key) 查找 存在true
- map.size
- for…of遍历
- map.clear()
区别: Object对象的key只能是字符串, 而Map的key可以是任意类型
15.2 键值对简化写法
- 当key和value变量名, 同名可以只写key
- 当value是 : function, 可以省略: function
let x = 10;
let y = 20;
let obj = {
x,
y, // 相当于 y: y // 前面的y是key的名字, 后面y是变量名, 会使用20
uname: 'uname', // 这个value不是 变量名, 所以不能省略
getPosition(){ // 省略了:function 相当于 getPosition: function(){return obj.x}
return obj.x
}
}
16. ES5新增数组方法
| 对象调用的方法 | 作用 | 返回值 |
|---|---|---|
| array.forEach(function(value, index, array){}) | 遍历 | 无 |
| array.map(function(value, index, array){}) | 遍历&返回 | 新数组 |
| array.filter(function(value, index, array){ return 条件 }) | 过滤&返回 | 新数组 |
| array.every(function(value, index, array){ return 条件}) | 判断&返回 | 布尔值 |
| array.some(function(value, index, array){return 条件}) | 判断&返回 | 布尔值 |
| Array.from(伪数组) | 转换 | 真数组 |
16.0 数组方法使用
var arr = [1, 5, 7, 3, 10, 2, 4];
// 1. forEach() - 单纯遍历 - 无返回值
arr.forEach(function(value, index){
console.log(index + "--" + value);
})
// 2. map() - 遍历 - 收集每次return结果 - 返回全新数组
var result2Arr = arr.map(function(value, index){
return value + 1;
})
console.log(result2Arr);
// 3. filter() - 过滤 - 收集每次return结果 - 返回全新数组
var result3Arr = arr.filter(function(value, index){
return value >= 5;
})
console.log(result3Arr);
// 4. every() - 找到不符合条件的 - 直接返回false - 不继续循环
var arr5 = [20, 21, 1, 18, 19, 23];
var result5 = arr5.every(function(value, index){
return value > 18;
})
console.log(result5);
// 5. some() - 找到符合条件的 - 直接返回true - 不继续循环
var result6 = arr5.some(function(value, index){
return value < 18;
})
console.log(result6);
// 总结:
// map() - 循环 - 处理每个元素 - 返回新数组
// every() - 找到第一个不符合条件的, 找到就返回false
// some() - 找到第一个符合条件的, 找到就返回true
16.1 案例 - 全选和反选
// 需求: 点击小多选框, 都勾选时, 全选框也勾选
// 思路: 声明个变量, 遍历每个小多选框, 如有一个未选中, 则变量直接保存false, 赋予给全选框, 否则全选框设置为true
// 1. 获取标签
var checkAll = document.getElementById("checkAll");
var ckList = document.querySelectorAll(".ck"); // 所有小多选框
// 2. 全选影响所有小的
checkAll.onclick = function(){
var allChecked = this.checked;
Array.from(ckList).map(function(el){
el.checked = allChecked;
})
}
// 3. 小影响多
var ckArr = Array.from(ckList);
ckArr.map(function(el){
el.onclick = function(){
var isAll = ckArr.every(function(el){return el.checked == true}); // 筛选是否有不符合条件的返回false
checkAll.checked = isAll == false ? false : true;
}
})
期望
学完以后, 多使用ES6的语法来编写代码, 数组循环以后多用方法, 少用for了
面试题
数组中的forEach和map的区别？
都是遍历数组的, 都接收一个函数体, 都有3个形参(value, index, array), 函数里this都指向window
forEach方法没有返回值, 而map方法会返回一个全新数组, 里面是函数体每次执行, 最后return的值
es6熟悉吗，es5和es6的区别，说几个es6的新增方法（必会）
-
新增声明命令let和const, let 表示变量、const 表示常量
- 都是块级作用域。以{}代码块作为作用域范围 只能在代码块里面使用。
- 不存在变量提升，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
- 在同一个代码块内，不允许重复声明。
- const声明的是一个只读常量，在声明时就需要赋值。（如果 const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。）
-
模板字符串
一对反引号(`)标识，也可以当作普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量，js表达式或函数，变量、js表达式或函数需要写在${ }中
-
函数的扩展
函数的默认参数
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
-
箭头函数
在es6中，提供了一种简洁的函数写法，我们称作“箭头函数”
写法：函数名=(形参)=>{……} 当函数体中只有一个表达式时，{}和return可以省略，当函数体中形参只有一个时，()可以省略。
特点：箭头函数中的this始终指向箭头函数定义时外层函数作用域 this的值
-
对象的扩展
属性的简写。当key和value变量名同名时, 可以只写key(运行时, 这个key既当做键也当做值来调用), 当值是个函数体时, 可以省略:和funciton
-
解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值（Destructuring）
- 数组的解构赋值
数组中的值会自动被解析到对应接收该值的变量中，数组的解构赋值要一一对应 如果有对应不上的就是undefined
- 对象的解构赋值
对象的key对应上以后, 把右侧的 value值, 赋予给=左边的key所对应的变量上即可
- set数据结构
set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数
应用：数组去重
-
class
class类的继承ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念, 更加专业化, 写法更加简便
-
…
展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
var、let、const之间的区别（必会）
let 和 const 是块级作用域, 不会挂载到window上, 没有变量提升, 同一个作用域下不能重复声明
var 是函数级作用域
const必须有初始值, 之后无法重新赋予
使用箭头函数应注意什么/箭头函数和普通函数的区别（必会）
用了箭头函数，this指向要看定义箭头函数外层函数作用域 this的值是谁
不能够使用arguments对象
不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能（必会）
基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定
在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)就能解决
介绍下 Set、Map的区别（必会）
应用场景Set用于数据重组，Map用于数据储存
Set：
成员不能重复
只有值没有键名，类似数组
可以遍历，方法有add, delete,has
Map:
本质上是健值对的集合，类似集合, 键可以是任意类型
可以遍历，可以跟各种数据格式转换
下面Set结构，打印出的size值是多少（高薪常问）
let s = new Set();
s.add([1]);s.add([1]);
console.log(s.size);
/两个数组[1]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值都能存储到Set结构中，所以size为2/
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！