ES6新增:模板字符串、解构、set&&map、from、promise、default、类、reset

javascript正在向强类型进化。

模板字符串

var html = "
"+ "

"+ "

"+ ""+ ""+ "
" console.log(html); let name = "zhar"; var str = `

$(name)

abc def `; console.log(str);

解构

  • 对象定义可以直接使用已有的变量。如果使用了没有定义的变量,则会抛出异常。这就是es6的解构,可以直接使用已有变量。
var name = "zhar";

var obj = {
    name : name
}

console.log(obj);

let age = 30;

let obj2 = {name,age};
console.log(obj2);

以上代码输出:
{ name: 'zhar' }
{ name: 'zhar', age: 30 }

let obj3 = {n,age};
console.log(obj3);

抛出:ReferenceError: n is not defined

  • 变量与对象定义可以混用
let obj4 = {nn:"2n",n,age};
console.log(obj4)
  • 可以使用这种方法直接声明变量
let obj5 = {name:"zhar",age:30}
let{name,age} = obj5;
console.log(name,age);
  • 可以在参数中使用
let obj5 = {name:"zhar",age:30}
let{name,age} = obj5;
console.log(name,age);
function fun({name,age,address}){
    console.log(name,age,address)
}
fun(obj5)

数组同样可以解构。

let obj = {
    name: "zhar",
    age:30
}
let{name,age} = obj;
let a = 10;
let b = 20;
let obj2 = {a,b};
let arr = [1,2,3];
let [d,e,f] = arr;
console.log(d,e,f);
let [g,[[h],i]] = [1,[[2],3]];
console.log(g,h,i)
let [j,,k] = [1,2,3];
console.log(j,k);

Set与map

set

set与Array类似,无重复元素,无length属性

构建方法

(1) let s = new Set([2,3,3,4,4,5]);
(2) let s2 = new Set();
s2.add(1);
add() 向集合添加元素,自动去掉重复元素
delete() 删除指定的元素
has() 判断集合是否包含指定元素
size() 得到集合的长度,去掉重复元素后的长度
clear() 清空集合

map

map集合类似于object,键值对。
map可以使用任意类型做键,哪怕是函数、对象。

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

let s2 = new Set();
    s2.add(1);
    s2.add(1);
    s2.add(2);
    s2.add(2);
console.log(s2,s2.size);
console.log(s2.has(1),s2.has(3));
s2.delete(1);
console.log(s2);
s2.clear();
// console.log(s2);

console.log(s.keys());
console.log(s.values());
console.log(s.entries());

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

let a = 10;
m.set(a,"abc");
console.log(m)

数组的扩展

Array.from()

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

promise

var promise = new Promise(function(resolve,reject){
    if(!true){//表示异步操作成功
        resolve();
    }else{
        reject();
    }
});
promise.then(function(){
    console.log("成功")
},function(){
    console.log("失败")
});

Promise.all([promise1,promise2,...])全部异步函数执行完成后调用resolve
以最慢者为准。
Promise.race([promise1,promise2,...])竞赛模式,以最快者为准,只返回最快的异步结果

function sync1(){
   return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(5>4){
                resolve("bigger");
            }else{
                reject("smaller");
            }
        },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((res)=>{
    console.log(res);
    sync2();
   return sync2(res);
 },function(err){
    console.log(err);
 }).then(function(r2){
    console.log(r2)
    return sync3();
 }).then(function(rq3){
     console.log(rq3);
     return "abc";
 }).then(function(r4){
    console.log(r4);
     return "def";
 }).then(function(r5){
     console.log(r5);
 }).catch(function(){
     console.log("异常")
 });

默认值

function bar(a=0){
在参数里面让形参等于一个值,就相当于给它默认值。
    return a/5;
}
console.log(bar());
console.log(bar(10));

之前es5的继承:

function Person(){
    this.name = "abc";
}
Person.prototype.say = function(){
    console.log(this.name);
}
function student(){
    this.name = "x";
    Person.call(this);
}
student.prototype = new Person();

es6:

class Person{
    constructor(){
        this.age = 30;
        this.name = "jack";
    }
    say(name){
        console.log("你好:"+name + this.age);
    }
    say1(){

    }
}
class Student extends Person{
    constructor(age){
        super();
        this.age = age;
    }
}

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

在es6中继承的子类没有作用域环境,必须使用super()来继承父类的this环境,如果没有super(),会报如下错误:
ReferenceError: this is not defined

reset

使用“...”代表剩余参数

function fun(...a){
    console.log(a)
}
fun(2,3,4,5,55,8,7,9);

你可能感兴趣的:(ES6新增:模板字符串、解构、set&&map、from、promise、default、类、reset)