JavaScript中三个点(...)语法怎么用

简介

三个点“...”在JavaScript中代表扩展运算符,是ES6中新增加的,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开,还可以在构造字面量对象时将对象表达式按照“key-value”的方式展开。

在看js项目中经常会出现(...)三个点的东西,它究竟是什么意思?又有何用处呢?

字面量一般指[1,2,3]或者{name:'you-name'}这种简洁的构造方式,多层嵌套的数组和对象三个点就无能为力了

说白了就是把外层去掉,不管是大括号([])、花括号({})

// 数组
var number = [1,2,3,4,5,6]
console.log(...number) 
// 输出以下
// 1 2 3 4 5 6

//对象
var man = {name:'you-name', height:'180cm'}
console.log({...man}) 
// 输出以下
// {name:'you-name',height:'180cm'}

三个点(...)语法有什么用呢?

它的用处很广泛,我们随处都可以看到,下面是几个常见的例子

1. 复制

// 数组的复制
var arr1 = ['hello']
var arr2 = [...arr1]
console.log(arr2) 
// 输出以下
// ['hello']

// 对象的复制
var obj1 = {name:'name'}
var obj2 ={...arr}
console.log(obj2) 
// 输出以下
// {name:'name'}

2. 合并

// 数组的合并
var arr1 = ['hello']
var arr2 = ['world']
var mergeArr = [...arr1, ...arr2]
console.log(mergeArr) 
// 输出以下
// ['hello','world']

3. 字符转数组

var arr1 = [...'hello']
console.log(arr1) 
// 输出以下
//  ["h", "e", "l", "l", "o"]

4. 函数传参

可以正常的函数相结合,灵活使用

function f(v,w,x,y,z){ }
var args = [2,3]
f(1,...args,4,...[5])

当想把数组中的元素迭代为函数参数时

function f(x,y,z){}
var args = [1,2,3]
f(...args)
// 以前的方法
f.apply(null,args);
编辑于 2023-02-09 9:24
IP属地 黑龙江省
举报
评论