VUE spread operator(...)

The Vue extension operator is a special operator in JS that can traverse arrays and objects. It can be used to construct new objects or arrays from arrays and objects . This function is also implemented in Vue, which allows developers to Use the spread operator for complex processing when building applications.

In JS, the spread operator has the following form:

...obj

Use the spread operator to expand all properties of obj to obtain a copy of an object or array.

For example, the following code adds the array arr to the variable a:

const arr = [1,2,3];
const a  = [...arr]

The extension operator in Vue is basically the same as the extension operator in JS, and can be used to obtain copies of arrays and objects, and the use of extension operators in Vue is more abundant, such as: defining component options in components, in components Define props in , define data objects in instances, etc.

1. Operation object

When defining component props, you can use the spread operator:

Vue.component(example-component {
    props: {
        ...data
    },
    template: <div>{
    
    {value}}</div>
})

The spread operator can also be used when defining data objects in instances:

const app = new Vue({
    data: {
        .data
    },
    template: <div>{
    
    {value}}</div>
})

Use the spread operator to merge multiple objects (when using the spread operator to merge objects, if two objects have the same attribute, the last attribute of the object will override the previous attribute):

const obj1 = {a: 1}
const obj2 = {b: 2}
const obj = {...obj1, ...obj2}

modify a property

method2() {
    let a = {name: 'zhh', age: 18, id: 10};
    //先拿到a, 后面的name:zhh1,把 a 中name 的值替换掉了
    let c = {...a, name: 'zhh1'};
    console.log(c);
    // 打印结果  {name: "zhh1", age: 18, id: 10}
}

delete a property

method1() {
    let a = {name: 'zhh', age: 18, id: 10};
    let {name, ...c} = a;
    console.log(name, c);
    //  打印结果 zhh {age: 18, id: 10}
}

If the object attribute extension is placed in an array, an error will be reported:

iClick11() {
    let obj = {
        name: 'zhh',
        age: '20'
    }
    console.log([...obj]);//会报错
    }
}

2. Operation array

print array

methods: {
/**
* 把数组中的元素孤立起来
*/
iClick() {
    let iArray = ['1', '2', '3'];
    console.log(...iArray);
    // 打印结果  1 2 3
}

add elements to the array

iClick3() {
    let iArray = ['1', '2', '3'];
    console.log(['0', ...iArray, '4']);
    // 打印结果  ["0", "1", "2", "3", "4"]
}

Delete elements in the array (take out an element, combined with structure assignment. If the spread operator is used for array assignment, it can only be placed in the last digit of the parameter, otherwise an error will be reported)

iClick8() {
    const [first, ...rest] = [1, 2, 3, 4, 5];
    console.log(first);
    // 打印结果 1
    console.log([...rest]);
    // 打印结果 [2, 3, 4, 5]
    
    const [one, ...last] = ["foo"];
    console.log(one);
    //打印结果 foo
    console.log([...last]);
    //打印结果 []
}

array merge

iClick6() {
    // ES6 的写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    arr1.push(...arr2);
    console.log(arr1);
    //  打印结果 [0, 1, 2, 3, 4, 5]
}

//推荐使用
iClick7() {
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    console.log([...arr1, ...arr2]);
    //  打印结果 [0, 1, 2, 3, 4, 5]
}

convert string to array

iClick9() {
    let iString = 'woshizhongguoren';
    console.log([...iString]);
    //  打印结果 ["w", "o", "s", "h", "i", "z", "h", "o", "n", "g", "g", "u", "o", "r", "e", "n"]
}

Map and Set structure, Generator function

iClick10() {
    let map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
    ]);
    let arr = [...map.keys()];
    console.log(arr);
    //  打印结果 [1, 2, 3]
}

When passing as a parameter, the difference from passing an array directly

iClick4() {
    let iArray = ['1', '2', '3'];
    //注意传的时候，就要三个点
    this.hanshu(...iArray);
},
hanshu(...iArray) {
    let ooo = 1;
    console.log(...iArray);
    //  打印结果 1 2 3
}

find the maximum

iClick5() {
    let iArray = [1, 2, 3, 99, 44, 66, 21, 85, 77];
    let ooo = Math.max(...iArray);
    console.log(ooo);
    //  打印结果 99
}