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

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

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

{...'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}

Original: https://www.cnblogs.com/javalinux/p/16503098.html
Author: hellodev
Title: js 扩展运算符(…)的用法

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/8626/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

免费咨询
免费咨询
扫码关注
扫码关注
联系站长

站长Johngo!

大数据和算法重度研究者!

持续产出大数据、算法、LeetCode干货,以及业界好资源!

2022012703491714

微信来撩,免费咨询:xiaozhu_tec

分享本页
返回顶部
最近整理资源【免费获取】:   👉 程序员最新必读书单  | 👏 互联网各方向面试题下载 | ✌️计算机核心资源汇总