欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

es6基础知识

程序员文章站 2022-07-26 07:53:32
1.超引用:(...) 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 2.解构赋值: 赋值: 解构: 3. for of循环: es5的for循环: for in 循环: for of 循环:(不能用来遍历json) 4.Map对象 map对象是因为for of 的出现才出现的,一个map ......

1.超引用:(...)

  用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中

 

function fun(...args){
            console.log(args);     //[1,2,3,4,5,6]
            args.push(7);
            console.log(args);   //[1,2,3,4,5,6,7]
        }
fun(1,2,3,4,5,6)

 

 

2.解构赋值:

  赋值:

 var a = 10,b = 20,c = 30;
 console.log(a,b,c)        //10 20 30

 

  解构:

//数组的格式
        var [a,b,c] = [40,20,30];
        console.log(a,b,c)      //40 20 30

//json格式
        var {a,b,c} = {a:10,c:30,b:20};    //可以调换顺序
        console.log(a,b,c);          //10 20 30

        var [a,[b,c],d] = [5,[10,20],30];  //格式对应即可
        console.log(a,b,c,d)          //5 10 20 30

//混用
        var [{a,b},c,[d,e],f] = [{b : "jack",a : "100"},5,[10,20],30];
        console.log(a,b,c,d,e,f)        //100 jack 5 10 20 30

 

3. for of循环:

  es5的for循环:

var arr = ["red","green","blue","yellow","black"];
        for(var i = 0;i < arr.length;i++){
            console.log(arr[i]);          //
}

es6基础知识es6基础知识

 

  for in 循环:

for(var i in arr){
            console.log(i);   //输出的是索引
            console.log(arr[i]);
}

 es6基础知识

  

   for of 循环:(不能用来遍历json)

for(var i of arr){
        console.log(i);   //输出的直接是值
}

es6基础知识

 

4.map对象

//map就是用来存东西的,跟obj类似

var map = new map(); console.log(map); map.abc = "jack"; map.age = "100"; console.log(map); // 设置值 增 改 map.set("a","red"); map.set("b","green"); console.log(map) //查 console.log(map.abc); console.log(map.get('a')); // 删除 delete map.abc; delete map.a; map.delete("a"); console.log(map)

es6基础知识

map对象是因为for of 的出现才出现的,一个map对象只能用for of 来遍历.

var map = new map();
        map.set("a","red");
        map.set("b","green");
        map.set("c","blue");
        map.set("d","yellow");
        map.set("e","black");

        for(var index of map.entries()){    //全写
            console.log(index);
        }

        // 只想循环key
        for(var key of map.keys()){
            console.log(key);
        }

        // 只想循环value
        for(var value of map.values()){
            console.log(value);
        }

 

 5.箭头函数

   没有参数时:

var x= () =>{
    console.log("hello");  
}

  有参数时

 var x = (a,b) =>{
  console.log(a+b);
}
x(1,2)

  返回对象时要用小括号包起来,因为花括号被解释为代码块了;

var x= () =>{
    return({
    uname:"www",
    gae:18
  }) }

  直接作为事件handle:

document.addeventlistener("onclick",ev =>{
      console.log(ev);  
}

 

6.es6原型

  在es6以前,必须有类和构造,在es6以前是没有类的概念,构造函数即是构造,也是类;到了es6,完全划分开了]

  es5:

function grand() {
   this.lastname = "王";
}
var grand = new grand ();

father.prototype = grand;  //继承

function father() {
  this.play = "打球";
}
var father = new father;
console.log(father);

son.prototype = father:
function son() {
   this.play = "打架"
}
var son = new son();
console.log(son)

es6基础知识

  es6:

//class 类
//constructor 构造函数

calss person{ //类
constructor(name, age){ //构造
      this.name = name;
      this.age = age;
  }
   showname(){
      return this.name;
  }
  showage{
      return this.age;
  }
}

var person = new person("jack",18);

class student extends person{ //继承
constructor (name,age,pid){
    super(name,age):
    this.pid = pid;
}
showpid(){
    return this.pid;
}

var student = new student("mack",50,"00001") ;
console.log(student)

es6基础知识

 

 7.promise   

  它就是一个对象,主要是用来处理异步数据的.

   在promise中,有三种状态 :  pending(等待,处理中) --->  resolve(完成)/   rejected(失败,拒绝)

var por = promise(function(relove,reject){
       resolve(123);   //成功的函数,成功后把这个数据传递出去
})

pro.then(function(val){        //then方法执行完成后又返回了一个promise对象
       //这是个成功的回调
       console.log("成功了,接收到的数为:"+val);  
       return val +1;
},function(err){
       //这是个失败的回调
      console.log(err);
}).then(function(val){      //之前的then成功后,返回了一个值,这里还要继续执行
    console.log(val)
}.function(err){})            

   处理数据(简化步骤)

<div id="box"></div>
    <button id="btn">展示</button>
    <script>
        var box = document.getelementbyid("box");
        var btn = document.getelementbyid("btn");

        function ajax(url,succ,erro){
            var xhr = new xmlhttprequest();
            xhr.open("get",url,true);
            xhr.send();
            xhr.onload = function(){
                if(xhr.readystate == 4 && xhr.status == 200){
                    succ(xhr.responsetext);
                }else{
                    erro(xhr.status);
                }
            }
        }

        btn.onclick = function(){
            var p = new promise(function(resolve,reject){
                ajax('04.txt',function(data){
                    resolve(data);
                },function(status){
                    reject(status);
                })
            });
            p.then(function(data){
                box.innerhtml = data;
            },function(err){
                box.innerhtml = err;
            })
        }
    </script>

  与之配套的一些方法:

   catch() : 捕获

<script>
        // catch    捕获
        var p = new promise(function(resolve,reject){
            resolve("success");
        })
        p.then(function(data){
            console.log(data);
            throw "发生错误了"
        }).catch(function(err){
            console.log(err);
        })
    </script>

    all()

<script>
        // 只有当所有的promise全部成功才能走成功,否则失败
        var p1 = promise.resolve(10);
        var p2 = promise.resolve(20);
        // var p3 = promise.reject(30);



        promise.all([p1,p2,true,false]).then(function(data){
            console.log(data);
        },function(err){
            console.log(err);
        })
</script>

    race()

<script>
        // race也是返回一个promise对象
            // 获取最先得到的结果,得到以后就不去执行了

        var p1 = new promise(function(resolve,reject){
            settimeout(resolve,100,"first");
        })
        var p2 = new promise(function(resolve,reject){
            settimeout(resolve,50,"second");
        })
        promise.race([p1,p2]).then(function(val){   //cdn   >    本地加载
            console.log(val)
        })
    </script>

  reject()

<script>
        var p1 = promise.resolve(10);
        var p2 = promise.resolve(p1);    //成功的promise里面可以传递一个成功的promise对象
        p2.then(function(data){
            console.log(data);
        })
    </script>

 

8,generator(状态机)

  遍历完成后,下一个元素的done值会是true

<script>
    //generator是一个函数,可以将它看做状态机
    function* fun(){
        yield "hello";
        yield "es6";
        yield "hello";
        yield "mercy";
    }
    var fn = fun();
    //1
    console.log(fn.next());         //{value: "hello", done: false}
    console.log(fn.next());         //{value: "es6", done: false}
    console.log(fn.next());         //{value: "hello", done: false}
    console.log(fn.next());         //{value: "mercy", done: false}
    console.log(fn.next());         //{value: undefined, done: true}     done表示已经讲整个generator函数遍历完成

    //2
    for (var a of fn){
        console.log(a);
    }

    //1和2两者只能有一个存在,如果1存在的话,2就不会执行
    </script>