ES5与ES6部分对比

常量声明对比

//ES5中常量的写法
Object.defineProperty(window,"pt",{
  value:3.1415926,
  writable:false
})
console.log(window.pt) //3.1415926
window.pt = 4
console.log(window.pt) //3.1415926
//ES6 的常量写法
const pt = 3.1415926
console.log(pt) //3.1415926
pt = 4 //报错Uncaught TypeError: Assignment to constant variable.
常量只读不能再赋值和修改

作用域对比

//ES5
const arr = [];
for(var i = 0;i<3;i++) {
  arr[i] = function(){
    return i*2;
  }
}
console.table({
   arr[0];//6
   arr[1];//6
   arr[2];//6
})
//此时function那里形成了闭包,var 会变量提升到全局,function里面的i变量就会一级一级的往上找直到在全局找到i变量的值,这时候i的值是3。
//ES6
const arr = [];
for(let i = 0;i<3;i++) {
  arr[i] = function(){
    return i*2;
  }
}
console.table({
   arr[0];//0
   arr[1];//2
   arr[2];//4
})
//let声明的变量是存在块作用域里,function的闭包作用域也是在块作用域里面,一次循环产生一个新的闭包作用域。
块作用域对比
//ES5中在同一个函数作用域下是用立即执行函数来分离作用域,保证变量不被污染
(function(){
   const a = function(){return 1}
   console.log(a()) //1
  (function(){
    const a = function(){return 2}
    console.log(a()) //2 不会报错
  }())
}())

//ES6中利用块作用域直接做到分离作用域保证不被污染
{
  function a(){return 1}
  console.log(a());//1
  {
      function a(){return 2}
      console.log(a()); //2
    }
  console.log(a());//1
}

箭头函数

//ES5中函数的写法
var evens = [1,2,3,4,5];
var adds = events.map(function(v){return v+1});
console.log(adds)//[2,3,4,5,6]

//ES6中函数的写法
let events = [1,2,3,4,5];
let adds = events.map(v => v+1);
console.log(adds)//[2,3,4,5,6]
// () => {} 这是es6中箭头函数的写法,()里面是写函数参数的,如果参数只有一个可以省略(),{}里面是写函数内容的,如果函数体里只是一个返回值那么也可以省略{}

箭头函数会改变this的指向

//ES5
var Fun = function(){
  this.a = 'a';
  this.b = 'b';
  this.c = {
    a:'a+',
    b:function(){return this.a}
  }
}
console.log(new Fun().c.b())// 'a+' ES5中this的指向是谁调用就指向谁。

//ES6
var Fun = function(){
  this.a = 'a';
  this.b = 'b';
  this.c = {
    a:'a+',
    b:() => {return this.a}
  }
}
console.log(new Fun().c.b())// 'a' 箭头函数体内的this的指向,是定义时this指向的值。

默认参数

//ES5
function fun(x,y){
  x = x || 7;
  y = y || 5;
  return x+y;
}
console.log(fun()); //12
console.log(fun(4,5)); //9

//ES6
function fun(x=7,y=5){return x+y;}
console.log(fun());//12
console.log(fun(2,3)); //5
//默认参数必填写法
function checkParameter(){
  throw new Error('can`t be empty');
}
function fun(x = checkParameter();y = 7 ){
  return x+y;
}
console.log(1)//8
try{
  fun();
}catch(e){
  console.log(e);
} //如果fun()参数为空就会抛出错误,因为x参数的默认值为一个函数。这样子的写法就是来判断是否传参。

可变参数

就是在不确定传参个数有多少的操作,比如n个数求和。

//ES5 可变参数是利用arguments来处理的
function fun(){
  var arr = Array.prototype.slice.call(arguments);
  var sum = 0;
  arr.forEach(function(item){
    sum += item*1;
  })
  return sum;
}
console.log(1,2,3)//6

//ES6
function fun(...a){ //这里就相当于参数为一个名为a的数组了
  let sum = 0;
  a.forEach(function(item){
    sum += item*1;
  })
  return sum;
}
console.log(1,2,3)//6

合并数组

//ES5 合并数组
var arr1 = ['a',true,5];
var arr2 = [1,2,3].concat(arr1);
console.log(arr2)//[1,2,3,'a',true,5]

//ES6 利用扩展运算符合并数组
let arr1 = ['a',true,5];
let arr2 = [1,2,3,...arr1];
console.log(arr2);//[1,2,3,'a',true,5]

proxy对象代理

//ES3中的数据保护(私有属性)
var Person = function(){
  var data={ //这里的数据就是这个构造函数私有属性,外面是访问不到的也不可以修改的,但是可以给设置公有操作函数来操作保护的属性
    name:"es3",
    sec:"male",
    age:"15"
  }
  this.get = function(key){//读取属性
    return data[key];
   }
  this.set = function(key,value){ //修改属性,可以设置某些可修改操作某些不可以修改操作
    if(key !== 'sex'){
      data[key] = value;
    }
  }
}
//声明一个实例
var person = new Preson();
//读取
console.table({name:preson.get('name'),sex:preson.get('sex'),age:preson.get('age')})//name:es3,sex:male,age:15
//修改
person.set('name','es5');
console.log(preson.get('name'))//es5 修改性别是不会有改变的

//  ES5 中还可以利用对象的一个方法来保护属性不被改写
var preson = {
  name:'es5',
  age:'15'
};
Object.defineProperty(preson,'sex',{
  writable:false,
  value:'male'
})
//ES6用proxy对象代理来实现数据保护(原理就是通过中间层代理的操作)
let Preson = {
  name:'es6',
  age:15,
  sex:'male'
}
let preson = new proxy(Person,{
  get(target,key){return traget[key]},
  set(target,key,value){
    if(key !== 'sex'){
      target[key] = value;
    }
  }
})
console.table({
  name:preson.name,
  sex:preson.sex,
  age:preson.age
})//es6,male,15
preson.name = 'es66'
console.log(preson.name)//es66

你可能感兴趣的:(ES5与ES6部分对比)