ECMA6对象的新增方法详解

目录

新增方法:

assign:

keys：

values：

entries：

fromEntries：

JSON对象

JSON.stringify（复杂类型数据转字符串 ）

JSON.parse（字符串转复杂类型数据 ）

应用场景：

---

新增方法:

assign:

作用：assign,将参数2...参数n的值拷贝到参数1上,并生成的新的对象。

注意：基本数据类型深拷贝，复合数据类型浅拷贝

        深浅拷贝：（深值浅址）

用法：Object.assign( 参数1,参数2，参数3 )

示例代码1：（将参数2，参数3的值拷贝到参数1上）

<script>
        // assign,将参数2...参数n的值拷贝到参数1上,并生成的新的对象。(基本数据类型深拷贝，复合数据类型浅拷贝)

        // Object.assign( 参数1,参数2，参数3 )
        let user1 = {
            name:"张三",
            pwd:1234
        };

        let user2 = {
            name:"李四",
            age:"19"            
        };

        let user = Object.assign(user1,user2);
        console.log(user);//{name: '李四', pwd: 1234, age: '19'}
        
</script>

示例代码2：（基本数据类型深拷贝）

    <script>
        //基本数据类型深拷贝
        // Object.assign( 参数1,参数2，参数3 )
        let user1 = {
            name:"张三",
            pwd:1234
        };

        let user2 = {
            name:"李四",
            age:"19"            
        };

        user2.name = "王五";
        let user = Object.assign(user1,user2);
        console.log(user1);//{name: '王五', pwd: 1234, age: '19'}
        
    </script>

示例代码3：

    <script>
        let user1 = {
            username: "张三",
             age: 19
            };
        let user2 = {
            pwd: "123456",
            username: "李四"
         };
        let user3 = {
            isadmin: 1,
            interest: ["读书", "写作"]
        };
        let user = Object.assign(user1, user2, user3);
        user2.username = "王五";
        user3.interest[1] = "跳舞";
        console.log(user);//
        console.log(user1);//
    </script>

运行结果：

keys：

作用：将对象中的键名，以一维数组的形式返回，返回值是数组类型。

用法：Object.keys(对象名)  

示例代码：

    <script>
        let user1 = { 
            username: "张三",
            age: 19,
            gender:"男"
        };
        console.log(Object.keys(user1));//['username', 'age', 'gender']
    </script>

values：

作用：将对象中的键值，以一维数组的形式返回，返回值是数组类型

用法：Object.values(对象名)

示例代码：

<script>
        let user1 = { 
            username: "张三",
            age: 19,
            gender:"男",
            skill:["唱歌","跳舞","弹钢琴"]
        };
        console.log(Object.values(user1));//['张三', 19, '男', Array(3)]
</script>

运行结果：

entries：

作用：以二维数组的形式返回对象的一维数组键值对，返回值是数组类型。

用法：Object.entries(对象名)

示例代码：

<script>
        let user1 = {
            username: "张三",
            age: 19,
            gender: "男",
            skill: ["唱歌", "跳舞", "弹钢琴"]
        };
        console.log(Object.entries(user1));// [Array(2), Array(2), Array(2), Array(2)]
</script>

运行结果：

fromEntries：

作用：将二维数组转换为对象，是entries()的逆运算。

用法：Object. fromEntries( [[key,value], [key,value]] )

示例代码：

    <script>
        let arr = [["姓名","张三"],["年龄",18],["性别","男"]]
        console.log(Object.fromEntries(arr));//{姓名: '张三', 年龄: 18, 性别: '男'}
    </script>

JSON对象

如果我们使用 String、toString等方法，转换为字符串的时候，往往会破坏掉复杂类型数据的数据结构

JSON.stringify 可以保留复杂类型数据的数据结构

JSON.stringify（复杂类型数据转字符串 ）

• 用法：JSON.stringify(要转换的数据)

• 作用：将要转换的数据 转换为字符串 并保留数据的原始数据结构

示例代码：

    <script>
        let user1 = {
            username: "张三",
            age: 19,
            gender: "男",
            skill: ["唱歌", "跳舞", "弹钢琴"]
        };
        console.log(JSON.stringify(user1));//{"username":"张三","age":19,"gender":"男","skill":["唱歌","跳舞","弹钢琴"]}
    </script>

JSON.parse（字符串转复杂类型数据 ）

用法：JSON.parse(指定的字符串)

作用：将字符串 重新转换为 js的复杂类型数据

示例代码：

    <script>
        let str = `{"username":"张三",
        "age":19,
        "gender":"男",
        "skill":["唱歌","跳舞","弹钢琴"]}`;
        console.log(JSON.parse(str));//{username: '张三', age: 19, gender: '男', skill: Array(3)}
    </script>

应用场景：

JSON.stringify和JSON.parse结合使用可以完成数组/对象的深拷贝，不能拷贝函数。

示例代码：

<script>
        let arr = [1,2,5,3,8,5,0];
        // 先将数组转换成字符串，再将字符串转换成数组
        let arr1 = JSON.parse(JSON.stringify(arr));
        console.log(arr1);// [1, 2, 5, 3, 8, 5, 0]
</script>

<script>
        // 应用场景：JSON.stringify和JSON.parse结合使用可以完成数组/对象的深拷贝。
        let arr = [1,2,5,3,8,5,0];
        // 先将数组转换成字符串，再将字符串转换成数组
        let arr1 = JSON.parse(JSON.stringify(arr));
        arr[4] = 100;
        console.log(arr);//[1, 2, 5, 3, 100, 5, 0]
        console.log(arr1);// [1, 2, 5, 3, 8, 5, 0]
</script>