es6之扩展运算符

176 阅读2分钟

...三个点被称之为扩展运算符,用于把数组或类数组对象展开,每个值用逗号隔开

基本用法

用法一:复制数组

//通过下列的方式进行数组复制是不可取的
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)  // [ "机", "智", "一", "逼", "冯", "宝", "宝" ]