首页看下函数编程的写法

    let name = '向军'
    let grade = [
        {name: 'js', score: 99},
        {name: 'php', score: 76}
    ];
    function average(a, b) {
        let total = a.reduce((t, l) => t + l.score, 0);
        return `${b}平均成绩是${total / grade.length}`
    }
    console.log(average(grade, name));

//使用函数式编程
//把一些全局变量，函数暴露在了外面 会导致全局污染，函数覆盖的一些问题，
// 导致代码后期报错起来很难解决

接下来再看看对象编程，修改上面的代码

    let user = {
        name: '向军',
        grade: [{name: 'js', score: 99}, {name: 'php', score: 76}],
        init() {
            this.average(this.grade, this.name);
        },
        average(a, b) {
            let total = a.reduce((t, l) => t + l.score, 0);
            console.log(`${b}平均成绩是${total / grade.length}`);
        }
    };
    user.init();

结果是一模一样的
但是对象式编程，减少了函数过多的覆盖，全局变量的污染，代码清晰

js对象属性的基本操作

    let user = {
        name: '向军',
        'my age': 18
    }
    console.log(user.name); //向军
    console.log(user['name']); //向军
    console.log(user['my age']); //一般扣号获取 获取一些不常规的key值

    //增 向数组中 增 加属性
    user.age = 19;
    user.get = function () {
        return `${this.name}的年龄是${this.age}`
    }
    console.log(user.get());// 向军的年龄是19

    //删 删除数组中的某个数组
    delete user.age+
    console.log(user.get()); //undefined

对象的引用地址

//对象是引用类型这里是把地址赋值给了 hd 所以一改 user 也会改

    let user = {
        name: 'kang'
    };
    let hd = user;
    hd.age = 18;
    console.log(hd); // {name: 'kang', hd: 18}

//使用展开语法参数合并

    //let arr = [1, 2, 3];
    //let a = [...arr, 1, 2, 3];
    let user = {
        name: 'kang',
        age: 18
    };
    let hd = {...user, age: 10}; //展开语法，遇到相同的 age会替换掉 user里面的age
    console.log(hd); // {name: 'kang', age: 10}

//使用展开语法模拟用户上传

 function unload(params) {
        let config = {
            type: '*.jpg, *.png',
            size: 1000
        }
        //展开语法遇到相同的 后面的就会替换相同的
        config = {...config, ...params};
        console.log(config);
    }
    unload({type: '*gif', size: 100})

// 结构赋值

    // 把单个值转换成对象 用结构赋值
    let name = 'kang',
        age = 18

    let opt = {name, age};
    console.log(opt); //{name: 'kang', age: 18}

多层对象的结构赋值

    let user = {
        name: 'js',
        lesson: {
            title: {
                title1: 'JavaScript'
            }
        }
    }
    let {name, lesson:{ title:{ title1 } } } = user;
    console.log(name, title1); //js, JavaScript

结构赋值默认值

//数组赋值默认值
    let arr = ['kang', 18];
    let [a, b, c = '男'] = arr; // c 默认赋值
    console.log(a, b, c); //kang, 18, 男

    //对象赋值默认值
    let obj = { name: 'kang', age: 18, sex: '女'};
    let {name, age, sex= '男'} = obj; //有值就不用默认值男
    console.log(name, age, sex); //kang, 18, 男

使用赋值默认值写一个小demo

 function createElement(option= {}) {
        //默认是一个空对象，当实参传过来什么 就替换， 如不传 就使用默认值
        let {width= 100, height= 200, backgroundColor= 'red'} = option;
        console.log(width, height, backgroundColor);
    }
    createElement({width: 200})

函数参数的解构特性技巧

function hd([name, age]) {
        console.log(name, age);
    }
    hd(['kang', 18]);
    //函数结构赋值相当于
    //let [name, age] = ['kang', 18];

检测对象中是否存在某个属性

1.使用in 该方法可以判断对象的自有属性和继承来的属性是否存在。

    let o = { x: 1 };
    "x" in o;            //true，自有属性存在
    "y" in o;            //false
    "toString" in o;     //true，是一个继承属性

2.使用hasOwnProperty()方法

   var o={x:1};
   o.hasOwnProperty("x");    　　 //true，自有属性中有x
   o.hasOwnProperty("y");    　　 //false，自有属性中不存在y
   o.hasOwnProperty("toString"); //false，这是一个继承属性，但不是自有属性

计算属性assign

    let a = {a: 1}
    let b = {b: 2};
    let ab = {...a, ...b};
    console.log(ab); // {a: 1, b: 2}

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

    let ab1 = Object.assign({a: 1}, {b: 2});
    console.log(ab1); // {a: 1, b: 2}

对象浅拷贝多种操作方法

//对象的深拷贝与浅拷贝的区别如下：
//浅拷贝：仅仅复制对象的引用，而不是对象本身；
//深拷贝：把复制的对象所引用的全部对象都复制一遍。

//浅拷贝2-只复制一层对象的属性，如果对象中的属性值是对象，浅拷贝并不会复制对象属性中的属性

 let hd = {
        name: 'kang',
        url: 'www.baidu.com',
    }
    let cms = {}
    for (const key in hd){
        cms[key] = hd[key];
    }
    cms.name = 'kangkang'
    console.log(cms); //{name: 'kangkang', url: 'www.baidu.com'}
    console.log(hd); // {name: 'kang', url: 'www.baidu.com'}

//assign 浅拷贝- 只复制一层对象的属性，如果对象中的属性值是对象，浅拷贝并不会复制对象属性中的属性

  let hd = {
        name: 'kangkang',
        url: 'www.baidu.com',
        time: ['13', '15'],
        person: {
            name: 'Henry'
        }
    }
    let cms = Object.assign({}, hd);
    cms.name = 'kang'; //不会改变hd得person值
    cms.time[1] = '16'; //会改变hd的time值
    cms.person.name = 'hhh'; //会改变hd下的person值
    console.log(hd);

//展开语法浅拷贝 - 只复制一层对象的属性，如果对象中的属性值是对象，浅拷贝并不会复制对象属性中的属性

    let hd = {
        name: 'kangkang',
        url: 'www.baidu.com',
        time: ['13', '15'],
        person: {
            name: 'Henry'
        }
    }
    let cms = {...hd};
    cms.name = 'kang1' //不会改变hd的name值
    cms.time[1] = '16'; //会改变hd的time值
    cms.person.name = 'hhh'; //会改变hd下的person值