JavaScript 展开语法（三个点 ...）

展开语法

三个点...。

合并数组

注意：合并后的数组是新对象，不同的地址值。

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];
// [0, 1, 2, 3, 4, 5]
console.log(arr3)

对象合并

合并不同的属性到同一个新对象中。

var obj1 = {name:'chuichui'}
var obj2 = {height:176}
var mergeObj = {...obj1,...obj2}
// mergeObj {name: 'chuichui', height: 176}
console.log("mergeObj", mergeObj)

对象属性合并

{...editor, name: 'xyz'}：使用name: 'xyz'替换editor中的name属性，合并生成新对象。

{name: 'abc', ...editor}：将editor中的name属性替换name: 'abc'属性，合并生产新对象。

const editor = {
    id: '1688',
    name: 'handome_boy',
    age: 18,
    male: 1
}

var v1 = {...editor, name: 'xyz'}
var v2 = {name: 'abc', ...editor}

// {id: '1688', name: 'xyz', age: 18, male: 1}
console.log("v1", v1)
// {name: 'handome_boy', id: '1688', age: 18, male: 1}
console.log("v2", v2)

解构数组

var number = [1,2,3,4,5,6]
// 1 2 3 4 5 6
console.log(...number)

解构字符串

var str = 'hello'
// h e l l o
console.log(...str)
// ['h', 'e', 'l', 'l', 'o']
console.log([...str])

分组解构

const [main, ...rest1] = labels：将labels数组中第0个元素赋值给main变量，...rest1将labels数组中剩余元素赋值给rest1变量。

const labels = ['javascript', 'ES5', 'ES6', 'Vue.js'];
const [main, ...rest1] = labels;
// javascript
console.log(main);
// ['ES5', 'ES6', 'Vue.js']
console.log(rest1);

const {id, ...rest2} = editor：将editor中的id字段解构出来，单独赋值给id这个变量；...rest2将editor中剩余属性赋值给rest2变量。

const editor = {
    id: '1688',
    name: 'handome_boy',
    age: 18,
    male: 1
}

const {id, ...rest2} = editor;
// 1688
console.log(id);
// {name: 'handome_boy', age: 18, male: 1}
console.log(rest2);

const {name, ...rest3} = editor;
// handome_boy
console.log(name);
// {id: '1688', age: 18, male: 1}
console.log(rest3);

const {nonExisted, ...rest4} = editor;
// undefined
console.log(nonExisted);
// {id: '1688', name: 'handome_boy', age: 18, male: 1}
console.log(rest4);

对象引用

引用对象的地址值，改变了副本对象的属性，原始对象的属性也会变更。

// 对象（地址的引用）
var man = {name: 'chuichui', height: 176}
// {name: 'chuichui', height: 176}
console.log(man)
// {name: 'chuichui', height: 176}
console.log({...man})
man.name = 'xxx'
// {name: 'xxx', height: 176}
console.log(man)
// {name: 'xxx', height: 176}
console.log({...man})

函数传参

// 函数传参
function f1(x, y, z) {
}

var args1 = [1, 2, 3]
f1(...args1)

function f2(v, w, x, y, z) {
}

var args2 = [2, 3]
f2(1, ...args2, 4, ...[5])

参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax