2023/3/9日笔记对象的展开运算符对象展开运算符的注意事项 --的应用 Set是什么 S实例的方法和属性 S构造函

10-1、对象的展开运算符

1.展开对象

对象的展开：把属性罗列出来，用逗号分隔，放到一个 {} 中，构成新对象

2.合并对象

新对象拥有全部属性，相同属性，后者覆盖前者

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-1、对象的展开运算符</title>
</head>
<body>
    <script>
        // 1.展开对象
        // const apple = {
        //     coolor: "红色",
        //     shape: "球形",
        //     taste: "甜",
        // };
        // console.log(...apple);
        // console.log([...apple]);
        
        // 对象的展开：把属性罗列出来，用逗号分隔，放到一个 {} 中，构成新对象
        // console.log({...apple});
        // console.log({...apple} === apple);
        
        // 2.合并对象
        const apple = {
            coolor: "红色",
            shape: "球形",
            taste: "甜",
        };
        const pen = {
            coolor: "黑色",
            shape: "圆柱形",
            use: "写字",
        };
 
        // console.log({...apple,...pen});
        // 新对象拥有全部属性，相同属性，后者覆盖前者
        // console.log({...pen,...apple});
        // 相当于
        // console.log({
        //     // coolor: "黑色",
        //     // shape: "圆柱形",
        //     use: "写字",
        //     coolor: "红色",
        //     shape: "球形",
        //     taste: "甜",
        // });

        console.log({pen,apple});
        // console.log({...pen,apple});
    </script>
</body>
</html>

10-2、对象展开运算符的注意事项

1.空对象的展开

如果展开一个空对象，则没有任何效果

2.非对象的展开

如果展开的不是对象，则会自动将其转为对象，再将其属性罗列出来
如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象

3.对象中对象属性的展开

不会展开对象中的对象属性

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-2、对象展开运算符的注意事项</title>
</head>

<body>
    <script>
        // 1.空对象的展开
        // 如果展开一个空对象，则没有任何效果
        // console.log({...{}});
        // console.log({...{},a:1});

        // 2.非对象的展开
        // 如果展开的不是对象，则会自动将其转为对象，再将其属性罗列出来
        // console.log({...1});
        // console.log(new Object(1));
        // console.log({...undefined});
        // console.log({...null});
        // console.log({...true});

        // 如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象
        // console.log({..."Alex"});
        // console.log([..."Alex"]);
        // console.log(..."Alex");

        // console.log({...[1,2,3]});

        // 3.对象中对象属性的展开
        // 不会展开对象中的对象属性
        const apple = {
            feature: {
                taste: "甜",
            }
        };
        const pen = {
            feature: {
                color: "黑色",
                shape: "圆柱形",
            },
            use: "写字",
        };
        // console.log({...apple});
        // console.log({...apple,...pen});
        // 相当于
        // console.log({
        //     // feature: {
        //     //     taste: "甜",
        //     // },
        //     feature: {
        //         color: "黑色",
        //         shape: "圆柱形",
        //     },
        //     use: "写字",
        // });
    </script>
</body>

</html>

10-3、对象展开运算符的应用

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-3、对象展开运算符的应用</title>
</head>

<body>
    <script>
        // 1.复制对象
        // const a = {x:1,y:2};
        // // const b = a;
        
        // const c = {...a};
        // console.log(c,c === a);

        // 2.用户参数和默认参数
        // add(1,2);
        // const logUser = ({
        //     username = "ZS",
        //     age = 0,
        //     sex = "male",
        // } = {}) => {
        //     console.log(username,age,sex);
        // };

        const logUser = userParam => {
            const defaultParam = {
                username:"ZS",
                age:0,
                sex:"male",
            };

            // const param = {...defaultParam,...userParam};
            // console.log(param.username);

            const {username,age,sex} = {...defaultParam,...userParam};
            console.log(username,sex,age);
        }
        // logUser();
        logUser({username:"ZZZZZZZZSSSSSSSSSS",age:20});
    </script>

</body>

</html>

11-1、Set是什么

什么是 Set

英文翻译：集合
Set 是一系列无序，没有重复值的数据集合

理解 Set

Set 中不能有重复的成员
Set 没有下标去标识每一个值，所以 Set 是无序的，也不能像数组那样通过下标去访问 Set 的成员

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-1、Set是什么</title>
</head>
<body>
    <script>
        // 1.什么是 Set
        // 英文翻译：集合       但是这个集合是不严谨的，所以都叫它Set

        // [1,2]
        // 数组是一系列有序的数据集合

        // Set 是一系列无序，没有重复值的数据集合

        // 2.理解Set
        // console.log([1,2,1]);
        // console.log(new Array(1,2,1));

        const s = new Set();
        s.add(1);
        s.add(2);

        // Set 中不能有重复的成员
        s.add(1);
        console.log(s);

        // Set 没有下标去标识每一个值，所以 Set 是无序的，也不能像数组那样通过下标去访问 Set 的成员
        
    </script>
</body>
</html>

11-2、Set实例的方法和属性

1.方法

add : 添加
has：判断小组成员是否含有某数
delete:删除数组中某个值
- 使用 dele 删除不存在的成员，什么都不会发生，也不会报错
clear：清空
forEach : 遍历
- 按照成员添加进集合的顺序遍历
- 如果用的是三角函数，则更改this指向属性会失效，this始终指向window

2.属性

size：相当于length方法

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-2、Set实例的方法和属性</title>
</head>

<body>
    <script>
        // 1.方法
        // add : 添加
        const s = new Set();
        s.add(1).add(2).add(2);
        // console.log(s);

        // has：判断小组成员是否含有某数
        // console.log(s.has(1));
        // console.log(s.has(3));

        // delete:删除数组中某个值
        // s.delete(2);

        // 使用 dele 删除不存在的成员，什么都不会发生，也不会报错
        // s.delete(3);
        // console.log(s);

        // clear：清空
        // s.clear();
        // console.log(s);

        // forEach : 遍历   value:数组中每个成员
        // s.forEach(function (value, key, set) {
        //     // Set 中 value = key 
        //     // console.log(value,key,set);
        //     console.log(value, key, set === s);
        //     console.log(this);
        //     // doncument:这里写的是this指向，也可更改为其他
        // }, document)
        // console.log(s);

        // 按照成员添加进集合的顺序遍历

        // 如果用的是三角函数，则更改this指向属性会失效，this始终指向window
        // s.forEach((value, key, set) => {
        //     // Set 中 value = key 
        //     // console.log(value,key,set);
        //     console.log(value, key, set === s);
        //     console.log(this);
        //     // doncument:这里写的是this指向，也可更改为其他
        // }, Object)

        // 2.属性
        // size
        console.log(s.size);
        console.log(s);
    </script>
</body>

</html>

11-3、Set构造函数的参数

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-3、Set构造函数的参数</title>
</head>
<body>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <script>
        // 1.数组
        // const s = new Set([1,2,1]);
        // console.log(s);

        // 2.字符串、arguments、NodeList、Set 等
        // console.log(new Set('hi'));
        // function func() {
        //     console.log(new Set(arguments));
        // };
        // func(1,2,1);
        // console.log(new Set(document.querySelectorAll('p')));

        const s = new Set([1,2,1]);
        console.log(new Set(s) === s);
        console.log(s);
    </script>
</body>
</html>

11-4、Set的注意事项

Set 对重复值的判断基本遵循严格相等（===）

但是对于 NaN 的判断与 === 不同，Set 中 NaN 等于 NaN

即便是两个一样的空数组，只要不是同一内存地址，就不相等

2.什么时候用Set

① 数组或字符串去重时
② 不需要通过下标访问，只需要遍历时
③ 为了使用 Set 提供的方法和属性时（add delete clear has forEach size 等）

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-4、Set的注意事项</title>
</head>

<body>
    <script>
        // 1.判断重复的方式
        // const s = new Set([1, 2, 1]);
        // const s = new Set([NaN, 2, NaN]);

        // console.log(1 === 1);
        // console.log(NaN === NaN);

        // Set 对重复值的判断基本遵循严格相等 （===） 
        // 但是对于 NaN 的判断与 === 不同，Set 中 NaN 等于 NaN
        // console.log(s);

        // 即便是两个一样的空数组，只要不是同一内存地址，就不相等
        // const s = new Set();
        // s.add({}).add({});
        // console.log({} === {});;
        // console.log(s);

        // 2.什么时候用Set
        // ① 数组或字符串去重时
        // ② 不需要通过下标访问，只需要遍历时
        // ③ 为了使用 Set 提供的方法和属性时 （add delete clear has forEach size 等）
    </script>
</body>

</html>

11-5、Set的应用

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-5、Set的应用</title>
</head>

<body>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <script>
        // 1.数组去重
        // [1,2,1];

        // const s = new Set([1,2,1]);
        // console.log(s);

        // let arr = [];
        // s.forEach(function(elme) {
        //     arr.push(elme) 
        // });
        // console.log(arr);

        // console.log(...s);
        // console.log([...s]);
        // console.log([...new Set(1,2,1)]);

        // 2.字符串去重
        // "dffijlkfdhfldf"
        // const s = new Set("dffijlkfdhfldf");
        // console.log([...s].join(""));
        // console.log(s);

        // console.log([...new Set("dffijlkfdhfldf")].join(""));

        // 3.存放DOM元素
        // console.log(document.querySelectorAll("p"));
        // for();

        const s = new Set(document.querySelectorAll("p"));
        console.log(s);
        s.forEach(function(elem){
            elem.style.color = 'red';
            elem.style.backgroundColor = 'yellow'
        });
    </script>
</body>

</html>

12-1、Map是什么

1.认识Map

英文翻译：映射
Map和对象都是键值对的集合

2.Map 和对象的区别

对象一般用字符串当作键
在对象中键其实就是字符串，只不过在对象中是合法标识符，能省略引号罢了

Map 的键

基本数据类型：数字、字符串、布尔值、undefined、null
引用数据类型：对象、([]、{}、函数、Set、Map 等)
以上都可以作为 Map 的键

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-1、Map是什么</title>
</head>
<body>
    <script>
        // 1.认识Map
        // 英文翻译：映射

        // Map和对象都是键值对的集合

        // 键 -> 值,key -> value
        // const person = {
        //     name:'alex',
        //     age:18,
        // };


        // const m = new Map();
        // m.set('name','alex').set('age',12);
        // console.log(m);

        // 2.Map 和对象的区别
        // 对象一般用字符串当作键
        // const obj = {
        //     // 'name':'alex',   在对象中键其实就是字符串，只不过在对象中是合法标识符，能省略引号罢了
        //     name:'alex',
        //     true:true,
        //     // {}: 'object'
        //     [{}]: 'object'
        // }
        // console.log(obj);
        // console.log({}.toString());

        // 基本数据类型：数字、字符串、布尔值、undefined、null
        // 引用数据类型：对象、([]、{}、函数、Set、Map 等)
        // 以上都可以作为 Map 的键
        const m = new Map();
        m.set('name','alex').
        set(true,"true").
        set({},'object').
        set(new Set([1,2,3,1]),'set').
        set(undefined,'undefined').
        set(null,'null');
        console.log(m);
    </script>
</body>
</html>

12-2、Map实例的方法和属性

1.方法

set 添加键值对
get 获取键对应的值
has
delete
- 使用 delete 删除不存在的成员，什么都不会发生，也不会报错
clear
forEach

2.属性

size
对象没有类似的属性

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-2、Map实例的方法和属性</title>
</head>
<body>
    <script>
        // 1.方法
        // set   添加键值对
        const m = new Map();

        // 使用 set 添加的新成员，键如果已经存在，后添加的键值对覆盖已有的
        m.set('age',18).set(true,"true").set("age",20);
        // console.log(m);

        // set get 添加 获取

        // get 获取键对应的值
        console.log(m);
        // console.log(m.get("age"));
        // // get 获取不存在的成员，返回undefined
        // console.log(m.get("true"));
        // console.log(m.get(true));

        // has 
        // console.log(m.has('age'));
        // console.log(m.has('true'));

        // delete
        // m.delete("age");
        // // 使用 delete 删除不存在的成员，什么都不会发生，也不会报错
        // m.delete("name");
        // console.log(m);

        // clear
        // m.clear();
        // console.log(m);

        // forEach          这里的 value 和 key 就和 set 不一样了，这里的 value 代表值， key 代表键
        // m.forEach(function(value,key,map){
        //     console.log(value,key,map);
        //     console.log(value,key,map === m);
        //  // 这里的documen和Set一样，都是this指向
        // },document);

        // 2.属性
        // size
        // 对象没有类似的属性
        console.log(m.size);
    </script>
</body>
</html>

12-3、Map构造函数的参数

只能传二维数组，而且必须体现出键和值
Set 中也必须体现出键和值

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-3、Map构造函数的参数</title>
</head>
<body>
    <script>
        // 1.数组
        // console.log(new Map(['name','alex','age',18]));   X
        // 只能传二维数组，而且必须体现出键和值

        console.log(
            new Map([
                ['name','alex'],
                ['age',18]
            ])
        );
        // 2.Set、Map 等
        // Set
        // Set 中也必须体现出键和值
        const s = new Set([
            ['name','alex'],
            ['age',18]
        ]);
        console.log(new Map(s));
        console.log(s);

        // Map
        const m1 = new Map([
            ['name','alex'],
            ['age',18]
        ]);
        console.log(m1);
        console.log(new Map(m1),new Map(m1) === m1);
    </script>
</body>
</html>

12-4、Map的注意事项

1.判断键名是否相同的方式

基本遵循严格相等（===）
例外就是 NaN，Map 中 NaN 也是等于 NaN

2.什么时候使用 Map

代码案例

如果只是需要 key -> value 的结构，或者需要字符串以外的值做键，使用 Map 更合适
只有模拟现实世界的实体时，才使用对象

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-4、Map的注意事项</title>
</head>
<body>
    <script>
        // 1.判断键名是否相同的方式
        // 基本遵循严格相等（===）
        
        // 例外就是 NaN，Map 中 NaN 也是等于 NaN
        // console.log(NaN === NaN);
        // const m = new Map();
        // m.set(NaN,1).set(NaN,2);
        // console.log(m);

        // 2.什么时候使用 Map
        // 如果只是需要 key -> value 的结构，或者需要字符串以外的值做键，使用 Map 更合适
        // forEach for in 
        // size
        
        // 只有模拟现实世界的实体时，才使用对象
        const person = {};
        
    </script>
</body>
</html>

12-5、Map的应用

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-5、Map的应用</title>
</head>
<body>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <script>
        const [p1,p2,p3] = document.querySelectorAll("p");
        // console.log(p1,p2,p3);
        // const m = new Map();
        // m.set(p1,'red')
        // m.set(p2,'green')
        // m.set(p3,'yellow')

        const m = new Map([
            [p1,{
                color:'red',
                backgroundColor:'blue',
                fontSize:'40px',
            }],
            [p2,{
                color:'green',
                backgroundColor:'yellow',
                fontSize:'40px',
            }],
            [p3,{
                color:'#fff',
                backgroundColor:'#000',
                fontSize:'40px',
            }],
            // [p2,'green'],
            // [p3,'yellow'],
        ]);
        m.forEach((propObj,ky) => {
            for(let p in propObj) {
                ky.style[p] = propObj[p];
            }
        });
        // m.forEach((color,ky) => {
        //     ky.style.color = color;
        // });
        console.log(m);
    </script>
</body>
</html>

2023/3/9日笔记

10-1、对象的展开运算符

1.展开对象

2.合并对象

代码案例

10-2、对象展开运算符的注意事项

1.空对象的展开

2.非对象的展开

3.对象中对象属性的展开

代码案例

10-3、对象展开运算符的应用

代码案例

11-1、Set是什么

什么是 Set

理解 Set

代码案例

11-2、Set实例的方法和属性

1.方法

2.属性

代码案例

11-3、Set构造函数的参数

代码案例

11-4、Set的注意事项

Set 对重复值的判断基本遵循严格相等 （===）

但是对于 NaN 的判断与 === 不同，Set 中 NaN 等于 NaN

即便是两个一样的空数组，只要不是同一内存地址，就不相等

2.什么时候用Set

代码案例

11-5、Set的应用

代码案例

12-1、Map是什么

1.认识Map

2.Map 和对象的区别

Map 的键

代码案例

12-2、Map实例的方法和属性

1.方法

2.属性

代码案例

12-3、Map构造函数的参数

代码案例

12-4、Map的注意事项

1.判断键名是否相同的方式

2.什么时候使用 Map

代码案例

12-5、Map的应用

代码案例

Set 对重复值的判断基本遵循严格相等（===）