ES6 学习之内置对象扩展-模板字符串，数组、对象的扩展，延展操作符

本文深入探讨了ES6带来的多项新特性，包括模板字符串、数组和对象的扩展功能，如Array.from、Array.of、Object.assign及延展操作符等，通过实例展示了这些特性的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        // 模板字符串
        let str = '适合敲代码';
        let className = 'test';
        let html = `<html>
                    <head></head>
                    <body>
                        <p>今天天气很好</p>
                        <div class="${className}">${str}</div>
                    </body>
                </html>`;
        console.log(html);

        // 数组的扩展
        // Array.form 伪数组转为数组
        let allLis = document.querySelectorAll('li');
        console.log(allLis);
        console.log(Array.isArray(allLis)); // false
        console.log(Array.from(allLis));
        console.log(Array.isArray(Array.from(allLis))); // true
        // Array.of // 转换为数组
        console.log(Array.of(1, 2, 3, 4));

        // 对象的扩展
        // ES6中 key 和 value 是一样的，写一个就够了
        let name = '张三';
        let age = 18;
        let person = {
            name,
            age
        };
        console.log(person);
        // Object.assign() 合并对象
        let obj1 = {
                name: '张三'
            },
            obj2 = {
                'age': 18
            },
            obj3 = {
                'sex': '男'
            },
            obj4 = {
                'friends': '李四'
            },
            obj = {};
        Object.assign(obj, obj1, obj2, obj3, obj4);
        console.log(obj);

        // 延展操作符
        let str1 = '今天天气很好';
        let strArr = [...str1];
        console.log(strArr);
        let student = {
                name: '张三',
                age: 18,
                sex: '男'
            }
            // < Person(...student) / >
            // 用来数组去重
        let myArr = [1, 2, 10, 'zhangsan', 20, 2, 1];
        console.log(new Set(myArr));
        console.log([...new Set(myArr)]);