ES6新特性及用法笔记

1.新增数据类型Symbol。【Number、Boolean、Symbol、Null、Undefined、Object】

Symbol类型的值通过Symbol函数生成，相同的Symbol函数返回的值是唯一的

Symbol函数可以接收字符串作为参数，但是即使相同参数返回的值也是唯一的，即Symbol('a') != Symbol('a')

代码实例

    /*
    * Symbol
    * 传入相同的值，但他内部存储的值不相同
     */

    var s1=Symbol();
    var s2=Symbol();
    // console.log(typeof s1)
    console.log(s1, s2)
    var s3=Symbol('miaov');
    var s4=Symbol('miaov');
    console.log(s3, s4)
    console.log(s3==s4) // false
/************************************************************/
    var Preson =(function () {
        let _gender = Symbol('gender');  //属性私有化
        function P(name,gender) {
            this.name = name;
            this[_gender]=gender;
        }

        P.prototype.say = function () {
            console.log(this[_gender]) //
        }
        return P;
    })()
    var p1 = new Preson('张三','男');
    console.log(p1);  // {name: "张三", Symbol(gender): "男"}
    // console.log(p1[Symbol('gender')]) //undefined

2.let与const

let:

不支持变量声明预解析（先声明后使用）

支持块作用域

不允许重复声明

const:

不支持变量声明预解析（先声明后使用）

支持块作用域

不允许重复声明

常量（值一旦确定，不允许修改，所以必须初始化）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button.ac{
            background-color: #00a0e9;
        }
        p{
            display: none;
        }
        p.ac{
            display: block;
        }
    </style>
</head>
<body>
<button class="ac">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<p class="ac">内容1</p>
<p>内容2</p>
<p>内容3</p>
<script>
    var buttons = document.querySelectorAll('button');
    var ps = document.querySelectorAll('p');

    //
    // for(var i=0;i<buttons.length;i++){
    //     buttons[i].index=i
    //     buttons[i].onclick=function () {
    //         for (var i=0;i<buttons.length;i++){
    //             buttons[i].className=''
    //             ps[i].className=''
    //         }
    //         this.className='ac'
    //         ps[this.index].className='ac'
    //     }
    // }
    
    for(let i=0;i<buttons.length;i++){
        buttons[i].onclick=function () {
            for(let i=0;i<buttons.length;i++){
                buttons[i].className=''
                ps[i].className=''
            }
            this.className='ac'
            ps[i].className='ac'
        }
    }
</script>
</body>
</html>

View Code