展开运算符

2023/11/21 技术

(...)展开运算符又叫剩余运算符。

展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。iterables的实现是依靠[Symbol.iterator]函数,而目前只有Array,Set,String内置[Symbol.iterator]方法,而Object尚未内置该方法,因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。

数据构造

(1)两个对象连接返回新的对象。

 let x = {
            name:'tom'
        };
        let y = {
            age:19
        }
        let z = {...x,...y};
        console.log(z);
1
2
3
4
5
6
7
8

预览效果

image-20231030152843333

(2)两两个数组连接返回新的数组。在ES6的世界中,我们可以直接加一个数组直接合并到另外一个数组当中。

  let x = [100,20,500]
            let y = ['lili','jerry']
            let z = [...x,...y]
            console.log(z); 
1
2
3
4

预览效果

image-20231030152850951

(3)数组加上对象返回新的数组

 let x = [{
                uname:'lili'
            }];
            let y = {
                age:19
            };
            let z = [...x,y];
            console.log(z); 
1
2
3
4
5
6
7
8

预览效果

image-20231030152856913

类数组对象变成数组

当你对dom中(页面中)标签元素进行抓取的时候,这些标签元素会形成一个集合,这个集合我们称之为类数组对象。

展开运算符可以将一个类数组对象变成一个真正的数组对象。

<body>
    <div>盒子1</div>
    <div>盒子2</div>
    <script>
        // 抓取元素
       let divObj = document.getElementsByTagName('div')
    //    HTMLCollection对象类似包含html元素的一个数组
       console.dir(divObj);
    //    类数组对象变成数组
    let list = [...divObj];
    console.dir(list)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
预览效果

image-20231030152904496

(4)数组+字符串

 let x = ['elva','tom',100,200];
        let y = 'lili';
        // 将x里面的内容,展开放置在 下面这个数组中
        let z = [...x,y];
        console.log(z);  预览效果
1
2
3
4
5

image-20231030152911473

(5)两数组+对象。

{
   
    let x = {
        name: ['tom','elva'],
        age: 18
    }
    //(1) 把x这个对象,展开放置到y这个对象中
    // (2)将x对象中的name属性上的值,展开放置在y对象的arr属性上
    let y = {
        ...x,
        age: 20,
        arr: [...x.name],
    }
    console.log(y);
}
{
    let x = {
        name: ['tom','elva'],
        age: [18,30,29,18]
    }
    //(1) 把x这个对象,展开放置到y这个对象中
    // (2)将x对象中的name属性上的值,展开放置在y对象的arr属性上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    // 展开一定是一个集合,单个内容 不需要展开
    let y = {
        ...x,
        age: 20,
        arr: [...x.name,...x.age]
        // 把x对象中的age放进到y对象里面来
        //  arr: [...x,name,x.age]
    }
    console.log(y);
}
1
2
3
4
5
6
7
8
9
10

预览效果

image-20231030152937908

    LOSER
    米津玄師