ES6新属性

ES6为ECMA(European Computer Manufactures Association 欧洲计算机制造联合会) Script6的简写,推出于2015年。而ES5在IE8以下版本是不支持的,如trim()截取前后字符串的方法就不支持。

1、let

在ES6推出后,我们可以使用let声明一个变量,像var那样。不过两者也有不同之处。首先,let声明没有变量提升,并且变量不能重复声明:

console.log(a);
let a = "zhar";

let c = 10;
let c = 20;
console.log(c);

所以,上面两种情况都会报错。
let在for循环中声明的变量为局部变量,只存在于这个块级作用域中,循环之外不存在这个变量,所以可以用来避免了for循环那个经典的BUG:

for (let i = 0;i < 5;i++) {
    arr[i] = function () {
        console.log(i);
    }
}
//console.log(i);
arr[3]();

let声明的变量为块级变量(块级作用域),和外部声明的同名变量互不影响,称为暂时性死区

var e = 100;
function fun() {    
    let e;
    e = 200;    
    console.log(e);//200
}
fun();
console.log(e);//100

2、const

const为constant(常量)的缩写,用来声明一个常量。常量为一个固定值,如:PI,并且通常用全大写的字母来表示这是一个常量。一旦声明必须赋值,并不可更改,其它和let一致。如:

var PI = 3.14;

3、arrow箭头函数

函数的新写法
代码如下:

var fun = function() {
    return 10;
}
fun();

let foo = ()=>10;
console.log(foo());

let bar = (a,b)=>a*b;
console.log(bar(10,20));

let a = (a,b)=>{
    return a+b;
}
console.log(a(33,44));

function b (callback) {
    callback();
}
b(function () {
    console.log(1111);
})

b(()=>{console.log(222)});
  • 箭头函数能保留当前的作用域
  • 使用箭头函数声明的函数,其作用域为 声明时所在的位置(作用域);
  • 箭头函数没有自己的this,没有自己的作用域,作用域来自于所在的作用域
  • 不能使用new关键字
  • 不能使用arguments

我们可以利用这些属性,在函数里的定时器中使用函数中的this:
之前的写法为

let obj = {
    name : "zhar",
    say : function () {
        console.log(this.name);
        var _this = this;
        setTimeout(function () {
            console.log(_this.name);
        },0);       
    }
}
obj.say();

现在的写法

let obj = {
    name : "zhar",
    say : function () {
        console.log(this.name);
        var _this = this;
        setTimeout(()=>console.log(this.name),0);
    }
}
obj.say();

4、template模板字符串

我们可以使用template来方便的书写一个便签和字符串等。如:

let name = "zhar";
var str = `
    
${name}
abc def `; console.log(str);

5、object

为声明变量提供了更加方便的方法,直接上代码:

//var name = "zhar";

//var obj = {
//  name : name
//}
//
//console.log(obj);
//
////解构
//let age = 30;
//
//let obj2 = {name,age};
//
//console.log(obj2);
//
//let n = "nnn"
//let obj3 = {n,age};
//console.log(obj3);
//
//let obj4 = {nn:"2n",n,age}
//console.log(obj4);

//let obj5 = {name:"zhar",age:30};
////let{name,age} = obj5;
//let{name} = obj5;// === let name = obj5.name;
//console.log(name);


var obj6 = {name:"liu",age:30,address:"北京"}
function fun ({name,age,address}) {
    //var name = obj.name;var age = obj.name;var address = obj.address;
    console.log(name,age,address)
}
fun(obj6);

为对象添加某个之前声明了的属性,只需将属性名写在花括号里就可以啦

6、Set&Map

Set和Map分别用来声明一个数组和对象。
Set和Array类似,不过没有重复的元素,并且无length属性:

let s = new Set([2,2,3,3,4,4,5]);
console.log(s);

let s2 = new Set();
s2.add(1);

add() 添加元素
delete() 删除元素
has() 是否包含元素
size 得到集合长度
clear() 清空集合

Map用法和Set类似,并且以上方法也存在:

let m = new Map();
m.set("name","zhar");
console.log(m);
console.log(m.get("name"));

//Map  可以使用任意类型做键,哪怕时候函数对象都行
let a = 10;
m.set(a,"abc");
console.log(m);
//$("div").length;
//$("div").size;

7、Array.from() 方法

之前我们要将类数组(如:arguments,string,NodeList--querySelectAll选择的内容)转为数组需要用的方法为Array.prototype.slice.call(arguments);,而现在只需用**Array.from() **方法将arguments转为数组:

function fun () {   
    console.log(arguments); s   
    let a = Array.from(arguments);
    a.push("d");
    console.log(a);//[a,b,c,d]
    
    
}
fun("a","b","c");

let b = Array.from("hello");
console.log(b)//[h,e,l,l,0]

8、default默认参数

函数需要接收一个参数,而没有传参时需要给设置一个默认值时的方便写法。

之前的写法

function fun(a) {
    //a=a或0,不传参数为0
    a = a || 0;
    return a/5;
}
console.log(fun(3));
console.log(fun());

现在的写法

//参数默认值,不传参数时,执行等于0
function bar (a=0) {
    return a/5;
}
console.log(bar());
console.log(bar(10));

只需写成 a=0 即可

9、class声明构造函数

ES6中,声明到构造函数本身的属性只需声明在constructor中,而声明到原型上的属性直接写在花括号里即可,并且提供了继承的方法:

class Person{
    constructor () {
        this.age = 30;
        this.name1 = "jack";
    }
    say(name){//Person.prototype.say
        console.log("你好:"+name+this.age);
    }
    say1() {
        
    }
}
//var p = new Person();
//p.say("Tom");

//继承时,是没有this的,没有执行环境的,必须调用super()来继承父级的this
class Student extends Person {
    constructor (age) {     
        super();
        this.age = age;
    }
}

let s = new Student(300);
s.say("小明");

10、reset运算符

为了替换arguments而出现的方法。
可以使用... 来获取剩余参数,如:

function fun(d,e,...a) {
    //可以使用arguments接收
    console.log(d,e,a)
}
fun(1,2,3,4,5,6);

... 扩展运算符

let arr = [2,3,4,5];
let arr2 = [6,7,8]
console.log(...arr);//2 3 4 5

连接两个数组

let arr = [2,3,4,5];
let arr2 = [6,7,8];
//原生的写法
//console.log(arr.concat(arr2));
console.log([...arr,...arr2]);

扩展运算符将arguments转为数组

function foo (x,y,z) {  
    console.log([...arguments]);
}

11、Promise

在ES6中,使用Promise模块来模拟异步请求时,函数层层嵌套的情况:

//promise 承诺

//ES5
//function fun (callback) {
//  //用 setTimeout 替代一个异步执行的内容  ajax
//  //异步: 不可预估返回结果时间
//  setTimeout(function () {
//      console.log("异步--执行完成");
//      callback("异步--给你的结果");
//  },1000)
//}
////回调函数
//fun(function (res) {
//  console.log(res);
//});


//promise语法:
//let promise = new Promise(function (resolve,reject) {
//  if (true) {//异步操作成功
//      resolve();
//  }else {
//      reject();
//  }
//});
//
//promise.then(function () {
//  console.log("成功");
//},function () {
//  console.log("失败");
//});

function sync1 () {
    return new Promise(function (resolve,reject) {
        setTimeout(function () {
            if (5 > 4) {
                resolve("异步一: 大于");
            }else {
                reject("异步一: 小于");
            }
        },1000)
    })
}
function sync2 (result) {
    return new Promise (function (resolve,reject) {
        setTimeout(function () {
            if (true) {
                resolve("异步二: true");
            }else {
                reject("异步二: false");
            }
        },2000)
    })
}
function sync3 () {
    return new Promise (function (resolve,reject) {
        setTimeout(function () {
            if (true) {
                resolve("异步三: true");
            }else {
                reject("异步三: false");
            }
        },4000)
    })
}
//sync1().then(function (res) {
//  //console.log(abc);
//  console.log(res);
//  return sync2(res);
//},function (err) {
//  console.log(err);
//}).then(function (r2) {
//  //抛出错误
//  //throw new Error("错误啦!")
//  console.log(r2);
//  return sync3();
//}).catch(function () {
//  //e为错误信息
//  console.log("catch异常",e);
//}).then(function (r3) {
//  console.log(r3);
//  return "abc";
//}).then(function (r4) {
//  console.log(r4);
//  return "def"
//}).then(function (r5) {
//  console.log(r5);
//}).catch(function () {
//  console.log("异常");
//});

//Promise.all([promise1,promise2,promise3,...])  全部异步函数执行完成后调用  result
//以最慢者为准

//Promise.all([sync1(),sync2(),sync3()]).then(function (res) {
//  console.log(res);
//});

//Promise.race()  竞赛模式  以最快者为准   只返回最快的结果
Promise.race([sync1(),sync2(),sync3()]).then(function (res) {
    console.log(res);
});


//箭头函数的写法
//sync1().then((res) => sync2(res)).then((r2) =>console.log(r2));

//有错误时直接进入到catch块,后面代码还会执行
//try{
//  
//}catch(e){
//  //TODO handle the exception
//}

你可能感兴趣的:(ES6新属性)