• es6总结


    主要包括let const,模板字符串,解构赋值,箭头函数,扩展运算符,Promise,类,import export等

    一、let和const

    1.let所声明的变量只在let所在的代码块内有效。let相当于es5用一个函数把变量包裹了。

    const声明一个只读的常量。一旦声明,常量的值就不能改变。一旦声明就必须立即初始化。

    2.const声明的变量也只在所声明的块级作用域内有效。

    3.let声明的变量和const声明的常量不会提示,只能在声明后使用。

    4..let声明的变量和const声明的常量都不能重复声明。

    二、模板字符串

    模板字符串用反引号(`)标识。可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

    //当作普通字符串

    `In JavaScript  ' '  is a line-feed.`

    //定义多行字符串  空格和缩进会保留

    `In JavaScript this is

    not legal`

    //在字符串中嵌入变量   将变量写在${}中

    var name='Tom';

    `hello,${name}!`

    如果在模板字符串中需要使用反引号,则加反斜杠转义。

    如果模板字符串中的变量没有声明则会报错。

    三、解构赋值

    es6允许按照一定的模式从数组和对象中取值,然后对变量进行赋值,这被称为解构赋值。

    1.数组的解构赋值

    let [a,b,c]=[1,2,3];

    let [foo,[[bar],baz]]=[1,[[2],3]];

    let [foo]=[];//解构不成功,foo=undefined

    //不完全解构如下

    let [x,y]=[1,2,3];//x=1 y=2

    let [a,[b],c]=[1,[2,3],4];//a=1 b=2 c=4

    如果等号右边不是数组,将会报错

    解构赋值允许指定默认值

    let [foo=true]=[];//foo=true

    let [x,y='b']=['a'];//x='a' y='b'

    如果一个数组成员不严格等于undefined则默认值不会生效,null不严格等于undefined

    let [x=1]=[undefined];//x=1

    let [x=1]=[null];//x=null

    默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

    2.对象的解构赋值

    let {foo,bar}={foo:"aaa",bar:"bbb"};//foo:"aaa" bar:"bbb"

    变量必须与属性同名才能取到正确的值

    let {foo:baz}={foo:"aaa"};//baz="aaa" foo is not defined

    对象的解构赋值的内部机制是先找到同名属性,然后赋值给对应的变量。foo是匹配的模式,baz才是变量,真正被赋值的是baz。

    对象的解构也可以指定默认值。默认值生效的条件是对象的属性值严格等于undefined。如果解构失败,变量的值等于undefined。

    let{log,sin,cos}=Math;

    以上代码将Math对象的对数、正弦、余弦三个方法赋值到对应的变量上,使用方便。

    let arr=[1,2,3];

    let {0:first,[arr.length-1]:last}=arr;

    first//1

    last//3

    数组的本质是对象,可以对数组进行对象属性的解构。

    3.字符串的解构赋值

    const [a,b,c,d,e]='hello';

    a//'h'

    b//'e'

    let {lenth:len}='hello';

    len//5

    4.函数参数的解构赋值

    function add([x,y]){

      return x+y;

    }

    add([2,3]);//5

    function move1({x=0,y=0}={}){

      return [x,y];

    }

    move({x:3,y:8});//[3,8]

    move({x:3});//[3,0]

    move({});[0,0]

    move();//[0,0]

    function move2({x,y}={x:0,y:0}){

    return [x,y];

    }

    move({x:3,y:8});//[3,8]

    move({x:3});//[3,undefined]

    move({});[undefined,undefined]

    move();//[0,0]

    四、箭头函数

    1.var f=v=>v;

    等同于

    var f=function(v){

      return v;

    }

    2.如果箭函数不需要参数或需要多个参数,就使用圆括号把参数括起来

    var f=()=>5;

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

    3.如果箭头函数的代码块部分不止一个语句,要用大括号括起来。

    var sum=(num1,num2)=>{num1+num2};

    4.如果箭头函数直接返回一个对象,必须在对象外面加上括号。

    var getItem=id=>({id:id,name:"Temp"});

    5.箭头函数可以与变量解构结合使用。

    const full=({first,last})=>first+' '+last;

    等同于

    function full(person){

      return person.first+' '+person.last;

    }

    6.函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。this的指向是可变的,但在箭头函数中是固定的。箭头函数根本没有自己的this。

    不可以当作构造函数,即不能new。

    不可以使用arguments对象。

    不可以使用yield命令。

    箭头函数可以嵌套。

    五、扩展运算符

    1.扩展运算符是三个点(...),将一个数组转为用逗号分割的参数序列。

    function add(x,y){

      return x+y;

    }

    var numbers=[1,2];

    add(...numbers);//3

    2.可以替代数组的apply方法

    Math.max(...[14,3,7]);//14

    3.将一个数组添加到另一个数组的尾部

    var arr1=[1,2];

    var arr2=[3,4];

    arr1.push(...arr2);

    4.扩展运算符与解构赋值结合时,只能放在参数的最后一位。

    5.扩展运算符可以将字符串转换为真正的数组,且能够正确识别32位的Unicode字符

    [...'hello']

    //['h','e','l','l','o']

    六、Promise对象

    Promise是异步编程的一种解决方案。

    1.对象的状态不受外界影响。有3种状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态。

    一旦状态改变就不会再变,任何时候都可以得到这个结果。

    2.Promise对象是一个构造函数,用来生成Promise实例。

    var promise=new Promise(function(resolve,reject){

      //...some code

      if(/*异步操作成功*/){

        resolve(value);

      }

      else{

        reject(error);

      }

    });

    Promise实例生成后,可用then方法分别指定Resolved状态和Rejected状态的回调函数。

    promise.then(function(value){

      //success

    },function(error){

      //failure

    });

    then方法指定的回调函数将在脚本所有同步任务执行完成后才会执行。

    一般不要在then方法中定义Rejected状态的回调函数,而应使用catch方法。

    七、类

    es6中的class是一个语法糖,它的绝大部分功能es5都可以做到。class写法使对象原型的写法更加清晰,更像面向对象编程的语法。

    八、import export

    export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

    //m.js

    var a=1;

    var b=2;

    export{a,b};

    通过该接口可以取到模块内部实时的值。

    //n.js

    import {a,b} from './m.js';

    import命令具有提升效果

    import * from './m,js';//整体加载

    使用export default命令可以为模块指定默认输出

    export default function fun(){

      //...

    }

    import fun from '...';

    export和import的复合写法

    export {foo,bar} from 'my_module';

    const声明的常量只在当前代码块中有效,如果要被多模块共享,可以导出。

    //constants.js

    export const A=1;

    export const B=2;

    import * as constants from './constants';

    console.log(constants.A);//1

  • 相关阅读:
    java 分割
    我就骂你了,我tm还想打你呢
    就两个人,怎么搞管理?
    年底得了个公司奖金,但是我却高兴不起来
    Microsoft.VisualStudio.TestTools.UnitTesting 命名空间
    Python2.7.6标准库内建函数
    几种xml读取方法比较
    无论怎么样都不能成为你对别人发脾气的理由
    【产品策划】在移动互联网时代的多媒体社交
    DES加密 超详解 及 C++编程实现
  • 原文地址:https://www.cnblogs.com/cdx0/p/es6.html
Copyright © 2020-2023  润新知