zoukankan      html  css  js  c++  java
  • ES6

    let

    1.let不允许重复声明

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

    会报错,变量a已经被声明,Uncaught SyntaxError: Identifier 'a' has already been declared

    2.let没有声明提前

    console.log(a); //ReferenceError
    let a = 10;

    let这样声明会报错

    如果用var声明,不会报错

    console.log(a); //undefined
    var a = 10;

    3.不会挂载到window上

    var a = 1;
    window.a; //1
    let b = 1;
    window.b; //undefined

     4.let声明的变量,存在块及作用域

    块级作用域由花括号包括,if语句和for循环里面的{ }也属于块作用域。

    {
      let a=1;
      var b=2;
    }
    console.log(a); //undefined
    
    console.log(b); //2

    5.let会产生临时死区

    只要块及作用域里有let,  

    let a =10;
     function fn1(){
        console.log(a);
        let a = 5;
    }
    
     fn1();//Uncaught ReferenceError: a is not defined

    临时死区就是如上代码,a已经声明了,在没有到它赋值的时候,不能使用这个变量,不然会报错。

    作用域开始,一直到let a = 5为止这整一块,都是a变量的临死性死区,不能使用它

    const

    const用来声明常量,一旦声明,其值就不能更改,const一旦声明常量,就必须同时初始化。

    1.const与let一样,在同一个作用域,const不能重复声明同一常量

    2.const 也不能声明提前

    3.const也不会挂载到Window上

    spreed&rest   收集与展开 

    运算符spreed

    将一个数组插入到另一个数据中
    var arr1 = [1, 2, 3,4];
    var arr2 = [...arr1, 4, 5, 6]; 
    console.log(arr2);
           
     //(7) [1, 2, 3, 4, 4, 5, 6]
    ES5里合并数组的方法
    var arr1 = [1,2,3];
    var arr2 = [2,3,4];
    var arr3 = [5,6,7];
    arr1.concat(arr2, arr3);
    console.log(arr1.concat(arr2, arr3))
    
    //(9) [1, 2, 3, 2, 3, 4, 5, 6, 7]
    将符串转为数据
    var str='bailiban';
    var arr3= [...str];
    console.log(arr3);
    
    //(8) ["b", "a", "i", "l", "i", "b", "a", "n"]
    let obj1 = {
        name : "jack",
        age : 18,
        play : "wan"
    }
    let obj2 = {
        name : "mack",
        age : 20
    }
    
    console.log(Object.assign({},obj1,obj2))
    
    {name: "mack", age: 20, play: "wan"}

     深克隆

    var a = [1,2,3];
    var b = a;
    b.push(4);
    console.log(b);
    console.log(a);

    输出a和b都是1234  这是一个深克隆

    浅克隆

    var a=[1,2,3];
    var b = [...a,4]
    console.log(b);//1,2,3,4
    console.log(a);//1,2,3

    解构化赋值

    作用:简化书写长度,提升开发效率

    解构数组

    var foo = ["one", "two", "three"];
    
    var [one, two, three] = foo;
    console.log(one); // "one"
    console.log(two); // "two"
    console.log(three); // "three"
    var a, b;
    
    [a, b] = [1, 2];
    console.log(a); // 1
    console.log(b); // 2
    var [a, ...b] = [1, 2, 3];
    console.log(a); // 1
    console.log(b); // [2, 3]


    ...b后面不能加逗号,剩余元素必须是数组的最后一个元素。

    解构对象

    var {a = 10, b = 5} = {a: 3};
    
    console.log(a); // 3
    console.log(b); // 5
    当要提取的对象没有对应的属性,变量就被赋予默认值。

    箭头函数

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

    特点:
    1.不用写function关键字
    2.只能作为函数使用 不能new,没有原型
    3.参数不能重复命名
    4.返回值可以不写return,
    5.内部arguments this 由定义是外围最接近一层的非箭头函数的arguments和this决定其值

    function sum(a,b){
        return a+b;
    };
    var sum = function(a,b){
        return a+b;
    }
    在不考虑预编译的情况下,两个的用法是一样的

    可以这样简化

    let sum = (a,b) => {
        return a+b;
    }
    也可以这样简化
    let sum = (a,b) => a+b;
     
    console.log(sum(10,15))   //25
    平常写的函数
    function sum(x){
        return function(y){
            return function (z)
                return x+y+z;
            }
        }
    }

    演变过程

    let sum = (x) => {
      return (y) => {
        return (z) => {
          return x+y+z
        }
      }
    }

    可以这样简写
    var sum1 = sum(1);
    var sum2 = sum1(2);
    console.log( sum2(3) );
    
    也可以这样简写
    let sum = x => y => z => x+y+z;
    console.log(sum(1)(2)(3));

    箭头函数只能作为函数使用不能new,没有原型,不然会报错

    let sum = () => {
        this.a = 10;
    }
    new sum();

    this 由定义是外围最接近一层的非箭头函数的this决定其值

    let obj = {
        abc : "hello",
        fun (){
            let sum = () => {
                console.log(obj.abc);
            }
            return sum;
        }
    }
    obj.fun()()   //hello

    map对象

    map对象主要是储存内容用的

    set() 方法是给Map对象添加一个新元素。返回Map对象.

    get() 方法用来获取一个 Map 对象中指定的元素

    创建map对象

    var map = new Map();

    添加值

    map.set('name','jack');
    map.set('age',23);

    取值

    map.get(name);

    循环

    var map = new Map();
    map.set("0","zero");
    map.set("1","one");
    
    for(var index of map){
        console.log(index);
    }
    输出
    (2) ["0", "zero"]
    (2) ["1", "one"]

    for(var name of map.entries()){
    console.log(name)
    }

    输出

    0,zero
    1,one

    for (var [key,value] of map.entries()){
    console.log(key,value)
    }

    输出

    0 zero

    1 one

    for (var val of map.values()){
    console.log(val)
    }

    输出

    zero one

    class类和继承

    // 父类
    class Person {
        constructor(name){
            this.name=name;
        }
        showName(){
            return`名字是:${this.name}`;
        }
    }
    // 子类
    class children  extends Person{
        constructor(name,skill){
            super(name);
            this.skill = skill; 
        }
        showName (){
            super.showName()//调用父级的方法也是用super,写继承,必须加上的
    }

    showSkill(){
            return`技能为:${this.slill}`;
        }
    }    
    let stu1 = new children('jack','游泳')
    console.log(stu1.showName())

    class用extends实现继承,子类继承父类,必须在constructor函数的第一行调用super ( )

    promise对象 

    用来做异步的消息处理的,表示一个异步操作的最终状态(完成或失败),以及该异步操作的结果值。
    promise对象是由new及其构造函数来创建的,里面接收两个参数
    当异步任务完成且返回结果值时,会调用 resolve 函数;
    当异步任务失败且返回失败原因时,会调用reject 函数。
    用法:
    new Promise(function(resolve,reject){
        if(成功){
            resolve(成功的数据)
        }else{
            reject(失败的原因)
        }
    })

    then方法

    then是promise实例状态发生改变的·回调函数,会返回一个新的Promise实例,所以后面可以再另一个then()方法进行链式调用。

    let p1 = new Promise(function(resolve, reject){
        //当异步代码执行成功时,会调用resolve(...), 当异步代码失败时就会调用reject(...)
        setTimeout(function(){
            resolve("成功了!"); //代码正常执行!
        }, 250);
    });
    
    p1.then(function(successMessage){
        //successMessage的值是上面调用resolve(...)方法传入的值.
        console.log("太好了! " + successMessage);
    });

    catch方法返回一个promise,用于错误的处理

    如果抛出一个错误,就要通过catch( )方法来处理

    var p1 = new Promise(function(resolve,reject){
        resolve('成功了')
    })
    p1.then(function(abc){
        console.log(abc);
        throw '出错了哦';
    }).catch(function(err){
        console.log(err);
    })

    all( )方法 

    所有的promise对象是成功,才能走成功,如果有一个失败,就回调reject
    var p1 = Promise.resolve('a');
    var p2 = Promise.resolve('b');
    var p3 = Promise.resolve('c');
    Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results); // [1, 2, 3]
    });
     

    上面都是成功,所以输出的是a,b,c

    var p1 = Promise.resolve(1),
    var p2 = Promise.reject(2),
    var p3 = Promise.resolve(3);
    Promise.all([p1, p2, p3]).then(function (results) {
        //then方法不会被执行
        console.log(results);
    }).catch(function (e){
        //catch方法将会被执行,输出结果为:2
        console.log(2);
    });

    上面P2失败了,状态就为reject

    race( ) 一旦参数内有一个值的状态发生的改变,那么该Promise的状态就是改变的状态

    var p1 = new Promise(function (resolve,reject){
        setTimeout(resolve,300,'one');
    })
    var p2 = new Promise(function (resolve,reject){
        setTimeout(resolve,100,'two');
    })
    Promise.race([p1,p2]).then(function(data){
        console.log(data);//“two”
    })

    两个都完成,但 p2 更快
    var p3 = new Promise(function(resolve, reject) { 
        setTimeout(resolve, 100, "three");
    });
    var p4 = new Promise(function(resolve, reject) { 
        setTimeout(reject, 300, "four"); 
    });
    
    Promise.race([p3, p4]).then(function(value) {
      console.log(value); // "three"
      // p3 更快,所以它完成了              
    }, function(reason) {
      // 未被调用
    });
    var p5 = new Promise(function(resolve, reject) { 
        setTimeout(resolve, 500, "five"); 
    });
    var p6 = new Promise(function(resolve, reject) { 
        setTimeout(reject, 100, "six");
    });
    
    Promise.race([p5, p6]).then(function(value) {
      // 未被调用             
    }, function(reason) {
      console.log(reason); // "six"
      // p6 更快,所以它失败了
    });
  • 相关阅读:
    基础很重要~~04.表表达式-上篇
    【T-SQL基础】03.子查询
    【T-SQL基础】02.联接查询
    【T-SQL基础】01.单表查询-几道sql查询题
    【.Net底层剖析】3.用IL来理解属性
    SQL-基础知识
    IL指令速查
    黑客成长之路-01.新手篇-设置路由器
    《拆掉思维里的墙》~~想跳槽的同学可以先看看这本书!
    【解决方案】安装vssdk_full.exe遇到的问题
  • 原文地址:https://www.cnblogs.com/conlover/p/11270830.html
Copyright © 2011-2022 走看看