字面量

2. Symbol 字面量（ES6+）

// Symbol 创建（严格来说不是字面量，但类似）
let sym1 = Symbol();
let sym2 = Symbol("description");

// 全局 Symbol
let sym3 = Symbol.for("key");

// 内置 Symbol
Symbol.iterator;
Symbol.toStringTag;

3. 类字面量（ES6+）

class Person {
    constructor(name) {
        this.name = name;
    }

    greet() {
        return `Hello, ${this.name}`;
    }

    // 静态方法
    static createAnonymous() {
        return new Person("Anonymous");
    }

    // Getter/Setter
    get fullName() {
        return this.name;
    }

    set fullName(value) {
        this.name = value;
    }
}

字面量的增强语法（ES6+）

1. 属性简写

let name = "张三";
let age = 25;

// ES5
let person1 = {
    name: name,
    age: age,
};

// ES6+ 简写
let person2 = {
    name,
    age,
};

2. 解构赋值中的字面量

// 对象解构
let { name, age: userAge } = { name: "张三", age: 25 };

// 数组解构
let [first, second] = [1, 2, 3];

// 默认值
let { x = 10, y = 20 } = { x: 5 };

// 嵌套解构
let {
    a: { b },
} = { a: { b: 1 } };

3. 增强的对象字面量

let proto = { z: 3 };

let obj = {
    // 原型链设置
    __proto__: proto,

    // 方法简写
    method() {
        return "hi";
    },

    // 计算属性名
    ["prop_" + (() => 42)()]: "computed",
};

特殊数值字面量

// Infinity 和 -Infinity
Infinity - Infinity;

// NaN
NaN;

// 最大/最小安全整数
Number.MAX_SAFE_INTEGER; // 9007199254740991
Number.MIN_SAFE_INTEGER; // -9007199254740991

// 最大/最小值
Number.MAX_VALUE; // 1.7976931348623157e+308
Number.MIN_VALUE; // 5e-324

字面量的使用技巧

1. 对象字面量作为配置对象

function createElement(options = {}) {
    let defaults = {
        type: "div",
        className: "",
        text: "",
    };

    let config = { ...defaults, ...options };
    // 使用 config...
}

2. 数组字面量的解构应用

// 交换变量
let a = 1,
    b = 2;
[a, b] = [b, a];

// 获取剩余元素
let [first, ...rest] = [1, 2, 3, 4]; // rest = [2, 3, 4]

// 跳过元素
let [, second, , fourth] = [1, 2, 3, 4]; // second=2, fourth=4

3. 模板字面量标签函数

function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        return result + str + (values[i] ? `<mark>${values[i]}</mark>` : "");
    }, "");
}

let name = "张三";
let age = 25;
highlight(`姓名：${name}，年龄：${age}`);
// 返回：姓名：<mark>张三</mark>，年龄：<mark>25</mark>

注意事项

1. 对象字面量中的重复属性（ES5 严格模式报错）

// ES5 严格模式：SyntaxError
let obj = {
    x: 1,
    x: 2, // 重复属性
};

2. 八进制字面量的兼容性

// 旧语法（不推荐）
0777; // 511，某些环境下会解释为八进制

// ES6+ 标准
0o777; // 推荐使用

3. 数字分隔符（ES2021+）

// 提高大数字的可读性
let billion = 1_000_000_000;
let bytes = 0b1010_0001_1000_0101;
let hex = 0xff_ff_ff;

4. JSON 与对象字面量的区别

// JSON（是字符串）
'{"name": "张三", "age": 25}'

// 对象字面量（是对象）
{name: "张三", age: 25}

// JSON 必须使用双引号，不能有方法、undefined等