ES6语法简介——4、展开运算符和对象字面量语法拓展

<h1>4、展开运算符和对象字面量语法拓展</h1>
<div><h3>4.1、展开运算符</h3>
    <p>
        <span class="text2">展开运算符的语法和rest参数相似，也是三个点（...），它可以将数组转换为各个独立的参数，也可以取出对象的所有可遍历的属性，而rest参数是指定多个独立参数，并通过整合的数组访问。</span>
        <br>例：<pre>
            function sum(a,b,c){
                return a+b+c;
            }
            let arr=[1,2,3];
            sum(...arr);//提取数组arr中的值传入sum函数中
        </pre>
    </p>
    <p>
        <span class="text1">展开运算符还可以用来复制数组。</span>
        <br>例：
        <pre>
            let arr1=[1,2,3];
            let arr2=arr1;
            let arr3=[...arr1];//['1','2','3']
            console.log(arr3[0]);//1   ['1','2','3']中的第一位
            arr1[0]=5;//[5,2,3]  
            console.log(arr2);//5,2,3    arr2[0]=arr1[0]=5
            console.log(arr2[0]);//5
            console.log(arr3[0]);//1  
        </pre>
    </p>
    <p>
        <span class="text1">合并数组</span>
        <br>例：<pre>
            let arr1=['1'];
            let arr2=['2'];
            let arr3=['3'];
            console.log([...arr1,...arr2,...arr3]);//['1','2','3']
        </pre>
    </p>
    <p>
        <span>取出所有对象的可遍历属性复制到当前对象中</span>
        <br>例：<pre>
            let math={
                tille:"九章算术",
                price:108
            }
            let mathbook={...book,desc:"一本好书"}
            console.log(mathbook);//tille:'九章算术',price:108.desc:'一本好书'
        </pre>
    </p>
</div>
<div>
    <h3>4.2对象字面量语法拓展</h3>
    <p><h4>4.2.1简写属性初始值</h4><br>
        <span>使用模板字面量可以很方便创建多行字符串，而对象字面量是一种创建对象的方法。当一个对象的属性和本地变量名字相同的时候，可以不用写冒号和值，只写属性名就可以。以下的例子和ES5和ES6的对比。</span>
        <pre>①ES5:
            function home(color,door){
                color:color,
                door:door
            }
        </pre>
        <pre>
            ②ES6:
            function home(color,door){
                color,
                door    //有同名的参数或者本地变量，只写属性即可
            }
        </pre>
    </p>
    <p>
        <h4>
            4.2.2简写对象方法<br>
        </h4><br>
        <span>省略冒号和function关键字,通过这个方法创建的方法有一个name属性，其值为圆括号前面的名称。在下面例子中name属性值是showColor</span>
        <pre>
            var home={
                color:"red",
                door:1,
                showColor(){
                    console.log(this.color);
                }
            }
            home.showColor();
            console.log(home.showColor.name);//showColor
        </pre>
    </p>
    <p>
        <h4>
            4.2.3可计算的属性名
        </h4><br>
        <span>在ES6 中，可以在对象字面量中使用可计算的属性名称。</span>
        <pre>
            let xm="name";
            let person={
                ["first"+xm]:"san",
                ["last"+xm]:"zhang",
                age:22
            }
            console.log(person);// 输出结果：first name:san,last name:zhang,age:22
        </pre>
    </p>
</div>