首页 > 其他分享 >js 扩展运算符(...)的用法

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

时间:2022-12-01 18:11:15浏览次数:55  
标签:... name age js 运算符 person let

在日常开发中,我们在看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"}
BASH 复制 全屏

注意事项

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

自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被覆盖掉。
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}

标签:...,name,age,js,运算符,person,let
From: https://www.cnblogs.com/itjeff/p/16942243.html

相关文章

  • 拼多多 autojs脚本
    functionFreeRestriction(){  importClass(com.stardust.autojs.core.accessibility.AccessibilityBridge.WindowFilter);  letbridge=runtime.accessibili......
  • JSON端口操作实例
    JSON端口可直接实现在JSON和XML之间进行转换。端口会自动检测输入文件是JSON还是XML,然后将文件在两种格式间相互转换。该端口较多的是运用在API接口调用集成方案......
  • js 将长度不确定的数组分割成n个一组的数组
    代码实现:consttransSliceImg=(imgs,num)=>{letnewImgs=[]returnimgs.reduce(function(pre,item,index,imgs){varbegin=index*num;......
  • Oracle开窗函数rank() over(partition by ... order by ... desc)
    原文地址:https://www.cnblogs.com/LoveShare/p/16408656.html1.创建表 --CreatetablecreatetableTEST(IDNUMBER(10)notnull,NAMEVARCHAR2(50),......
  • js,jQuery获取html5的data-*属性
    js,jQuery获取html5的data-*属性  今天做项目的时候发现一个坑,关于jQuery获取data-*属性的方法data(),特写此篇来记录。data-*自定义数据属性HTML5规定可以为元......
  • 将 Vue.js 项目部署至静态网站托管,并开启 Gzip 压缩
    摘要:关于使用Nginx开启静态网站Gzip压缩的教程已经有很多了,但是好像没几个讲怎么在对象存储的静态网站中开启Gzip压缩。其实也不复杂,我们一起来看下~本文分享自华为......
  • C++学习笔记——二元运算符
    //#include<iostream>//usingnamespacestd;////classStu//{//public://inta;//Stu(inta1)//{//a=a1;//}////关系运算符重......
  • C++学习笔记——一元运算符
    //#include<iostream>//usingnamespacestd;////classStu//{//public://inttemp;//Stu(intt)//{//temp=t;//}////负号//......
  • JS中localStorage和sessionStorage的区别
    sessionStorage,即使是同一个请求的url地址,分别在浏览器打开两个窗口,他们各自创建的sessionStorage也不共享,各自只能使用各自定义的东西,都是在关闭本页面前有效。localStor......
  • 为JS和C#类加一个扩展方法吧:P
    JS扩展方法:通过原型prototype为JS的function扩展一个新的function<script>functionRectangle(width,height){this.width=width;this.height=he......