JavaScript Symbol

JavaScript Symbol教程

JavaScript 中的 Symbol 是 ECMAScript 6 中新添加的类型，是一种实例是唯一且不可改变的数据类型。

定义Symbol类型

语法

var v1 = Symbol();

说明

使用 var 定义了一个 Symbol 变量 v1。

案例

定义Symbol类型

使用 var 定义一个Symbol类型的变量

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Symbol类型</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var v1 = Symbol();
            console.log("v1 is:", v1);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

35_javascript symbol.png

我们使用 var 定义了一个 Symbol 类型的变量 v1，并打印其值，v1 的值就是 Symbol。

获取Symbol变量类型

Symbol 变量的数据类型就是 Symbol

<!DOCTYPE html>
<html>
    <head>
        <title>Symbol 变量的数据类型就是 Symbol</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var v1 = Symbol();
            console.log("v1 is:", v1);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

36_javascript symbol.png

我们使用 typeof 获取 symbol 变量的数据类型，返回的就是 symbol。

每个Symbol变量都是唯一

每个 Symbol 变量都是唯一的

<!DOCTYPE html>
<html>
    <head>
        <title>每个 Symbol 变量都是唯一的</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var v1 = Symbol();
            var v2 = Symbol("symbol haicoder");
            var v3 = Symbol("symbol haicoder");
            console.log("v1 == v2", v1 == v2);
            console.log("v2 == v3", v2 == v3);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

37_javascript symbol.png

我们定义了三个 Symbol 类型的变量，v1、v2 与 v3，结果，我们使用 == 比较这三个变量，结果都不相等，即，每个 Symbol 变量都是唯一的。

Symbol可用作对象属性

因为 Symbol 是唯一的，因此可用作对象属性

<!DOCTYPE html>
<html>
    <head>
        <title>因为 Symbol 是唯一的，因此可用作对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            const PROP_NAME = Symbol();
            const PROP_AGE  = Symbol();
            var obj = {
                [PROP_NAME]:"HaiCoder"
                [PROP_AGE] = 109
            };
           for (let key in obj){
            console.log("key =", obj[key]);
           }
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

38_javascript symbol.png

我们定义了两个 Symbol 类型的变量 PROP_NAME 与 PROP_AGE，接着，我们定义了一个对象 obj，并给它的 PROP_NAME 属性赋值为 “HaiCoder”，PROP_AGE 赋值为 109。

最后，我们使用 for in 遍历对象，获取的属性为空，因为，要获取对象的 Symbol 属性需要使用 Object.getOwnPropertySymbol，因此，我们将代码修改如下：

<!DOCTYPE html>
<html>
    <head>
        <title>因为 Symbol 是唯一的，因此可用作对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            const PROP_NAME = Symbol();
            const PROP_AGE  = Symbol();
            var obj = {
                [PROP_NAME]:"HaiCoder"
                [PROP_AGE] = 109
            };
           let arr = Object.getOwnPropertySymbols(obj);
           console.log("arr =", arr);
           console.log("arr[0] =", arr[0]);
           console.log("arr[1] =", arr[1]);
        </script>
    </head>
</html>

JavaScript Symbol教程总结

JavaScript 中的 Symbol 是 ECMAScript 6 中新添加的类型，是一种实例是唯一且不可改变的数据类型。