ECMAScript 6 入门简介（一）

一、基本用法

ES6新增了let命令，用来声明变量和var类似，但是所声明的变量只在let命令所在的代码块中有效，所谓的代码块即为{}。

1、let命令

测试：

 

解析:如图，用var声明的变量能够正常输出，而let声明的却不能输出。

 var a = [];
    for (var i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        };
    }
    a[3]();

最后输出的为10；

  {
        let a=[];
        for(let  i=0;i<10;i++){
            a[i]=function(){
                console.log(i)
            }
        }
        a[3]()
    }

最后输出的为3；

1.1  不存在变量提升

var会有变量提升的情况，就是变量可以在声明前使用，它的输出为undefined；而let没有变量提升的情况，客官下面请：

    {
        console.log(aa);//undefined
        var aa=9;
        console.log(bb);
        let bb=8;//报错 ReferenceError: Cannot access 'bb' before initialization

    }

1.2  不允许重复声明 

let不允许在相同作用域内，重复声明同一个变量，会报错意思为kb早已被声明。

   {
        let kb=8;
        let kb=24;
        console.log(kb);//Identifier 'kb' has already been declared
    }

 

1.3  a、b互换值

如何更换下列a、b的值？

 let a=5;
 let b=3;

呐~~，客官请看下面~~,这样就ok了。

​
{
 let a=5;
 let b=3;
 [a,b]=[b,a];
 console.log(a,b)
}

​

2  const命令

const声明一个只读的常量，一旦声明，常量的值就不可以被改变。

   {
        const PI = 3.14;
        console.log(PI);

    }

3  数组解构赋值

基本的数组解构赋值：

   {
            let [tg,fg,cg]=[0, 1, 2];
            console.log(tg, fg, cg);
            //0,1,2
        }

可忽略的：

       {

            let [x,y,z]=[, ,0];

            console.log(x,y,z)
            //undefined,undefined,0



        }

可嵌套的：

            {
                let [n1,[[n2],n3]]=[5, [[6], 7]];
                console.log(n1, n2, n3);
                //5,6,7
            }

不完全解构：

    {
        let [a=1,b]=[];
        console.log(a,b);
        //1,undefined
    }

4 对象解构赋值

基本的：

    {
        let {a,b}={a:1,b:2};
        console.log(a,b)
        //1,2

    }

可嵌套的：

 {
        let season = {
            favourite: ['spring', {
                y: 'winter'
            }]
        };

        let {favourite:[x,{y}]}=season;
        console.log(x, y);
    }
    //spring winter

还有各种各样的

        {
            let {q=1,w=2}={q: 3, w: 5};
            console.log(q, w);
            //3,5

            let { foo: baz } = {foo: "aaa", bar: "bbb"};
            console.log(baz);
            //aaa


            let {0:y=6}={};
            console.log(y);
            //6
            let {m}={m: 1};
            console.log(m);
            //1
        }

5  字符串的解构赋值

{
let [a,b,c,d,e]="hello"
console.log(a) 
//h
}

6  字符串的扩展

字符的Unicode表示法，ES6加强了对Unicode的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点

    /*字符串的扩展*/
    {
        let z="\u{41}";
        console.log(z);
        //字符串的遍历器
        for(let g of "abcd"){
            console.log(g)
        }
        //模板字符串
        let path="www.baidu.com";
        let loc=`htts://${path}`;
        console.log(loc);

        //es6检索字符
        let e="    computer   ";
        console.log(e.includes("m"));//是否包含字母m
        //true
        console.log(e.includes("a"));
        //false
        console.log(e.startsWith("c"));//是否以字母c开头
        //true
        console.log(e.endsWith("e"));//是否以字母e结尾
        //false

        console.log(e.repeat(2));//将e重复2遍
        console.log(e.padStart(12,'x'));//在开头添加x，直到够12的长度
        console.log(e.padEnd(12,'x'));//在结尾处添加x，直到够12的长度

        console.log(e.trim());// 去除所有的空格
        console.log(e.trimStart());//去除前面的空格
        console.log(e.trimEnd());//去除后面的空格

    }

6.1  扩展符

...

    {
        let[b1,...b2]=[1,2,3,4,5,6,7,8,9];
        console.log(...b2)
        //2 3 4 5 6 7 8 9
    }

7  数据类型转化

这里Math.sign方法用来判断一个数到底是正数、负数、还是零，对于非数值，会先将其转换为数值。

并且它会返回五种值。

1、参数为正数，返回+1；

2、参数为负数，返回-1；

3、参数为0，返回0；

4、参数为-0，返回-0；

5、其它值，返回NaN。

    {
        Number.parseFloat();
        Number.parseInt();
        //检测一个数字是否为整数
        console.log(Number.isInteger(8));
        //true
        console.log(Number.EPSILON);
        //Math的扩展
        console.log(Math.trunc("1.2366666"));//去除小数点后面
        //1
        console.log(Math.sign(-10));
        //-1
        console.log(Math.sign(10));
        //1
        console.log(Math.sign(-0));
        //-0
        console.log(Math.sign(0));
        //0
        console.log(Math.sign("nn"));
       // NaN

        console.log(Math.cbrt(64));//立方根
        //4
    }

8  函数的扩展

    {
        function fun1(x, y=5) {
            console.log(x, y)
        }
        console.log(fun1.length);
        let fun4=function(){
        console.log(1)
            //1
    };
        //箭头函数
        let fun3=()=>{
        console.log(1)
        //   1
    }
        fun3(1);

        //与变量解构结合使用
        let fun6=()=>({a:1,b:2});
        fun6();
        [1,2,3].map(function (x) {
            console.log(x*x);
        })(2);
        //1 4 9


    }

8.1  箭头函数知识点

//箭头函数
var f = v => v;

// 等同于
var f = function (v) {
  return v;
};
//如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};