js 扩展运算符(...)的用法

在日常开发中,我们在看js代码时,经常会看到(…)这样的符号。这里介绍一下它的含义和作用。

定义:

扩展运算符(…)是ES6的语法,用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中。

基本用法

let person = {name: "Amy", age: 15}
let someone = { ...person }
someone  // {name: "Amy", age: 15}

特殊用法

数组

由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组。

let foo = { ...['a', 'b', 'c'] };
foo
// {0: "a", 1: "b", 2: "c"}
空对象

如果扩展运算符后面是一个空对象,则没有任何效果。

let a = {...{}, a: 1}
a // { a: 1 }
Int类型、Boolen类型、undefined、null

如果扩展运算符后面是上面这几种类型,都会返回一个空对象,因为它们没有自身属性。

// 等同于 {...Object(1)}
{...1} // {}

// 等同于 {...Object(true)}
{...true} // {}

// 等同于 {...Object(undefined)}
{...undefined} // {}

// 等同于 {...Object(null)}
{...null} // {}
字符串

如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
对象的合并
let age = {age: 15}
let name = {name: "Amy"}
let person = {...age, ...name}
person; // {age: 15, name: "Amy"}
注意事项

自定义的属性和拓展运算符对象里面属性的相同的时候:

自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被覆盖掉。

let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
someone;  //{name: "Mike", age: 17}
自定义的属性在拓展运算度前面,则变成设置新对象默认属性值。
let person = {name: "Amy", age: 15};
let someone = {name: "Mike", age: 17, ...person};
someone;  //{name: "Amy", age: 15}
自定义的属性在拓展运算度前面,且该属性是拓展预算符后对象里的,则会取出该对象的值,拓展预算符则会取出剩下的属性。
let person = {name: "Amy", age: 15};
let someone = {name, ...person};
someone;  //{name: "Amy", age: 15}

相关推荐

  1. js 扩展运算符(...)

    2024-03-31 19:14:01       20 阅读
  2. js - es6 - 扩展运算符

    2024-03-31 19:14:01       18 阅读
  3. C#索引和范围运算符

    2024-03-31 19:14:01       29 阅读
  4. js 中toLocaleString

    2024-03-31 19:14:01       9 阅读
  5. ES6—运算符扩展

    2024-03-31 19:14:01       17 阅读
  6. js强大运算符:??、??=

    2024-03-31 19:14:01       12 阅读
  7. jsnew Map

    2024-03-31 19:14:01       19 阅读
  8. 【08】ES6:运算符扩展

    2024-03-31 19:14:01       38 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-31 19:14:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-31 19:14:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-31 19:14:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-31 19:14:01       20 阅读

热门阅读

  1. 力扣爆刷第108天之CodeTop100五连刷26-30

    2024-03-31 19:14:01       16 阅读
  2. mysql用户与权限

    2024-03-31 19:14:01       15 阅读
  3. 汇总17个工作必备的Python自动化代码

    2024-03-31 19:14:01       16 阅读
  4. vue路由重定向

    2024-03-31 19:14:01       14 阅读
  5. CSS 滚动条样式修改

    2024-03-31 19:14:01       18 阅读
  6. 30. 串联所有单词的子串 —— LeetCode (python)

    2024-03-31 19:14:01       16 阅读
  7. 如何解决redis里的大key问题

    2024-03-31 19:14:01       20 阅读
  8. python项目练习——9.在线聊天应用程序

    2024-03-31 19:14:01       15 阅读
  9. 利用ChatGPT提升学术论文写作技巧

    2024-03-31 19:14:01       18 阅读
  10. websocket

    websocket

    2024-03-31 19:14:01      16 阅读
  11. Opencv 读取灰度图像会识别为3通道问题

    2024-03-31 19:14:01       16 阅读