【逆战班】
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);
原文地址：https://www.cnblogs.com/icy-shower/p/12731089.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
