zoukankan      html  css  js  c++  java
  • ES6

       简单了解一下es6

         ES6是ECMAScript的第六个版本。JavaScript包括ECMA,DOM,BOM三个部分。es6中更新了一些更加方便快捷的语法。ECMA是js的实现者。

      1.let&const

        let也是声明变量,  但是和var 有一定的区别。首先弄清楚var 和 let 的区别。

          1)var 声明提前,let在执行到这一行的时候才会声明变量

          2)在使用未声明变量的时候let会报错。

          3)如果有重复声明的时候,var 同名的后面的值会覆盖前面的值,let有同名的会报错。

          4)let会出现作用域死区,只能在自己的代码块中使用let声明的变量,只能在当前作用域有作用。

    {
      var varTest = 'test var OK.';
      let letTest = 'test let OK.';
     
      {
        var varTest = 'varTest changed.';
        let letTest = 'letTest changed.';
      }
     
      console.log(varTest); //输出"varTest changed.",内部"{}"中声明的varTest变量覆盖外部的letTest声明
      console.log(letTest); //输出"test let OK.",内部"{}"中声明的letTest和外部的letTest不是同一个变量

                 const用来声明常量,也同样的没有变量声明提升,不能重复定义,且不能挂在到window上。

         const和let一样,也会产生作用域临时死区。比如

    const A = 100;
    {    //临时死区
         console.log(A);
         const A = 200;
    }
    会报错 A未声明

        2.spreed & rest 收集与展开

        展开和收集

        3.解构

          解构过程中具备赋值和变量声明两个功能,目的在于把等号左右的两个东西内部的值取出来

           对象数组都可以参与解构,解构的作用在于简化书写长度,提高开发效率

          解构数组:let [a, b, c] = [1, 2, 3];  

          可忽略中间值 let [a, , b] = [1, 2, 3];  // a = 1 b = 2 c = 3

          可嵌套   let [a, [[b], c]] = [1, [[2], 3]];  // a = 1  b = 2  c = 3

          不完全解构  let [a = 1, b] = [];      // a = 1, b = undefined

          剩余运算符 ...     let [a, ...b] = [1, 2, 3];  //a = 1 b = [2, 3]

          解构默认值 :  let [a = 2] = [undefined];  // a = 2

        对象模型的解构 

          解构对象 let { foo, bar } = { foo: 'aaa', bar: 'bbb' };   // foo = 'aaa'  bar = 'bbb'

          同样具有可嵌套 可忽略 不完全解构和剩余运算符的写法,用法和数组的基本相似。比如

            剩余运算符:let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; // a = 10  b = 20  rest = {c: 30, d: 40}

     4.箭头函数

        箭头函数的作用:函数的目的指向性更强,可读性更好。简化代码,提升开发效率。

        箭头函数的特点:

          1)不用写function

          2)不能使用new关键字,没有原型。只能作为函数使用

          3)参数不能重复命名

          4)返回值可以不写return,箭头函数返回对象时,要加一个小括号

          5)内部arguments this 由定义是外围最接近一层的非箭头函数的arguments和this决定其值

          6)箭头函数this为父及作用域的this,不能使用call apply等任何方法改变this

        箭头函数用=>符号来定义,箭头函数相当于匿名函数所以要用函数表达式的方法来写。

        箭头函数的基本写法,num1 num2是传入的参数,右边是函数的执行的代码,当代码只有一句的时候可以省略大括号。当参数只有一个的时候可以省略小括号。当不需要参数的时候直接写()。

    let sum = (num1,num2) => num1 + num2;

        5.Map对象与set

          map是一个对象,用来存储内容的。创建方式有

          var map = new Map();

          map.abc = 123;

          map.bcd = 456; 输出map 是一个长度为0的对象 ,包含属性值abc :123  bcd:456 

          get()可以用来获取map中的指定元素,不存在就返回undefined

          size属性返回成员的数量

          clear() 清空

          set(key,value)  添加或修改元素

          遍历map对象

    myMap.forEach(m=>{console.log(m)})

              删除  myMap.delete(keyString) 

       6.  for in     for of 

          for of不能循环对象但可以遍历数组,主要用来循环map对象

    var arr = [1,2,3];
    for(var index of arr){
        console.log(index)
    }
    输出 1 2 3

          for in 循环数组

    var arr = [1,2,3];
        for(var index in arr){
            console.log(index)
        }
    输出的是 0 1 2

          for in 循环对象

    var obj = {
                a : "1",
                b : "2",
                c : "3"
            }
            for(var index in obj){
                console.log(index);
                console.log(obj[index])
            }
    输出的是:a 1 b 2 c 3

      7.类 class

        在es6以前对象和类是不分的,如果要生成一个对象实例,要先定义一个构造函数。es6中可以通过class关键字定义类。写法更加的清晰。

    class Person{//定义了一个名字为Person的类
        constructor(name,age){
            this.name = name;//constructor是一个构造方法,用来接收参数
            this.age=age;
        }
        say(){//这是一个类的方法,不要加function
            return "我的名字叫" + this.name+"今年"+this.age+"岁了";
        }
    }
    var obj=new Person("tom",10);
    console.log(obj.say());//我的名字叫tom今年10岁了

        类的本质上是一个函数,类自身指向就是构造函数。也可以通过prototype来添加属性方法。

        class没有变量提升,需要先定义再使用。

        类的继承用extends实现。

    class Animal{
        constructor(){
            this.type = 'animal';
        }
        says(say){
            console.log(this.type + ' says ' + say);  
        }
    }
    
    let animal = new Animal();
    animal.says('hello')  //animal says hello
    
    class Cat extends Animal{
         constructor(){
              super();
              this.type = 'cat'
          }    
    }
    let cat = new Cat();
    cat.says('hello'); //cat says hello

        首先定义一个类,里面包含constructor。constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。cat类通过extends关键字继承了Animal的所有属性和方法。super()相当于父类的this对象。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,如果不调用super方法,子类就得不到this对象。

      8. Promise 

        Promise就是一个对象,用来做异步消息处理的。AJAX异步请求

    new Promise(function(resolve,reject){
                if(成功){
                    resolve(成功的数据)
                }else{
                    reject(失败的原因)
                }
            })
    
           状态: pending等待             ->      resolve(成功)
                                    ->      reject(失败)

       then是promise状态发生改变的毁掉函数,可以链式调用。

    var p1 = new Promise(function(resolve,reject){
                resolve(1)
    })
    //then调用以后又返回一个promise对象
    p1.then(function(data){
        return data + 10;
    },function(){
    }).then(function(data){
        console.log(data)
        },function(err){
    })
    console.log(p1)
    //输出了promise对象  和 11 因为data+10 resolve传入1

          

        

         

          

          

  • 相关阅读:
    TCP三次握手原则
    IDEA快捷键总结
    长连接和短连接,单工、半双工和全双工
    Spring中神奇@aotuWrited
    有状态和无状态的对象区别
    GC--垃圾收集器
    SpringMVC工作原理
    java的对象锁和类锁
    oracle中的数据类型
    oracle中的函数
  • 原文地址:https://www.cnblogs.com/wangzheng98/p/11271528.html
Copyright © 2011-2022 走看看