...三个点被称之为扩展运算符,用于把数组或类数组对象展开,每个值用逗号隔开
基本用法
用法一:复制数组
//通过下列的方式进行数组复制是不可取的
const a1 = [1, 2]
const a2 = a1
a2[0] = 2
console.log(a1) // [2, 2]
//es5实现数组的复制
const a1 = [1, 2]
const a2 = a1.concat()
a2[0] = 2
console.log(a1) // [1, 2]
// es6扩展运算符实现数组的复制
const a1 = [1, 2]
const a2 = [...a1] //用扩展运算符展开a1后,得到 1,2 这个序列,再放到[],完成复制
console.log(a2) //[1,2]
用法二:复制对象
//es5实现对象的复制
//Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)
//第一个参数是目标对象,后面的参数都是源对象
let foo = { a: 1, b: 2 }
let bar = Object.assign({}, foo)
console.log(bar) // { a: 1, b: 2 }
// es6扩展运算符实现对象的复制
let foo = { a: 1, b: 2 }
let bar = { ...foo } // { a: 1, b: 2 }
注意:如果扩展运算符展开的是引用数据类型时,其中一个对象发生变化会影响到另外一个
- 基础数据类型有 Number、String、Boolean、Null、Undefined、Symbol
- 引用数据类型有 Object Array Function ......
let foo = { a: 1, b: 2}
let bar = { ...foo }
// 如果展开的是基础数据类型则两对象互不影响
bar.a = 10
console.log(foo) //{ a: 1, b: 2 }
console.log(bar) //{ a: 10, b: 2 }
// 展开的是引用数据类型
let foo = { a: 1, b: 2, c: { name:'法外狂徒张三' } }
let bar = { ...foo }
bar.c.name = '不摇碧莲张楚岚'
console.log(foo) //{ a: 1, b: 2, c: { name:'不摇碧莲张楚岚' } }
console.log(bar) //{ a: 1, b: 2, c: { name:'不摇碧莲张楚岚' } }
用法三:与解构赋值结合
const [a, ...b] = [1, 2, 3, 4, 5]
console.log(a) // 1
console.log(b) // [2, 3, 4, 5]
//注意:如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
const [...a, b] = [1, 2, 3, 4, 5]
// 报错
const [a, ...b, c] = [1, 2, 3, 4, 5]
// 报错
用法四:将字符串转为真正的数组
const a = [...'机智一逼冯宝宝']
console.log(a) // [ "机", "智", "一", "逼", "冯", "宝", "宝" ]