ES6之spread运算符、rest操作符及解构赋值操作

2024-03-03 15:48

本文主要是介绍ES6之spread运算符、rest操作符及解构赋值操作,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

es6推广的原因在于它更加轻盈方便,spread运算符、rest操作符以及解构赋值知识都是es6的新语法,接下来看看它们都分别是什么。

- spread运算符
spread运算符常常用于数组的解析与构造:

var arr1 = ['a','b','c'];
var arr2 = ['aa','bb','cc'];//构造数组
var arradd = [...arr1, ...arr2];
console.log(arrs); // ['a','b','c','aa','bb','cc']//解析数组
var son1,son2;
[son1, ...son2] = arr1
console.log(son1);  // 'a'
console.log(son2);  //['b','c']

在一些特定函数调用中,参数只能接受数列不接受数组。这是spread运算符也派上用场:

const arr = [2,3,1,5];
const maxNum = Math.max(...arr); // 返回5。max函数不接受数组只接受数列

- rest操作符
rest操作符让函数的所有参数可由一个变量统一接收 ,帮助我们创建更加灵活的函数:

function count(...arr){return arr.length;
}
//调用函数
count('a','b','c');  //返回3,arr长度为3
count(5,2,4,1);  //返回4,arr长度为4

- 解构赋值之对象分配变量
解构赋值是es6推出的、在开发中实用的新语法。先看看它在简单对象中的赋值作用:

var obj = {x: 1, y: 2, z: 3};
const {x, y, z} = obj; // x = 1, y = 2, z = 3

也可以将值赋予异名变量abc

const {x: a, y: b, z: c} = obj; // a = 1, b = 2, c = 3

可理解成对obj进行相应解构,并分别将值赋予对应的变量。再来看看在嵌套式对象中的解构赋值操作:

const obj = {a: {x: 1, y: 2},b: {x: 3, y: 4}
};
const {a : {x: x1, y: y1}} = obj;
console.log(x1, y1);  // 1, 2

- 解构赋值之数组分配变量
解构赋值也可以用于数组中,用法大同小异:

const arr = [1, 2, 3, 4, 5, 6]
const [a, b] = arr;
console.log(a, b);  // 1, 2

它会按顺序自动获取对应位置的值。再看看如何获取指定位置的值:

const [a, b,,, c] = arr;
console.log(a, b, c);  // 1, 2, 5 

- 解构赋值之函数对象参数
可以直接解构对象参数,获取需要的值,作为新参数传入函数,在函数内直接对变量进行操作:

const student = {name: 'Job',num: 001,age: 18,sex: 'boy'
};
const check = function half({num,sex}) {return (num , sex);};
console.log(student); // 一个object
console.log(check(student)); // (001, 'boy')

- 数组的深度copy
深度拷贝与浅度拷贝的区别在于新变量是否受源变量的影响而变化。es5出现的情况:

var arr1 = [1, 2];
var arr2 = arr1;
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

而es6的spread运算符促使数组解析构造,形成深度copy,arr2复制而来的值不受源arr1的变化而影响:

var arr1 = [1, 2];
var arr2 = [...arr1];
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2]

- 字符串转数组
es6之后字符串转数组也变得极为简单:

var str = 'China';
var arr = [...str];
console.log(arr); // ["C", "h", "i", "n", "a"]

- 变量值交换
以往交换变量值需要一个中间商,而es6之后语法糖来了:

var x = 1, y = 2;
[x, y] = [y, x];
console.log(x); // 2
console.log(y); // 1

这篇关于ES6之spread运算符、rest操作符及解构赋值操作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/770111

相关文章

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

MySQL追踪数据库表更新操作来源的全面指南

《MySQL追踪数据库表更新操作来源的全面指南》本文将以一个具体问题为例,如何监测哪个IP来源对数据库表statistics_test进行了UPDATE操作,文内探讨了多种方法,并提供了详细的代码... 目录引言1. 为什么需要监控数据库更新操作2. 方法1:启用数据库审计日志(1)mysql/mariad

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框