ES6新增语法
【逆战班】
let 定义变量
特点：1.let 定义的变量,不会进行预解析。
2.let 不能重复定义变量名称,一个变量名称只能定义一次。
3.let声明的变量只有在当前作用域有效。
4.一般使用 const 定义 基本数据类型
const 定义变量
在JavaScript中往往,管const定义的变量,称为常量。
特点：1.const定义的变量,必须赋值，且不能被重复赋值,数据一经定义,不能更改。
2.const定义的变量名称,也不能重复。
3.const声明的变量只有在当前作用域有效。。
4.一般使用 const 定义 引用数据类型。
箭头函数
所谓的箭头函数，是函数的另一种语法形式
const fun = function(){} 普通函数
const fun = ()=>{} 箭头函数
将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式
const oDiv = document.querySelector('div');
// 普通函数
oDiv.addEventListener('click' , function(){
console.log(123)
})
// 箭头函数
oDiv.addEventListener('click' , ()=>{
console.log(123);
})
如果函数只有一个参数,可以不写()
const fun = function(e){} 普通函数
const fun = e => {} 箭头函数
// 只有一个参数，可以不写(),直接定义一个参数 oDiv.addEventListener('click' , e=>{ console.log(e); })
特点：在箭头函数中的this指向是父级程序的this指向，如果父级程序有this指向,那么箭头函数指向的就是父级程序的this，如果父级程序没有this指向,那么指向的就是window
数组的解构语法
就是数组的另一种使用调用方法，可以不通过 []语法,不通过索引下标,来调用使用数组中的数据，用于将数组中的数据,一一对应的赋值给变量
const arr = ['北京','上海','广州','重庆','天津']; // 将 arr 中的数据,调用出来,给 左侧内容进行一一对应的赋值 let [str1,str2,str3,str4,str5] = arr; console.log(str1,str2,str3,str4,str5); // 结构多层的数组 // 二维数组 const arr2 = ['北京','上海',['a','b','c']]; let [s1,s2,[s3,s4,s5]] = arr2 console.log(s1,s2,s3,s4,s5);
对象的解构语法
之前对象数据的调用,通过.语法或者[]语法,配合属性来调用操作数据，ES6中可以使用解构语法来调用操作数据
const obj = { name:'张三', age:18, sex:'男', addr:'北京', phone:123456, } // 将对象中,属性是name的属性值,调用,赋值给name变量名称 // {}中定义的属性,一定是对象中具有的属性 // 变量名称,就是name也就是属性名称 let {name} = obj; console.log(name); // 解构语法之定义其他名称 // 在对象obj中,找name属性,将对应的数值数据,赋值给变量别名userName // 通过userName来调用使用数据 // 只能一次解构一个数据,不能一次性的做一一对应的赋值 let {phone:userName} = obj; console.log(userName); // 多级对象的解构 const obj2 = { name1:{ name2:'张三' } } let {name1 : {name2}} = obj2; // 只有name2解构对应张三,name1没有内容 console.log(name1); // 如果只是 let {name1} = obj2 // name1存储的是 对象 {name2:'张三'}
展开运算符
…数组
将数组中的数据,展开来使用，在函数的实参中使用
// 有多个形参 function fun(num1,num2,num3,num4,num5){ console.log(num1,num2,num3,num4,num5) } // 执行时就要输入多个实参 fun(100,200,300,400,500); // 现在有一个数组,存储多个数据 const arr = [1,2,3,4,5]; fun(arr[0],arr[1],arr[2],arr[3],arr[4]); // 展开运算符,将数组中的数据展开使用 // 将arr中的数据,展开,对形参进行一一对应的赋值 // 通过数组,给多个形参赋值更简单 fun(...arr);
合并运算符
在ES6中也是用（…）来表示合并运算符，在函数的形参中使用,作用:将赋值的所有的实参,都是以数组的形式,存储在形参中
// 合并运算符 // 不管实参有几个,都以数组的形式,存储在形参中 function fun1(...arr){ console.log(arr); // 调用存储在形参arr中的实参,必须用过[]语法,索引下标 // 或者 循环遍历 获取 } // 输入的所有的实参,都会以数组的数据的形式,存储在形参arr中 fun1('a','b','c','d','e',1,2,3,4,5); // 在 普通函数中,JavaScript定义了一个专门的变量,叫 arguments // 如果你没有定义形参,所有的实参都会以数组的形式存储在这个变量中 // 作用于合并运算符相同 // 但是 箭头函数中 没有 arguments 这个变量 // 必须使用 ...形参 合并运算符的形式 来存储实参 // 没有形参,JavaScript自动在arguments中,以数组的形式存储实参 function fun2(){ console.log(arguments); } Fun2(1,2,3,4,5,6,7);
class类
ES6中,新增语法形式 class 类，是一种新的定义构造函数的语法，作用和原理与ES5语法完全相同，只是语法格式和书写方式不同。简而言之ES5用function定义类，ES6用class定义类，class的本质是function，ES6中的类只是语法，它并没有改变ES5下类实现的本质。
ES5和ES6语法对比：
// ES5语法 function Fun1(name,age){ this.name = name; this.age = age; } Fun1.prototype.f1 = function(){ console.log(this.name , this.age); } // ES6语法 class class Fun2{ constructor(name,age){ this.name = name; this.age = age; } f2(){ console.log(this.name , this.age); } } const obj1 = new Fun1('张三',18); const obj2 = new Fun2('李四',20); console.log(obj1); console.log(obj2);