es6

作者: goodluckall | 来源:发表于2018-01-18 09:25 被阅读0次

    一、基本

    1.目前用的版本是ESMAScript3.0,后来改名为ECMAScript5.01。

    2.ECMA-262 是 JavaScript 标准的官方名称

        javascript组成

        ESCAScript描述了该语言的语法和基本对象

        文档对象模型(DOM),描述处理网页内容的方法和接口。

        浏览器对象模型(BOM),描述与浏览器进行交互的方法接口

    3.ECMAScript6的特点ES6增添了许多必要的特性,例如模块和类(class),块级作用域,常量与变量

    4.浏览器的支持程度(不支持IE6)

        http://kangax.github.io/compat-table/es6/

    5.可以通过Babel转码器把ES6写的代码转成ES5的,就不用担心运行环境是否支持。

    二、语法

    let 是es新增的命命,用来声明变量的关键字 类似于var(let的运用不影响var)

    注意:1、let声明的变量只在let所在的作用域下有效,

               2、用let声明变量时在相同作用域下不能重复声明,

                3、用let声明的变量不存在预解析

                4、暂时性死区:在代码块内,使用let声明变量之前,该变量是不可用的

                5、{}就是一个作用域块

    eg:let n = 0;

    console.log(n);//0

    {

    let m = 12;

    }

    {

    console.log(n);//0

    console.log(m);//m is not defined

    }

    代码出错那么它之后的代码都不会执行

    let声明的变量在该作用域或者该作用域的父级下有效

    var a = 1;

    var a = 3;

    console.log(a);

    let a = 4;

    console.log(a);//'a' has already been declared

    let在相同作用域下不能重复声明。

    var str='12345';

    console.log(str);//12345

    function fn(){

    console.log(str);//undefined

    if(false){

    var str=true;

    }

    }

    fn();//不是一个方法。

    预处理:js中的预处理是一层一层的处理,先找的最外层的var和function并且赋值underfined,之后从上往下顺序执行,之后逐级按照这种方式预处理.

    for(var i=0;i<10;i++){}

    计数器功能时,用var声明变量,会泄露为全局变量

    for(let i=0;i<10;i++){}

    querySelector('选择器') 找到满足选择器的第一个元素

    querySelectorAll(‘选择器’) 找到满足选择器的所有元素

    ie8以下不支持

    const 声明一个常量:

    1,常量声明后就不能修改,

    2, 声明必须赋值,如不赋值就会报错

    3,必须先声明后使用(不能预解析)

    4, 不能重复声明

    eg:

    用const声明的对象,可以对它的属性进行更改

    const obj={name:'lisa',age:18};

    console.log(obj);

    obj.name="刘";

    obj.sex="女";

    console.log(obj);

    解构:es6允许按照一定模式,从数组或者对象中提取值,对变量进行赋值,这就被称为解构赋值。

    数组解构赋值:等号左边和右边必须是数组,数组的解构赋值要一一对应,如果对应不上它的值就是undefined

    eg:

    var a=1,b=2,c=3;

    // var arr=[1,2,3]

    // a=arr[0];

    // b=arr[1];

    // c=arr[2]

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

    // console.log(a,b,c);//1,2,3

    //

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

    // console.log(x,y,z)//1,3,undefined

    //

    // let [m,n,q]=[1,2];

    // console.log(m,n,q);

    //

    // {

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

    // console.log(a,b,c)//1,2,3

    // let [m,q,str]=[1,[2,3],'a'];

    // console.log(m,q,str);

    // }

    //

    let [head,...tail]=[1,3,4,5];

    console.log(head,tail)

    var arr=[1,2,3,4];

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

        console.log(first,end);

    // {

    // let [m,...t]=[1,3,4,5]

    // console.log(m,t);

    // }

    // {//解构允许给默认值

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

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

    // console.log(foo);//true,8

    // }

    // {

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

    // console.log(x,y);//a,b

    // }

    // {

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

    // console.log(x,y)

    // }

    //

    // //默认值可以引用解构值的其它变量,但变量必须是已经声明的

    // {

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

    // console.log(x,y);

    // }

    // {

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

    // console.log(x,y)

    // }

    // {

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

    // console.log(x,y);//1,2

    // }

    {

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

    console.log(x)

    }

    // 数组解构的应用

    n=10;

    n2=20;

    // 交换n和n2的值

    t=n;

    n=n2;

    n2=t;

    {

    let n1=10;

    let n2=20;

    [n1,n2]=[n2,n1];

    console.log(n1,n2)

    }

    function fn(){

    return ['a','b','c']

    }

    let [d,e,f]=fn();

    console.log(d,e,f);

    解构:es6允许按照一定模式,从数组或者对象中提取值,对变量进行赋值,这就被称为解构赋值。数组解构赋值:等号左边和右边必须是数组,数组的解构赋值要一一对应,如果对应不上它的值就是undefined对象解构赋值:等号左边和右边必须是对象,对象的解构赋值要key要一一对应,顺序不需要对应,如果对应不上它的值就是undefined var obj={

    name:'lisa',

    age:18,

    lang:['en','ja','html'],

    say:function(){console.log('解构')}

    };

    let {name,say,age,lang,sex}=obj;

    console.log(name);

    console.log(say);

    console.log(lang);

    console.log(sex);

    function fn(){

    return {

    color1:'red',

    color2:'blue',

    color3:'yellow'

    }

    }

    let {color1,color2,color3}=fn();

    console.log(color1);

    字符串也可以解构,这是因为此时字符串被转换成了一个类数组对象,类数组有个length属性因此也可以对它进行解构 const [a,b,c,d,e]='hello';

    console.log(a,e);

    let {length:n}='hello';

    console.log(n);

    相关文章

      网友评论

          本文标题:es6

          本文链接:https://www.haomeiwen.com/subject/mckboxtx.html