ES6对象扩展小结

对象 （object）是JavaScript最重要的数据结构

1.属性的简洁

ES6允许在大括号里直接写入变量和函数，作为对象的属性和方法，会更加简洁。

若属性名和属性值与其相对应的变量名相同，则可以简化

如：

function fn(a,b){
        return{
            a:a,//属性名:属性值
            b:b
        }
       }
        console.log(fn(1,2));//{a: 1, b: 2}
//属性名‘a’与属性值“a”与其 变量名”a“相同，b同理 所以可以简写为：
  function fn(a,b){
            return{a,b}
        }
        console.log(fn(1,2));//{a: 1, b: 2}

2.方法简写

除了属性还有方法可以简写

let obj = {
        fn:function(){
            return"Hello Window"
        }
    }
    //function 可简写
    let obj1 = {
        fn1(){
            return"Hello Window"
        }
    }

简写例子

let name="李四" ;
let Person = {
    name,//name:name
    run(){//run:function()
        console.log(name +"在奔跑");
        return "";
    }
    
}
Person.run();

理解：在大括号里写入变量‘name’和函数‘run()’，作为对象(Person)的属性和方法。

3.属性名表达式

在JavaScript中有两种定义对象的属性的方法

let obj={}
        //方法1
        obj.name = "赵六";
        //方法2
        obj['a'+'b']= 111;

        console.log(obj.name);//赵六
        console.log(obj.ab);//111

方法一是直接用标识符作为属性名，

方法二是用表达式作为属性名，这时要将表达式放在方括号之内。

在ES5中 ，如果使用字面量方式定义对象（使用大括号）只能使用方法一

 var age = 'ac';
        var obj = {
            name:'李雷',
            age:18
        };
        console.log(obj)//{name: '李雷', age: 18}

S6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内:

var age = 'ac';
        var obj = {
            name:'李雷',
            age:18,
            ['a'+'c']:'张三'
        };
        console.log(obj['ac']);//张三

注：因为ES6有兼容性问题，所以当使用表达式作为对象的属性名 可能会报错 (比如IE)

4.方法的name属性

函数的’name‘属性是返回函数名。对象方法也是函数，因此也有‘name’属性。

let obj = {
            Person(){
                console.log('杨过');
            }
        }
        console.log(obj.Person.name);//Person

即方法的'name'属性返回函数名（即方法名）。

5.对象的扩展运算符

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

扩展运算符有两种用法

• 扩展运算符(spread) 用于取值

 let arr = [1,2,3,4];
        console.log(...arr);//1 2 3 4

当然也可以将扩展运算符用于数组

 let obj = {...[1,2,3,4]};
        console.log(obj);//{0: 1, 1: 2, 2: 3, 3: 4}

• 当为rest参数是为逆运算

    function fn(a,b,...c){
            console.log(a,b,c);
        }
        fn(1,2,3,4,5,6,7,8,9);//1 2 (7) [3, 4, 5, 6, 7, 8, 9]

rest参数只能是最后一个参数

//当为第二个参数时：
function fn(a,...b,c){
            console.log(a,b,c);
        }
        fn(1,2,3,4,5,6,7,8,9);
//Uncaught SyntaxError: Rest parameter must be last formal parameter

//当为第一个参数时：
function fn(...a,b,c){
            console.log(a,b,c);
        }
        fn(1,2,3,4,5,6,7,8,9);
        //Uncaught SyntaxError: Rest parameter must be last formal parameter