JavaScript 展开语法(三个点 ...)
JavaScript About 2,357 words展开语法
三个点...
。
合并数组
注意:合并后的数组是新对象,不同的地址值。
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
Views: 1,544 · Posted: 2022-07-06
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...