JS之ES5、ES6区别

ES5、ES6区别

定义变量

• ES5定义变量用"var"关键字
• ES6定义变量使用"let"关键字，也可以使用"const"定义常量

“var"与"let”、"const"的区别

• "var"可以声明重复的变量
• "let"和"const"声明的变量或常量不能重复声明

//"var"可以声明重复的变量
var num =100;
var num =200;
console.log(num);//=200

//"let"声明的变量不能重复声明
let n =100;
let n =200;//运行会直接报错

//"const"声明的变量不能重复声明
const m =100;
const m =200;//运行会直接报错

• "var"声明的变量会进行预解析（可以在声明之前调用，只不过拿到的是undefined）
• "let"和"const"声明的变量或常量不会进行预解析（声明之前不能调用）

//"var"声明的变量会进行预解析（可以在声明之前调用，只不过拿到的是undefined）
console.log(value1);//=undefined
var value1=100;
console.log(value1);//=100

//"let"声明的变量不会进行预解析（声明之前不能调用）
console.log(value2);//=直接报错
let value2 =100;
console.log(value2);//如果没有第一次输出，则能输出正确结果为 100

//"const"声明的常量不会进行预解析（声明之前不能调用）
console.log(value3);//=直接报错
const value3 =100;
console.log(value3);//如果没有第一次输出，则能输出正确结果为 100

• "var"只被“函数”限定作用域
• “let"和"const” 可以被任何一个可以书写代码的“{}”限制使用范围

//"var"只被“函数”限定作用域
function fun1(){
var num =100;
console.log(num);//=100
}
fun1();
console.log(num);//直接报错，因为num是函数内部的局部变量
if(true){
var num1=100;
console.log(num1);//=100
}
console.log(num1);//=100(只被“函数”限定作用域,不被大括号限定)

//"let"和"const" 可以被任何一个可以书写代码的“{}”限制使用范围
function fun2(){
let num2 =100;
const num3 = 100;
console.log(num2);//=100
console.log(num3);//=100
}
fun2();
console.log(num2);//直接报错，因为num是函数内部的局部变量
console.log(num3);//直接报错，因为num是函数内部的局部变量
if(true){
let num4=100;
const num5=100;
console.log(num4);//=100
console.log(num5);//=100
}
console.log(num4);//直接报错，因为num是{}内部的局部变量
console.log(num5);//直接报错，因为num是{}内部的局部变量

"let"与"const"的区别

• “let” 可以在声明的时候不进行赋值
• “const” 在声明的时候必须赋值
• “let” 声明的变量可以重新赋值
• “const” 声明的常量不可以更改（如果是引用类型，不可以修改引用地址，但可以修改地址内的数据）

ES6的箭头函数

是一种对函数表达式的简写（也就是我们说的赋值式函数），对声明式函数没有作用

• 函数表达式

//自执行函数里面
(function(){})();
//赋值式函数
let fn = function(){}
//对象中的方法
const obj = {fun:function(){}}
//定时器处理函数
setTimeout(function(){});
//ES5中的一些数组方法
forEach(function(){});
//事件处理函数
addEventListener("click",function(){});

//我们的函数表达式一般都是匿名函数，匿名函数都可以使用箭头函数来简写

• 箭头函数的语法
  • 没有了“function”关键字
  • ()=>{}

     let fn=()=>{
         console.log("我是fn函数");
     }
     fn();//=我是fn函数
  

  箭头函数的特性

  1. 箭头函数没有“this”
     • 箭头函数的this就是上下文（context）,就是箭头函数外部作用域的this
  2. 箭头函数不受 call/apply/bind的影响
     • 箭头函数的this在定义的时候就已经决定好了，不能更改
  3. 箭头函数内部没有arguments
     • 箭头函数内部没有这个天生的变量

const fn = function fun(){
console.log(arguments); 
}
const fn1 = ()=>{
console.log(arguments); 
}
console.log(fn(1,2,3,4));//= [1，2，3，4]
console.log(fn1(1,2,3,4));//直接报错

4. 箭头函数传递参数的时候
   • 如果只有一个形参，可以不写小括号
   • 如果没有形参，或者两个及以上形参，必须写小括号

const fn1 = a=>{
console.log(a); 
}
const fn2 = (a,b)=>{
console.log(a+b); 
}
const fn3 = ()=>{
console.log("没有参数"); 
}
console.log(fn1(1));//= 1
console.log(fn2(1,2));//=3
console.log(fn3());//=没有参数

5. 箭头函数的函数体
   • 如果只有一句话，可以省略大括号，否则必须写大括号
   • 当省略大括号的时候，函数会自动return

const fn1 = a=>a+100; 
const fn2 = (a)=>{
return a+100; 
}
console.log(fn1(1));//= 101
console.log(fn2(1));//=101