ES6展开运算符“...”

news2025/7/8 5:52:11

● ES6新增了一个运算符“...”,叫做展开运算符

● 作用是把数组或者对象内容展开

(1)展开数组:

○ ES5方法:concat()

  <script>
        let a = [1,2,3]
        let b = [4,5,6]
        //ES5的方法:concat()
        console.log(a.concat(b))
        console.log(a,b)
  </script>

结果:

○ ES6方法:"..."展开运算符

  <script>
        let a = [1,2,3]
        let b = [4.5,6]
        //ES6的方法: ...
        var c = [...a,...b]
        console.log(c)
  </script>

结果:

● ...就是把数组里面的内容给展开,...a就是把a里面的内容全部展开,也就是1,2,3,然后...b展开以后和a展开放在一起,就成了c那样子。。

(2)展开数组--实参、形参的运用:

○ ...arr放在形参的位置:

  <script>
        let fun = function(a,b,...arr) {
            console.log(arr)
        }
        fun(1,2,3,4,5)
  </script>

结果:

● a,b接收前两个参数1和2,剩下的都由...arr接收,...arr是展开的,所以arr最终是一个数组

● 注意:形参...arr必须放在最后面,它后面不能再有其他的形参了,不然就会报错

○ ...arr放在实参的位置:

  <script>
        let arr = [1,2,3]
        let fun = function(a,b,c) {
            console.log(a,b,c)
        }
        fun(...arr)
  </script>

结果:

● 先定义了一个arr数组,然后用...arr把arr数组里面的内容拿出来,当做实参传进去。。

(3)伪数组转为数组

○ ES5的方法:Array.from(arguments)

  <script>
        function fun(){
            var arr = Array.from(arguments)
            console.log(arr)
        }
        fun(1,2,3,4,5)
  </script>

结果:

○ ES5的方法:[...arguments]

  <script>
        function fun(){
            var arr = [...arguments]
            console.log(arr)
        }
        fun(1,2,3,4,5)
  </script>

结果:

● 注意:arguments的作用是:在没有形参的情况下,用来接收实参的

(4)对象合并

 <script>
        let obj1 = {
            name:"yiyi",
            age:21
        }
        let obj2 = {
            location:"henan"
        }
        let obj = {
            ...onj1,
            ...obj2
        }
        console.log(obj)
  </script>

 ● 注意:同名的键后面的会覆盖前面的,比如我合并了obj1和obj2,如果obj1和obj2都有name这个键,那么name的值就等于obj2的name值。

(5)解构赋值也可以放在形参里

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405616.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图(超详细)

【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图&#xff08;超详细&#xff09; 1- 介绍 百度地图功能强大&#xff0c;本篇文章只是对百度地图JavaScript API 进行一个介绍~ 官方网址 百度地图开放平台LBS&#xff1a;LocationBusinessServer 基于定义位置的商…

JS 连接MQTT的方法(mqtt.js的使用方法)

本文章是介绍 mqtt.js 的使用方法 一、说明 本文章使用的版本是 4.1.x &#xff0c;没用最新版的原因是 4.2.x 以上版本会报错&#xff0c;具体报错可以看我的另一篇文章&#xff0c;点击查看。使用的 4.1.x 版本地址&#xff1a;https://cdn.bootcdn.net/ajax/libs/mqtt/4.1…

若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起

前言 因为是在vue源码的基础上进行修改&#xff0c;所以&#xff0c;就没有复制代码在文章上&#xff0c;采取的是截图对比源码和我修改的代码片段。要麻烦你们自己手敲了。 先来看看效果&#xff1a; 场景&#xff1a;在费用配置列表中&#xff0c;点击每一项的配置&#x…

vue如何设置元素的显示隐藏

方法&#xff1a;可以使用v-if&#xff0c;也可以使用v-show指令。 v-if 指令&#xff0c;通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素&#xff1b; v-show 指令&#xff0c;通过设置DOM元素的display样式属性来控制显隐。 区别&#xff1a; v-if 会直接删除…

手把手教你在 Vue3 中自定义指令

TienChin 项目前端是 Vue3&#xff0c;前端有这样的一个需求&#xff1a;有一些前端页面上的按钮要根据用户的权限来决定是否展示出来&#xff0c;如果用户具备相应的权限&#xff0c;那么就展示对应的按钮&#xff1b;如果用户不具备对应的权限&#xff0c;那么按钮就隐藏起来…

微信小程序:用户微信登录流程(附:流程图+源码)

目录 前言 一、微信小程序是什么&#xff1f; 二、业务流程 1、使用微信小程序登录的wx.login()方法 2、后端使用登录凭证换取session_key和openid 3、前端处理session_key、openid和token 尾言 前言 随着微信小程序大规模的铺开和宣传&#xff0c;在生活中随处可见微信小程序…

vue2常见面试题

文章目录1、vue 修改数据页面不重新渲染数组/对象的响应式 &#xff0c;vue 里面是怎么处理的&#xff1f;2、生命周期Vue 生命周期都有哪些&#xff1f;父子组件生命周期执行顺序3、watch 和 computed 的区别4、组件通信&#xff08;组件间传值&#xff09;5、$nextTick6、修饰…

【微信小程序】自定义组件(二)

&#x1f381;写在前面&#xff1a; 观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列文章又更新了呀。 上文我们讲解了微信小程序自定义组件的入门知识&#xff0c;那么今天牛牛就来讲讲自定义组件的进阶知识吧&#xff0c;赶紧拿起小本本做笔记…

vue中三种for循环(含案例分析)

这里写目录标题三种for循环1.普通的for循环2.for in 循环3.for of 循环总结三种for循环 vue中的for循环有三种 :1.普通的for循环 ,2.for in 循环 ,3.for of 循环 它们三个各自有各自的特点和作用&#xff0c;下面我会用一个小案例来帮助大家理解它们三个的区别 &#xff08;三…

【宜搭】低代码开发师高级认证实操题1难点指导

难度&#xff1a; 较难 知识点&#xff1a; 远程数据源 表单创建 表格组件使用 js增删改查功能代码编写 在本文中&#xff0c;我将根据题目的每一点要求&#xff0c;对于我在实操过程中遇到的难点进行比较详细的介绍&#xff0c;供大家参考&#xff0c;希望能够对大家有所帮助…

Bootstrap从入门到精通(全)

目录前言1. 下载安装2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统3. 常用样式4. 表单4.1 控件4.2 布局5. 插件5.1 导航框5.2 下拉菜单前言 在了解这篇文章的时候 需要提前知道这些知识点 可看我之前的文章 html从入门到精通&#xff08;全&#xff09;css属性从入…

CSS6大种选择器(超详细!!!!!!)

文章目录一、常用的css基本选择器(4种)1、标签选择器2、类选择器3.id选择器区别&#xff1a;4、通配符选择器二、复合选择器 (2种)1、交集选择器2、并集选择器三、属性选择器(5种)四、关系选择器(4种)五、伪类选择器1、元素选择伪类选择器2、否定伪类选择器3、特殊应用的伪类六…

基于Java+SpringBoot+vue+elementui图书商城系统设计实现

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取联系&#x1f345;精彩专栏推荐订阅&#x1f447;&#x1f…

完美解决el-cascader回显失败问题

项目场景&#xff1a; 项目场景&#xff1a;接手了一些老项目&#xff0c;需要做一些日志相关的操作&#xff0c;从后台日志跳转到相应页面要带上原来的请求参数&#xff0c;涉及到一个回显问题 问题描述 Element-UI的 <el-cascader /> 这个组件&#xff0c;赋值之后它…

前端与后端传递数据 — — JSON

前端与后端传递数据 — — JSON 1 前端传送JSON数据给后端 1.1 application/x-www-form-urlencoded默认格式 1.1.1 通过HttpServletRequest获取数据 /*** 通过request获取数据* param request* return*/PostMapping("/testDefaultWithNoAnno1")public String test…

自主Web服务器Http_Server

目录自主web服务器背景目标描述技术特点项目定位项目实现过程创建HttpServer基础框架TcpServer.hppHttpServer.hppLog.hppProtocol.hpp解析C端发来的HTTP报文MSG_PEEK标志位Util.hpp构建请求与响应类读取,解析请求构建响应读取请求解析请求构建响应stat系统函数发送响应sendfil…

使用uni-app开发App简易教程

使用uni-app开发App简易教程前言app端开发步骤1、 申请uniapp开发者账号2、登录后开始新建应用3、下载安装 HBuildder X 。4、新建项目5、开启webview&#xff0c;在pages-index里面写一点点代码6、配置mainifest.json7、打包h5工程配置在html中引入uniapp-sdk解决后退问题上架…

【vue2小知识】实现directive自定义指令的封装与全局注册

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;将我们的自定义指令directive统一管理并批量注册 目录 一、directive自定义指令介绍 二…

Cannot read properties of undefined (reading ‘validate‘)“

1、注意两个地方 1、ref前面 加冒号“&#xff1a;”&#xff0c;还是不加冒号。 2、this.$refs[value].validate()>&#xff08;&#xff09;&#xff0c;更改为this.$refs[value].validate()>(), 不排除this.$refs[value].validate()>(),有时候不会报错 2、示范代码…

解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%

解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE/dist/model/model.gltf.xz’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supp…