es6 对象、函数扩展

对象扩展

1.对象简写
2.对象属性 表达式
3.扩展运算符…
4.Object.assign
5.Object.is

一、对象简写

        let name2 = "starry";
        let obj = {
            name1:name1, //键值对名字一样，变量已经声明，可以用 name2 的方式简写
            name2,
            text1:function(){
                //传统函数属性写法，可以用 text2 的方式简写
            },
            text2(){
                
            }
        }

二、对象属性 表达式
给对象的属性名加上【】号，使其可以像变量一样灵活

        let name = "starry";
        let obj = {
            [name]:18,
            [name + "2"]:19
        }
        console.log(obj) //{starry: 18, starry2: 19}
        -----------------------------------------
        //修改name，obj也随之改变
        let name = "A";
        let obj = {
            [name]:18,
            [name + "2"]:19
        }
        console.log(obj) //{A: 18, A2: 19}

三、扩展运算符

        //复制对象
        let obj = {
            name:"starry"
        }
        let obj1 = {
            ...obj
        }
        console.log(obj1) //{name: 'starry'}
        //合并对象
        let obj2 = {
            name:"AAA",
            age:18
        }
        let obj3 = {
            ...obj,...obj2
        }
        console.log(obj3) // {name: 'AAA', age: 18} ！！合并中如果出现相同的属性名，如此处的name，则后面的会覆盖前面的

四、Object.assign
这个方法也是合并对象的方法，需要注意的是这个方法会把合并结果给到第一参数上，这里就改变了obj1，所以使用这个方法时最好创建一个新的空对象

        let obj1 = {
            name:"A"
        }
        let obj2 = {
            age:18
        }
        let obj3 = {
            name:"B"
        }
        console.log({...obj1,...obj2,...obj3}) //name: 'B', age: 18} //展开运算符合并方法放在此处对比
        console.log(Object.assign(obj1,obj2,obj3)) //{name: 'B', age: 18} 
        console.log(obj1) //{name: 'B', age: 18} 

五、Object.is
这个方法用于判断两对对象是否相等，和 === 号非常类似，基本等同，都是既判断类型，也判断值，不同的是关于NaN和正零负零的判断有所不同

        console.log(Object.is(10,10)) //true
        console.log(Object.is(5,"5")) //false
        console.log(Object.is({},{})) //false  //两个对象是否相等判断不了，返回false
        console.log(Object.is(NaN,NaN)) //ture 
        console.log(NaN === NaN) //false
        console.log(Object.is(parseInt("starry"),NaN)) //ture
        console.log(Object.is(-0,+0)) // false
        console.log(-0 === +0) // ture

对象常用方法回顾
1.Object.keys()：返回一个包含对象所有可枚举属性的数组。

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys); // 输出: ["a", "b", "c"]

2.Object.values()：返回一个包含对象所有可枚举属性值的数组。

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // 输出: [1, 2, 3]

3.Object.entries()：返回一个包含对象所有可枚举属性键值对的数组。

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries);
// 输出:
// [["a", 1], ["b", 2], ["c", 3]]

4.Object.assign()：复制一个或多个对象的属性到目标对象，并返回目标对象。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj);
// 输出:
// { a: 1, b: 2, c: 3, d: 4 }

5.Object.hasOwnProperty()：检查对象是否具有指定的属性（不包括原型链）。

const obj = { a: 1, b: 2 };
console.log(obj.hasOwnProperty("a")); // 输出: true
console.log(obj.hasOwnProperty("toString")); // 输出: false

6.Object.freeze()：冻结对象，使其属性无法修改、添加或删除。

const obj = { a: 1, b: 2 };
Object.freeze(obj);

obj.c = 3;
delete obj.a;
obj.b = 4;

console.log(obj); // 输出: { a: 1, b: 2 }

7.Object.seal()：封闭对象，使其属性可以修改但不能添加或删除。

const obj = { a: 1, b: 2 };
Object.seal(obj);

obj.a = 3;
obj.c = 4;
delete obj.b;

console.log(obj); // 输出: { a: 3, b: 2 }

函数扩展

1.函数参数的默认值
2.-rest 剩余参数
3.name属性
4.箭头函数！！！
一、函数参数的默认值

        function ajax(url,method = "get",async = true){ // 传参时设置默认值
            console.log(url,method,async)
        }
        ajax("/aaa","post",false) //  /aaa post false
        ajax("/bbb") //  /bbb get true
        ajax("/ccc","post") //  /ccc post true

二、-rest 剩余参数

        function text(...data){
            console.log(data)
        }
        text(1,2,3,4,5) //[1, 2, 3, 4, 5]  使其成为一个数组，可以解决arguments伪数组问题
        function text2(x,y,...c){
            console.log(x,y,c) // 1 2 [3, 4, 5]  //和解构赋值以及展开运算符类似
        }
        text2(1,2,3,4,5)

三、name 属性
顾名思义，就是一个获取函数名字的方法

        function text(){

        }
        console.log(text.name) // text

四、箭头函数！！！
1.写法简单

    let text1 = function(){} //传统写法
    let text2 = () => {}   // 箭头函数写法
    // 大括号内只有一个返回值时可以省略 大括号和return
    let text3 = () => { return "starry"}
    console.log(text3()) //starry
    let text4 = () => "starry"
    console.log(text4()) //starry

2.返回值只有一个但是是对象时，需要注意加括号

    let text = () => ({
        name:"starry",
        age:18
    })
    console.log(text()) //{name: 'starry', age: 18}

3.函数参数只有一个时，可以省略括号

    let text = a => {console.log(a)}
    text(1) // 1

4.无法访问arguments，无法new

    let text1 = function(ad){
        console.log(arguments)
    }
    let text2 = (ad) => {
        console.log(arguments)
    }
    text1(1) //Arguments [1, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    text2(2) // 报错
    let text3 = new text1
    let text4 = new text2 //报错

5.箭头函数的 this 指向父作用域
先简单写一个input框向的模糊查询案例来解释箭头函数的this指向问题，这里使用setTimeout来模拟异步过程

    <input type="text" id="mysearch">
    <script>
        let mysearch = document.querySelector("#mysearch")
        mysearch.oninput = function(){
            console.log(this.value)
            setTimeout(function(){
            	console.log(this)
                console.log(`发送${this.value}到后端，获取列表数据`)
            })
        }
    </script>

在传统的函数中，this的指向是谁调用它，它就指向谁，此时异步，setTimeout是挂在window上的所以this指向window，因此我们的本意想拿到input框的值结果就变成了undefined

如果没有箭头函数的话，我们需要在函数内部在定义一个变量来成功获取input框的值

 mysearch.oninput = function(){
            // console.log(this.value)
            let that = this //定义一个that
            setTimeout(function(){
                console.log(that.value)
                console.log(`发送${that.value}到后端，获取列表数据`)
            })
        }

成功达到目标

而这里使用箭头函数的话，则不需要在定义一个变量，因为箭头函数的this是指向父作用域的


再次成功！！！
为了加深理解，假如，我们把外层的函数同样改为箭头函数，会发生什么呢？

因为指向父作用域，于是这样一层一层就指出去了，又指到了window身上了！！！