es6(四) （包含深浅拷贝）

1.Set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集合</title>
</head>
<body>
    <script>
        //创建一个 Set
        let s = new Set();
        let s2 = new Set([1,2,3,4,5,5]); //自动去重

        //属性
        // console.log(s2.size);// length
        //方法
            //添加
            // s2.add(6);
            //删除
            // s2.delete(1);
            //检测是否存在
            // console.log(s2.has(20));// have 有
            //清空
            // s2.clear();
            // console.log(s2);

            //遍历Set
            // for(let v of s2){
            //     console.log(v);
            // }
    </script>
</body>
</html>

2.set集合实践

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实践</title>
</head>

<body>
    <script>
        let arr = [1, 2, 10, 1, 3, 5, 2, 3];
        let arr2 = [1, 4, 6, 8, 10];
        //1. 数组去重
        // let s = new Set(arr);
        // let newArr = [...s];
        // console.log(newArr);
        //2. 交集
        // let inter = [...new Set(arr)].filter(function(item){
        //     let s = new Set(arr2);
        //     return s.has(item);
        // });
        // let inter = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        //3. 并集
        // let union = [...new Set([...arr, ...arr2])];
        // console.log(union);
        //4. 差集
        // let diff = [...new Set(arr2)].filter(item => !(new Set(arr).has(item)));
        // console.log(diff);
    </script>
</body>

</html>

3.对象申明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象声明</title>
</head>
<body>
    <script>
        //通过构造函数创建对象
        // function Phone(brand, price){
        //     this.brand = brand;
        //     this.price = price;
        // }

        // Phone.prototype.call = function(someone){
        //     console.log("我可以打电话给" + someone);
        // }

        // //实例化
        // const huawei = new Phone("华为", 1999);
        // huawei.call("赵丽颖");// 朋友圈

        class Phone{
            //构造方法
            // 1. 名字固定的
            // 2. 构造方法只能有一个
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }

            //声明实例对象的方法
            call(someone){
                console.log(`我可以给${someone}打电话`);
            }
        }

        //实例化对象
        let oppo = new Phone('oppo', 999);
        console.log(oppo);
        oppo.call('刘渊')


    </script>
</body>
</html>

4.对象静态属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态成员</title>
</head>
<body>
    <script>
        //静态成员
        // function Phone(brand, price){
        //     this.brand = brand;
        //     this.price = price;
        // }
        // Phone.name = "手机";
        // Phone.change = function(){
        //     console.log("改变了世界");
        // }
        // Phone.change();

        //class 版本
        class Phone{
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            //添加静态成员
            static name = "手机";
            static change(){
                console.log("我改变了人们的通信习惯")
            }
        }
        
        //static 成员是属于类这个对象的
        Phone.change();
        console.log(Phone.name);

        //实例对象
        let xiaomi = new Phone('小米', 699);
        console.log(xiaomi.name);
    </script>
</body>
</html>

对象继承

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象继承</title>
</head>

<body>
    <script>
        //对象的继承
        //普通手机
        // function Phone(brand, price){
        //     this.brand = brand;
        //     this.price = price;
        // }
        // Phone.prototype.call = function(){ 
        //     console.log("我可以打电话哦!!!");
        // }

        // //智能手机
        // function SmartPhone(brand, price, screen, pixel){
        //     //调用父类函数实现属性的初始化
        //     Phone.call(this, brand, price);
        //     //设置当前独有的属性
        //     this.screen = screen;
        //     this.pixel = pixel;
        // }

        // SmartPhone.prototype = new Phone;
        // SmartPhone.prototype.constructor = SmartPhone;

        // SmartPhone.prototype.playGame = function(){
        //     console.log("可以玩游戏");
        // }

        // SmartPhone.prototype.learn = function(){
        //     console.log("可以学习");
        // }

        // //实例化对象
        // let chuizi = new SmartPhone('锤子',2499, '5inch', '500w');
        // chuizi.call();
        // console.log(chuizi);


        class Phone{
            //父类初始化
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            call(){
                console.log("我可以打电话");
            }
        }

        class SmartPhone extends Phone{
            //子类初始化
            constructor(brand, price, screen, pixel){
                //调用父类的 constructor 初始化brand 和 price 属性
                super(brand, price);
                //初始化子类的属性
                this.screen = screen;
                this.pixel = pixel;
            }

            //方法的添加
            playGame(){
                console.log("我可以玩游戏");
            }

            takePhoto(){
                console.log("我可以拍照")
            }

            //重写
            call(){
                console.log("我可以进行视频通话!!");
            }
        }

        let onePlus = new SmartPhone("1+", 2569, '4.7inch', '500w');

        console.log(onePlus);
        //调用子类的方法
        onePlus.takePhoto();
        onePlus.call();





    </script>
</body>

</html>

对象扩展

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象扩展</title>
</head>

<body>
    <script>
        //1. 判断两个值是否完全相等  ===
        // console.log(Object.is(10, 10));
        // console.log(Object.is(10, '10'));
        // console.log(Object.is(NaN, NaN));// true

        //2. Object.assign 对象的合并
        // let c1 = {
        //     port: 8000,
        //     root: 'c:/abc'
        // };
        // let c2 = {
        //     port: 7000,
        //     root: 'd:/eaf',
        //     name: 'c2'
        // };
        // Object.assign(c1, c2);
        // console.log(c1)

        //3. 直接修改 __proto__ 设置原型
        let a = {name:"abc"};
        let b = {age:20};
        a.__proto__ = b;
        console.log(a);

    </script>
</body>

</html>

浅拷贝

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浅拷贝</title>
</head>

<body>
    <script>

        //1. 直接复制，引用数据类型地址也复制了
        // let arr = [1,2,3];
        // let newArr = arr;
        // newArr[0] = 5211314;
        // console.log(arr);
        // console.log(newArr);

        //2. 数组  
            // var arr = [1,2,3,4,{name:'尚硅谷'}];
            // 1> concat,修改基本数据类型，旧数组不影响原数组
            // 修改引用数据类型的属性，旧数组影响原数组
            // 修改引用数据类型地址，旧数组不影响原数组
            // var newArr = [].concat(arr);  //数组连接
            newarr[0]=9;
            // newarr[3]={age:15}
            newarr[3].name='li'
            console.log(arr)
            console.log(newarr)
            
            // 2> slice，修改基本数据类型，旧数组不影响原数组
            // 修改引用数据类型的属性，旧数组影响原数组
            // 修改引用数据类型地址，旧数组不影响原数组
            // var newArr = arr.slice(0); //数组分割

            // 3> 扩展运算符,修改基本数据类型，旧数组不影响原数组
            // 修改引用数据类型的属性，旧数组影响原数组
            // 修改引用数据类型地址，旧数组不影响原数组
            // var newArr = [...arr];

            // newArr[4].name = "atguigu";
            // console.log(arr)
            // console.log(newArr);
        //3. 对象
            // assign, 对于引用类型数据，属性修改，新旧数组指引的是同一个地址
            let school = {
                name: "atguigu",
                cities: ['北京','上海','深圳']
            };
            let newSchool = {};
            Object.assign(newSchool, school);
            newSchool.cities[0] = "BEIJING";
            console.log(newSchool)
            console.log(school);

    </script>
</body>

</html>

深拷贝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深拷贝-JSON</title>
</head>
<body>
    <script>
        //声明一个对象
        let school = {
            name: "尚硅谷",
            cities: ['深圳','上海','北京'],
            change: function(){
                console.log("可以改变你!!");
            }
        };

        //1. JSON.stringify 将对象转为字符串,新旧对象改变了，互相不影响
        let str = JSON.stringify(school);
        //2. JSON.parse 将字符串转为对象
        let newSchool = JSON.parse(str);

        //注意: JSON 不能转化对象的方法数据

        newSchool.cities[0] = 'SHENZHEN';
        console.log(school);  //{name: "尚硅谷", cities: Array(3), change: ƒ}
        console.log(newSchool);  //{name: "尚硅谷", cities: Array(3)}



    </script>
</body>
</html>

递归实现深拷贝

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>递归实现深拷贝 - 思路</title>
</head>

<body>
    <script>
        let school = {
            name: "尚硅谷",
            cities: ['深圳','上海','北京'],
            founder:{
                name: "刚哥",
                age: 43
            },
            change: function(){
                console.log("可以改变你!!");
            }
        };
        let arr = [1,2,3, {name:'abc'}];
        //1. 创建一个空的对象
        let newSchool = {};// 
        // let newSchool = [];// 
        //拷贝第一个基本数据类型的属性
        newSchool['name'] = school['name'];
        //拷贝第二个
        // newSchool['cities'] = school.cities;
        newSchool['cities'] = [];
        newSchool['cities'][0] = school['cities'][0];
        newSchool['cities'][1] = school['cities'][1];
        newSchool['cities'][2] = school['cities'][2];
        //拷贝第三个
        newSchool['founder'] = {};
        newSchool['founder'].name = school['founder'].name;
        newSchool['founder'].age = school['founder'].age;
        //拷贝第四个
        newSchool['change'] = school['change'].bind(newSchool);


        console.log(school)
        console.log(newSchool);


    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深拷贝</title>
</head>

<body>
    <script>
        let school = {
            name: "尚硅谷",
            cities: ['深圳', '上海', '北京'],
            founder: {
                name: "刚哥",
                age: 43
            },
            change: function () {
                console.log("可以改变你!!");
            }
        };

        //声明函数
        function deepClone(data) {
            //创建一个容器存放所有的属性 
            let type = getDataType(data);
            //创建容器
            let container;
            if (type === 'Object') {
                container = {};
            } else if (type === "Array") {
                container = [];
            } else {
                return data;
            }
            //遍历 for...in 也能遍历数组
            for (let i in data) {
                //判断 data[i] 的类型
                let type = getDataType(data[i]);
                if (type === 'Object' || type === 'Array') {
                    //递归调用
                    // container[i] = deepClone(data[i]);
                    container[i] = deepClone(data[i]);
                }else if(type === 'Function'){
                    //函数类型
                    container[i] = data[i].bind(container);
                }else{
                    //基本数据类型
                    container[i] = data[i];
                }
            }

            return container;

        }
        let newSchool = deepClone(school);

        newSchool.cities[0] = "BEIJING";
        newSchool.founder.age = 18;

        console.log(newSchool);
        console.log(school);


        //用来获取数据的类型
        // **Object.toString() : ** 返回 “[Object type]”,type 是对象的类型。
        function getDataType(data) {
            let result = Object.prototype.toString.call(data).slice(8, -1);
            return result;
        }
    </script>
</body>

</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fsg6/p/14550011.html