常量声明对比
//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
网友评论