ES6-02

es6 初步认知.

变量的使用 let

var a=12;
let： 用来定义变量
let a=12;
代码块:    {} 包起来的代码， 形成了一个作用域，块级作用域
    比如: if for while

特点: 只能在代码块里面使用
<script>
    {
        let a=12;
    }
    alert(a); // a is not defined
</script>

var 只有函数作用域

a). let具备块级作用域
b). 不允许重复声明
    let a=12;
    let a=5;    //错的
总结: 其实let才接近其他语言的变量

用处：
    封闭空间：
        (function(){
            var a=12;
        })()
    现在：
        {
            let a=12;
        }

总结: 块级作用域，其实就是 匿名函数立即调用.

封闭空间 (i问题)

var:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload=function(){
            var aBtn=document.getElementsByTagName('input');
            for(var i=0; i<aBtn.length; i++){
                (function(i){
                    aBtn[i].onclick=function(){
                        alert(i);
                    }
                })(i);
            }
        };
    </script>
</head>
<body>
<input type="button" value="aaa">
<input type="button" value="bbb">
<input type="button" value="ccc">
</body>
</html>

let:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload=function(){
            var aBtn=document.getElementsByTagName('input');

            for(let i=0; i<aBtn.length; i++){
                aBtn[i].onclick=function(){
                    alert(i);
                }
            }
        };
    </script>
</head>
<body>
<input type="button" value="aaa">
<input type="button" value="bbb">
<input type="button" value="ccc">
</body>
</html>

常量 const

一旦赋值，以后再也修改不了了

const a = 12;
a=15    //报错

注意:  
    const必须给初始值, 不能重复声明.
    因为以后再也没法赋值了, 所以声明的时候一定得有值.

用途: 为了防止意外修改变量
    比如引入库名, 组件名

字符串连接

之前:
    var str='';
    var str=""

反单引号: var str= `` --> 字符串模板

之前: 'abc'+变量名+'ef'
现在: `abc${变量名}ef`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        var a='新华网^_^';
        var b='不忘初心^_^';
        var str=`为什么在习近平眼中，党的基本路线是“国家的生命线、人民的幸福线”？${a}《学习进行时》原创品牌栏目“讲习所”今天推出“${b}、继续前进”系列之《生命线、幸福线——习近平的路线观》，为你解读。`;
        document.write(str);
    </script>
</head>
<body>

</body>
</html>

解构赋值

认识解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        /*var a=12;
        var b=5;
        var c=101;
        alert(a);*/
        var [a,b,c]=[12,5,101];   // 解构赋值
        console.log(a,b,c);
    </script>
</head>
<body>

</body>
</html>

解构赋值-跟顺序无关

1
2
3

 // var {a,b,c}={a:12,b:5,c:101};
 var {a,b,c}={b:5,a:12,c:101};
alert(a); //12

解构赋值-模式匹配

var [a,[b,c],d]=[12,[1,2],5]; // 左侧的样子，需要和右侧一样
console.log(a,b,c,d);  // 12 1 2 5
var [{a,e},[b,c],d]=[{e:'eeee', a:'aaaa'},[1,2],5];
console.log(a,b,c,d);  // aaaa 1 2 5

解构赋值-交互(数据解析)

1
2
3

var json={s:[1,2,3], a:'abc'};
var {s,a}=json;
console.log(a); // abc

解构赋值-赋默认值

// 以前写法
var json={};
var a=json.a || 12
console.log(a); //12
// 现在写法
var {time=12,id=0}={};
console.log(time,id); // 12 0