前端学习笔记

120-127JS(对象属性判断,增删改查,解构赋值,深浅拷贝)

2019-05-09  本文已影响2人  饥人谷_island
    // 需求: 判断某一个对象是否拥有某一个属性
    class Person{
        name = null;
        age = 0;
    }
    Person.prototype.height = 0;
    /*
    let p = new Person();
    // in的特点: 只要类中或者原型对象中有, 就会返回true
    console.log("name" in p); // true
    console.log("width" in p); // false
    console.log("height" in p); // true
    */

    // 需求: 判断某一个对象自身是否拥有某一个属性
    let p = new Person();
    // 特点: 只会去类中查找有没有, 不会去原型对象中查找
    console.log(p.hasOwnProperty("name")); // true
    console.log(p.hasOwnProperty("height")); // false

    class Person{}
    let p = new Person();
    // 增加(C)
    // p.name = "lnj";
    p["name"] = "zs";
    // p.say = function(){
    //     console.log("hello world");
    // }
    p["say"] = function(){
        console.log("hello world");
    }
    // console.log(p);

    // 删除(R)
    // delete p.name;
    // delete p["name"];
    // delete p.say;
    // delete p["say"];
    // console.log(p);

    // 修改(U)
    // p.name = "lnj";
    // p["name"] = "ww";
    // console.log(p.name);
    // p.say = function(){
    //     console.log("hi");
    // }
    // p["say"] = function(){
    //     console.log("hi");
    // }
    // p.say();

    // 查询(D)
    // console.log(p.name);
    // console.log(p["name"]);
    p.say();

    1.在JavaScript中对象和数组一样是可以遍历的

    2.什么是对象的遍历?
    对象的遍历就是依次取出对象中所有的属性和方法

    3.如何遍历一个对象?
    在JS中可以通过高级for循环来遍历对象
    以下代码的含义: 将指定对象中所有的属性和方法的名称取出来了依次的赋值给key这个变量
    for(let key in obj){}
    */
    /*
    class Person{
        constructor(myName, myAge){
            this.name = myName;
            this.age = myAge;
        }
        // 注意点: ES6定义类的格式, 会将方法默认放到原型对象中
        say(){
            console.log(this.name, this.age);
        }
    }
    */

    function Person(myName, myAge){
        this.name = myName;
        this.age = myAge;
        this.say = function(){
            console.log(this.name, this.age);
        }
    }
    let p = new Person("LNJ", 34);
    console.log(p);
    for(let key in p){
        if(p[key] instanceof Function){
            continue;
        }
        // console.log(key); // name / age / say
        // 注意点: 以下代码的含义取出p对象中名称叫做当前遍历到的名称的属性或者方法的取值
        console.log(p[key]); // p["name"] / p["age"] / p["say"]
        // 注意点: 以下代码的含义取出p对象中名称叫做key的属性的取值
        // console.log(p.key); // undefined
    }

    注意点:
    对象的解构赋值和数组的解构赋值 除了符号不一样, 其它的一模一样
    数组解构使用[]
    对象解构使用{}
    
    
    // 1.在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构
    let [a, b, c] = [1, 3, 5];
    console.log(a, b, c); // 1 3 5

    // 2.在数组的解构赋值中, 两边的个数可以不一样
    let [a, b] = [1, 3, 5];
    console.log(a, b); // 1 3
    let [a, b, c] = [1, 3];
    console.log(a, b, c); // 1 3 undefined

    // 3.在数组的解构赋值中,如果右边少于左边, 我们可以给左边指定默认值
    let [a, b, c = 666] = [1, 3];
    console.log(a, b, c); // 1 3 666
    */

    // let obj = {
    //     name: "lnj",
    //     age: 34
    // }
    // let name = obj.name;
    // let age = obj.age;
    // let {name, age} = obj;
    // let {name, age} = {name: "lnj",age: 34};
    // console.log(name, age);

    // let {name} = {name: "lnj",age: 34};
    // console.log(name);

    // let {name, age, height} = {name: "lnj",age: 34};
    // console.log(name, age, height);

    // let {name, age, height = 1.80} = {name: "lnj",age: 34};
    // console.log(name, age, height);

    // 注意点: 在对象解构赋值中, 左边的变量名称必须和对象的属性名称一致, 才能解构出数据
    // let {a, b} = {name: "lnj",age: 34};
    // console.log(a, b); // undefined undefined

    let {age} = {name: "lnj",age: 34};
    console.log(age); // 34

    let arr = [1, 3];
    // function sum(a, b) {
    function sum([a, b]) {
        return a + b;
    }
    // let res = sum(arr[0], arr[1]);
    let res = sum(arr);
    console.log(res);
    */
    let obj = {
        name: "lnj",
        age: 34
    }
    // function say(name, age) {
    function say({name, age}) {
        console.log(name, age);
    }
    // say(obj.name, obj.age);
    say(obj);

    1.什么是深拷贝什么是浅拷贝?
    1.1深拷贝
    修改新变量的值不会影响原有变量的值
    默认情况下基本数据类型都是深拷贝

    1.1浅拷贝
    修改新变量的值会影响原有的变量的值
    默认情况下引用类型都是浅拷贝
    */
    // 深拷贝
    /*
    let num1 = 123;
    let num2 = num1;
    num2 = 666; // 修改形变量的值
    console.log(num1);
    console.log(num2);
    */

    // 浅拷贝
    class Person{
        name = "lnj";
        age = 34;
    }
    let p1 = new Person();
    let p2 = p1;
    p2.name = "zs"; // 修改变量的值
    console.log(p1.name);
    console.log(p2.name);

    class Person{
        name = "lnj";
        age = 34;
    }
    let p1 = new Person();
    // 浅拷贝
    // let p2 = p1;
    // p2.name = "zs"; // 修改变量的值

    // 深拷贝
    let p2 = new Object();
    // p2.name = p1.name;
    // p2.age = p1.age;
    // p2.name = "zs";

    // for(let key in p1){
    //     p2[key] = p1[key];
    // }
    // console.log(p2);
    // p2.name = "zs";

    // assign方法可以将第二个参数的对象的属性和方法拷贝到第一个参数的对象中
    Object.assign(p2, p1);
    // console.log(p2);
    p2.name = "zs";
    console.log(p1.name);
    console.log(p2.name);
    // 注意点: 只有被拷贝对象中所有属性都是基本数据类型, 以上代码才是深拷贝

    class Person{
        name = "lnj";
        cat = {
            age : 3
        };
        scores = [1, 3, 5];
    }
    let p1 = new Person();
    let p2 = new Object();
    /*

    // p2.name = p1.name;
    // p2.name = "zs";
    // console.log(p1.name);
    // console.log(p2.name);
    p2.cat = p1.cat;
    p2.cat.age = 666;
    console.log(p1.cat.age);
    console.log(p2.cat.age);
    */

    depCopy(p2, p1);
    // console.log(p2);

    p2.cat.age = 666;
    console.log(p1.cat.age);
    console.log(p2.cat.age);

    function depCopy(target, source) {
        // 1.通过遍历拿到source中所有的属性
        for(let key in source){
            // console.log(key);
            // 2.取出当前遍历到的属性对应的取值
            let sourceValue = source[key];
            // console.log(sourceValue);
            // 3.判断当前的取值是否是引用数据类型
            if(sourceValue instanceof Object){
                // console.log(sourceValue.constructor);
                // console.log(new sourceValue.constructor);
                let subTarget = new sourceValue.constructor;
                target[key] = subTarget;
                depCopy(subTarget, sourceValue);
            }else{
                target[key] = sourceValue;
            }
        }
    }

上一篇 下一篇

猜你喜欢

热点阅读