ES6
ES6概述：
1.ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版
2.虽然15年就有正式版本了，但是国内普遍商用是在2018年之后去了，甚至到现在有很多前端仍然搞不懂ES6（都2021年了，兄dei~）
3.ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念
4.目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6
5.ES6提供了大量的语法糖，让你写代码的时候简直不要太爽！
6.你必须要知道的是：现在各企业都普遍使用，不会ES6意味着你很难找到工作，上班了你连别人的代码都看不懂。
所以，简而言之，ES6非常重要，非学不可！
1.let与const
1.1 let 与 var
- let：ES6新增，用于声明变量，有块级作用域
- var：ES5中用于声明变量的关键字，存在各种问题（例如：红杏出墙~）
- 如果你的代码里还存在 var，那你的良心就大大的坏了！
var存在的问题：
// 1.声明提升
// 此处会正常打印，但这是错误的，不符合逻辑顺序
console.log(name);
var name = "大帅比";
// 2. 变量覆盖
var demo = "小明";
var demo = "小红";
// 此处会打印小红，这也是错误的（属于套牌车，违法的啊，兄弟）
// 同一个项目中，发生变量覆盖可能会导致数据丢失以及各种不可预知的bug，原则上来说：变量不能重名
console.log(demo)
// 3. 没有块级作用域
function fn2(){
for(var i = 0; i < 5; i++){
// do something
}
// 此处会正常打印出 i 的值，这是错误的
// i是定义在循环体之内的，只能在循环体内打印，当前现象叫做红杏出墙！！！
console.log(i);
}
fn2();
let不会存在上述问题：
// 1. 不会存在声明提前
// 此处会报错（这里必须报错，原则上来说不能先上车后买票）
console.log(name);
let name = "大帅比";
// 2. 不会有变量覆盖
let demo = "小明";
let demo = "小红";
// 此处会报错（不能使用套牌车！）告诉你已经定义了此变量。避免了项目中存在变量覆盖的问题
console.log(demo)
// 3. 有块级作用域
function fn2(){
for(let i = 0; i < 5; i++){
// do something
}
// 此处会报错，无法打印，防止红杏出墙！！！
// i是定义在循环体之内的，循环体外当然无法打印
console.log(i);
}
fn2();
1.2const
1.const 声明一个只读的常量，一旦声明，常量的值就不能改变
2.一般用于全局变量
3.通常变量名全部大写（请按照规则来，不要乱搞，容易出事情）
4.具有块级作用域
5.对数组和对象的修改，不算做对常量的修改。
例： const ABC=['1','2','3']; ABC.push('4');
2.解构赋值
- 解构赋值是对赋值运算符的扩展
- 针对数组或者对象进行模式匹配，然后对其中的变量进行赋值，相当于提取对象中的特定值。
- 代码简洁且易读，语义更加清晰明了，方便了复杂对象中数据字段获取（简而言之：用起来很爽！）
2.1 用在数组上
let [a, b, c] = [1, 2, 3];
// a = 1，b = 2，c = 3 相当于重新定义了变量a,b,c，取值也更加方便
// , = 占位符
let arr = ["小明", "小花", "小鱼", "小猪"];
let [,,one] = arr; // 这里会只取到小鱼，提取arr中的one
// 解构整个数组
let strArr = [...arr];
// 得到整个数组
console.log(strArr);
2.2用在对象上
let obj = {
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模板字符串
1.可以直接使用换行,不用拼接
2.引用使用${}
let str1 = "穿堂而过的";
let str2 = "风";
//引用使用${}
let newStr = `我是${str1}${str2}`;
// 我是穿堂而过的风
console.log(newStr)
// 字符串中调用方法
function fn3(){
return "帅的不行！";
}
let string2= `我真是${fn3 ()}`;
console.log(string2); // 我真是帅的不行！
4.扩展运算符（...）
...的作用是将后面的对象进行分割，对象可以是数组。
扩展运算符使用于实参!而后面提到的rest参数的...使用于形参！
具体的应用大概有三个场景：
5.对象，函数等
5.1 简化对象写法
允许{ }大括号里面，直接写入变量和函数，可以引用括号外的变量和函数，作为新对象的属性和方法，
实例：
<script> let name = '陈家斌'; let change = function(){ console.log("hello！"); } const SCHOOL = { name,//是引用了name这个let变量 change,//引用了change方法 improve(){//这种写法是写一个方法的简易写法 console.log("nihao!"); } }
</script>
5.2箭头函数
- 箭头函数是一种更加简洁的函数书写方式
- 箭头函数本身没有作用域（无this）
- 箭头函数的this指向声明者，上下文决定其this
- 基本语法：参数 => 函数体
a. 基本用法
//当参数只有一个时，可以省略(),当执行语句只有一条时，可以省略{}，且省略{}的同时必须省略return关键字
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.不能使用arguments变量
let fn = () =>{//下列语句会报错
console.log(arguments);
}
e.箭头函数的实践以及适用范围
案例一：不需要额外保存this的值
案例二：简洁代码
总结：箭头函数适合与this无关的回调函数，定时器，数组的方法回调。
5.3参数的默认值
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
值得注意的是，不定参数使用的是rest参数，是用来代替arguments的，详情请看下方：
3.默认参数与解构赋值相结合
不使用解构化之前：
使用解构化之后：
注意观察上述两者的区别，前者需要手动拿出对象中的成员，后者会自动完成参数的一一对应，可以直接拿出！
更新中，也可能不更了。。。
浙公网安备 33010602011771号