ECMAScript6新特性及ES5对比整理

这里整理ES6新特性以及跟ES5的对比用法

1.const 常量定义

const URL="https://zhangxuefei.site";

定义的常量不能被直接赋值修改,但是如果a=URL,那么a的值是可以修改的,如果PI是一个引用类型,那么对a的修改也会影响到URL

ES5定义如下:

Object.defineProperty(typeof global==="object"?global:window,"URL",{
 value:"https://zhangxuefei.site",
 enumerable:true,
 writable:false, //不能赋值
 configurable:false //不能delete
 });

 URL=2;
 console.log(URL);//https://zhangxuefei.site

 

2.let 定义块级作用域{}变量

javascript变量的作用域基本是通过function来确定,let让变量的作用域通过{}来确定

var cbs=[];
 for(let i=0;i<5;i++){
 cbs[i]=function(){return i;}
 }
 console.log(cbs[1]());//1

ES5写法

var cbs = [];
 for (var i = 0; i < 5; i++) {
 (function(i) {
 cbs[i] = function() {
 return i;
 }
 })(i);
 }
 console.log(cbs[2]()); //2

 

3.箭头函数()=>{}/()=>expression

1)箭头函数具有更简洁的函数定义语法,区别在于不会绑定this,arguments等

var addrs = [1, 2, 3, 4, 5];
var lens = addrs.map((item) => {
      return item * 2
   });
console.log(lens);//[2, 4, 6, 8, 10]
/*等效于*/
var addrs = [1, 2, 3, 4, 5];
var lens = addrs.map(item => item*2);
console.log(lens);//[2, 4, 6, 8, 10]

ES5:

 var addrs = [1, 2, 3, 4, 5];
 var lens = addrs.map(function(item){
 return item*2;
 });
 console.log(lens);//[2, 4, 6, 8, 10]

 

2)不绑定this,而是使用上层的this对象

例如有这样一段:

function Person() { 
 this.age=0;
 setInterval(function growUp() {
 this.age++;
 }, 1000);
 }

 var p=new Person();//Person {age: 0}

原因在于setInterval里面的this对象不是指向Person而是一个新的this

修复bug:

function Person() { 
 this.age=0;
 var that=this;
 setInterval(function growUp() {
 that.age++;
 }, 1000);
 }

 var p=new Person();

 

使用箭头函数更为简洁

function Person() { 
 this.age=0;
 setInterval(()=>this.age++, 1000);
 }

 var p=new Person();

3)箭头函数不能作为构造函数进行new,也不具有原型prototype

var Foo=()=>{};
var foo=new Foo();//TypeError: Foo is not a constructor
Foo.prototype;//undefined

 

4.函数参数默认值

function Foo(x,y=1,z=1){
 return x+y+z;
 }
 Foo(1);//3

注意参数的顺序,给一个参数默认就是x参数

 

5.(…)

1)聚合参数

function Foo(x,y,...a){
 console.log(Array.isArray(a));//true
 return x+y+a[2];
 }
 console.log(Foo("h","e","l","l","r"));//her

2)扩展运算

 var arr1=["hello","world"];
 var arr2=[1,2,...arr1];//[1, 2, "hello", "world"]

 var str="hello";
 var arrStr=[...str];//["h", "e", "l", "l", "o"]

 

6.模板“ ${}

 var obj={name:"无忌",age:29,high:183}
 var str=`我是:${obj.name},今年${obj.age}岁,身高${obj.high}cm`;
 console.log(str);//我是:无忌,今年29岁,身高183cm

 

7.Unicode字符和正则u

"𠮷".length === 2 
"𠮷".match(/./u)[0].length === 2

 

8.对象属性定义简写

var x=1,y=1;
 var obj={x,y};//等效于{x:1,y:1}
 var obj2={
 foo(a,b){},
 bar(a,b){}
 }
 //等效
 obj2={foo:function(a,b){},bar:function(a,b){}}

 

9.模块(export,import)

目前在浏览器里面没有被支持,主要思想是单个的js文件构成一个模块,使用export关键字暴露模块,使用import来引入模块

//mymodule.js
function Add(x,y){
 return x+y;
}
var a=1;
export {Add,a};

//app.js
import {Add,a} from "mymodule";
console.log(Add(1,2),a);

 

10.类

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(length) {
    super(length, length);
    this.name = 'Square';
  }
}

11.新增类型和方法
Map,Set,TypedArray,Object.assign,find,findIndex,repeat,startsWith,endsWith,includes,Number.isNaN,Number.isFinit,Number.isSafeInteger,Math.trunc,Math.sign

 

12.Promise(异步计算)
Promise 对象是一个代理对象(代理一个值),被代理的值在Promise对象创建时可能是未知的。它允许你为异步代码执行结果的成功和失败分别绑定相应的处理方法(handlers )

/*加载图片示例*/
function loadImg(url){
 return new Promise(function(resolve,reject){
 var request=new XMLHttpRequest();
 request.open('GET',url);
 request.responseType='blob';
 request.onload=function(){
 if(request.status===200){
 resolve(request.response);
 }else{
 reject(Error("Image load failed;error code:"+request.statusText));
 }
 };
 request.onerror=function(){
 reject(Error('There was a network error'));
 };
 request.send();
 });
 }

 var image=new Image();
 loadImg('url').then(function(response){
 var imageURL=window.URL.createObjectURL(response);
 image.src=imageURL;
 document.body.appendChild(image);
 },function(Error){
 console.log(Error);
 });

 

13.本地与国际化(数字,货币,日期格式化)

/*数字*/
var l10nEN = new Intl.NumberFormat("en-US");
var l10nDE = new Intl.NumberFormat("de-DE");
l10nEN.format(1234567.89) === "1,234,567.89";
l10nDE.format(1234567.89) === "1.234.567,89"

/*货币*/
var l10nUSD = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
var l10nGBP = new Intl.NumberFormat("en-GB", { style: "currency", currency: "GBP" });
var l10nEUR = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });
l10nUSD.format(100200300.40) === "$100,200,300.40";
l10nGBP.format(100200300.40) === "£100,200,300.40";
l10nEUR.format(100200300.40) === "100.200.300,40 €";

/*日期*/
var l10nEN = new Intl.DateTimeFormat("en-US");
var l10nDE = new Intl.DateTimeFormat("de-DE");
l10nEN.format(new Date("2015-01-02")) === "1/2/2015";
l10nDE.format(new Date("2015-01-02")) === "2.1.2015";

 

javascript
作者:张雪飞
出处:https://zhangxuefei.site/p/1877
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注