JavaScript-ES6

ES6

定义变量

var定义的变量，属于window的属性，直接输出变量名其实是一种简写，完整写法window.变量名

var a = 10；
console.log (window)

在对象window中会多出一个a属性，值为10。

let关键字

let不允许重复定义变量
let定义的变量时没有预解析的
let定义的变量不会出现在window对象中作为属性
let会自己创建一个块级作用域，将自己的作用域限制在大括号中。
```
for(let i=0;i<3;i++){
    
}
console.log(i)
```
[图片上传失败...(image-69b955-1648816126148)]

const关键字

const定义的值不允许被修改
const在声明的时候必须给它赋值

箭头函数

箭头函数的语法

let fn = ()=>{console.log(1)}

带参数时的语法

let fn = (a,b)=>{console.log(a+b)}

如果箭头函数只有一个形参，或只有一行代码，则可以省略小括号或者大括号，省略大括号后箭头函数会把这行代码作为返回值返回（且这行中不能带有return）

let fn = a = > a+1;

函数默认值

es6允许函数中的参数可以定义默认值：

function add(a,b=2){
    return a + b;
}
console.log(add(5));

同理于箭头函数：

let add = (a,b=2) => a+b;
console.log(add(5));

模板字符串

es6新增了定义字符串的方式，使用反引号

可以换行书写，保持字符串中的换行和空格
模板字符串中可以识别变量，使用美元符大括号：${变量}

解构赋值

解析一个数据结构并赋值，可以快速的从对象或数组中取出需要的内容，对象使用大括号，数组使用中括号

定义一个对象：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}

以前获取对象内容需要：

let name = obj.name;
let age = obj.age;

利用结构的方式获取：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let {name} = obj;
/*
表示从obj中获取name属性，并赋值给声明的name变量
*/

可以一次性解构多个变量，也可以在解构时将变量名改成别的变量名，例如：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let {name:username,age:a} = obj; // 将obj的name属性值赋值给username变量，age属性值赋值给变量a

多级解构：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
    wife:{
        name:"翠花",
        age:11,
    }
}
let {wife} = obj;
let {name} = wife;
// 写为一行
let {wife:{name:wname}} = obj;

解构数组

let arr = [1,2,3];
let [num1] = arr; // 从数组中拿出第一个元素赋值给num1变量

解构多维数组：

let arr = [1,2,3,[4,5,6]];
let [a,b,c,[aa,bb]] = arr;
console.log(aa,bb); // 4 5

上下文调用模式

也叫做借用模式，任何函数都可以调用call，apply，bind方法。

call

可以用来调用函数用函数名.call()来调用
可以指定调用函数的this指向，call的第一个参数用于改变函数内的this指向
call的参数可以有若干个，第一个参数用来改变函数内的this指向，其余的函数是作为调用函数的实参
如果call没有参数或第一个参数为null，那么函数中的this执行window

apply

apply的作用和call是一样的，区别只在于写法，apply只有两个参数，第二个参数是一个数组或者伪数组

function fn5(num1,num2){
    console.log(this);
    console.log(num1+num2);
}
var arr = [10,20];
fn5.apply(null,arr); // window  30

apply的特性： apply的平铺性：将数组的中每一项取出来，作为借用函数的实参

什么时候用什么方法（call、apply）

如果参数比较少的情况下，使用call比较方便
如果参数已经存放在数组中，使用apply

bind

语法：var fn2 = fn.bind(thisArg);

作用： bind会创建并返回一个新的函数，新的函数和借用的函数是一模一样的, 但是新函数内的this已经被改变成了bind的参数thisArg

function fn6(){
    console.log(this);
}
fn6(); // window
var arr = [1,2,3];
var fn7 = fn6.bind(arr);
fn7(); // Array(1,2,3)
console.log(fn6,fn7);

bind 是不会去调用fn函数的，不像call、apply会去调用函数。bind会创建并返回一个新的函数，和借用的函数是一模一样的，但是新函数内部的this变成了指定的对象

使用场景：经常用于将定时器的this（window）变成指定的对象：