七、内置对象扩展

1. 模板字符串
    // 正常情况下不允许换行
    let html1 = '<html><head></head><body><p>今天的天气很好!</p><div>适合敲代码!</div></body></html>';

    // 模板字符串(esc下面的键``-注意输入法调成英文)
    let str = '适合敲代码!';
    let className = 'test';
    let html = `<html>
                   <head></head>
                   <body>
                        <p>今天的天气很好!</p>
                        <div class="${className}">${str}</div>
                   </body>
                </html>`;
    console.log(html);

2. 数组的扩展
    // Array.from -- 将两类对象转为真正的数组：
        (1).类数组的对象（ array-like object ）
        (2).可遍历（ iterable ）的对象（包括 ES6 新增的数据结构 Set 和Map ）
    let allLis = document.querySelectorAll('li'); // 取到所有的li
    console.log(allLis); // NodeList(6)--伪数组 其中length属性是实的
    console.log(Array.isArray(allLis)); // false

    console.log(Array.from(allLis)); // (6) [li,li,li,li,li,li]
    console.log(Array.isArray(Array.from(allLis))); // true

    // Array.of -- 将一组值，转换为数组。
       ·Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。
    console.log(Array.of(1, 2, 3, 4));
    console.log(Array.of('张三', '李四', '王五'));

3. 对象的扩展
    // 当key 和 value是一样的,写一个就够了
    let name = '张三';
    let age  = 18;
    let person = {
        // "name": name, 
        // "age": age
        name,
        age
    };
    console.log(obj);

    // Object.assign()--将多个对象合并给第一个对象，重复的会重新赋值
    let obj1 = {name: '张三'};
    let obj2 = {age: 18};
    let obj3 = {name: '张三222', sex: '男'};
    let obj = {};
    Object.assign(obj, obj1, obj2, obj3);
    console.log(obj); // {name: '张三222', age: 18, sex: '男'}

4. 延展操作符 -- [详情点击](https://zhuanlan.zhihu.com/p/26387033)
    var students = ['Abby','Andy'];
    var otherStudents = ['Jane','Tom'];
    students.push(...otherStudents);
    console.log(students); // Abby Andy Jane Tom

    // 数组去重
    let myArr = [1, 2, 10, '张三', 20, 2, 1];
    console.log([...new Set(myArr)]);
ES6基础语法（七） —— 内置对象扩展

七、内置对象扩展

猜你喜欢
