JS ES新特性 扩展运算符介绍

一、扩展运算符

扩展运算符是三个点... , 允许将一个表达式原地展开，当需要多个参数(比如函数的调用时) 或者多个值(比如数组)它会将其转为用逗号分隔的参数序列。

示例代码如下所示：

// 定义一个数组
let arr = [1, 2, 3, 4, 5, 6]
// 使用 ... 扩展运算符展开
console.log(...arr); // 1 2 3 4 5 6

// 定义一个函数
function fun(...item) {
  console.log(...item);
}
// 调用函数
fun(1, 2, 3, 4, 5, 6) // 1 2 3 4 5 6

// 与表达式配合使用
let x = 10
arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];
console.log(...arr); //a b

二、替代apply()方法

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

示例代码如下所示：

// 定义一个函数
function fun(a, b, c, d, e) {
  console.log(a, b, c, d, e);
}
// 定义一个数组
let arr = [1, 2, 3, 4, 5]
// ES5 调用方式
fun.apply(null, arr) //1 2 3 4 5
// ES6 调用方式
fun(...arr) // 1 2 3 4 5

假如我们在实际开发中取出数组中的最大值，采用的方式如下所示：

let arr = [1, 20, 30, 50, 3, 88, ]
// ES5的写法
let max = Math.max.apply(null, arr)
console.log(max); // 88

E的写法如下所示：

let arr = [1, 20, 30, 50, 3, 88, ]
// ES6 的写法
let max = Math.max(...arr)
console.log(max); // 88

三、扩展运算符的应用

扩展数组的应用主要表现在以下几个方面

1、复制数组

在ECMAScript 2015之前中如果仅仅是简单的将arr1赋值给arr2，修改arr2时，arr1也会进行变化，这就是所谓的浅复制 ，

示例代码如下所示：

先来理解一下深浅复制的概念：

  • 深复制：复制数组中的元素内容
  • 浅复制：复制数组元素内容的内存地址
let arr1 = [1, 2, 3, 4, 5]
let arr2 = arr1
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
// 修改 arr2 的数据内容
arr2[2] = 6;
// 两者都会发生改变
console.log(arr1, arr2); // [ 1, 2, 6, 4, 5 ] [ 1, 2, 6, 4, 5 ]

如果想要完成深复制，示例代码如下所示：

let arr1 = [1, 2, 3, 4, 5]
let arr2 = []
// ES5 写法
for (let i = 0; i < arr1.length; i++) {
  arr2[i] = arr1[i];
}
arr2[2] = 6;
// 仅仅 arr2 改变
console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]

// ES6 写法
arr2 = [...arr1]
arr2[2] = 6;
// 仅仅 arr2 改变
console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]

2、合并数组

扩展运算符提供了数组合并的新写法。示例代码如下所示：

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
console.log(arr1.concat(arr2, arr3)); // [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
console.log([...arr1, ...arr2, ...arr3]); // [ 'a', 'b', 'c', 'd', 'e' ]

值得注意的是，这两种方式都是浅复制

3、与解耦赋值结合使用

扩展运算符可以与解构赋值结合起来，用于生成数组(用于取剩余数据)。

注意 ：只能将扩展运算符放置最后。

示例代码如下所示：

// 场景分析：取数组中的第一个值和最后一个值
let arr = [1, 2, 3, 4, 5]
let first, rest;
// ES5 的写法：借用 Array.slice() 函数
first = arr[0]
rest = arr.slice(1)
console.log(first, rest); // 1 [ 2, 3, 4, 5 ]
// ES6 的写法
[first, ...rest] = arr
console.log(first, rest); // 1 [ 2, 3, 4, 5 ]

4、将字符串拆分为数组

扩展运算符还可以将字符串转为真正的数组。示例代码如下所示：

let str = '狐妖小红娘'
console.log([...str]); // [ '狐', '妖', '小', '红', '娘' ]

到此这篇关于JS ES新特性 扩展运算符介绍的文章就介绍到这了,更多相关ES  扩展运算符介绍内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解ES6 扩展运算符的使用与注意事项

    扩展运算符 spread syntax 又叫展开语法,写法是 ...,顾名思义,其实是用来展开字符串,数组和对象的一种语法,可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开:还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开.常用的语法如下: //函数调用: myFunction(...iterableObj); //字面量数组构造或字符串: [...iterableObj, '4', ...'hello', 6]; // 构造字面量对象时,进

  • ES6扩展运算符和rest运算符用法实例分析

    本文实例讲述了ES6扩展运算符和rest运算符用法.分享给大家供大家参考,具体如下: 运算符可以很好的为我们解决参数和对象数组未知情况下的编程,让我们的代码更健壮和简洁. 运算符有两种:对象扩展运算符与rest运算符. 1.对象扩展( spread)运算符(...) (1)解决参数个数问题 以前我们编程是传递的参数一般是确定,否则将会报错或者异常,如下: function test(a,b,c,d) { console.log(a) console.log(b) console.log(c) c

  • ES6扩展运算符的使用方法示例

    目录 什么是spread 和rest运算符 数组的扩展运算符 rest运算符(收集作用) spread运算符(展开作用) 对象的扩张运算符 浅克隆 深克隆 总结 什么是spread 和rest运算符 spread和rest运算符在ES6中,都用(...)表示,其中spread为扩展(展开)运算符,rest为剩余(收集)运算符.在不同的地方使用此运算符有不同的作用,可以从读和写两个角度考虑.其中写操作有收集作用,读操作有展开作用.在ES6中,(...)运算符只对数组有效,ES7中添加了对对象的扩展

  • ES6扩展运算符的理解与使用场景

    目录 1.替代apply方法,一般在函数调用时处理参数 2.剩余参数(rest运算符),主要针对函数形参 3.数据连接.合并 4.数组和对象的拷贝 5.字符串转数组 6.在函数调用时使用拓展运算符. 总结 扩展运算符,即...运算符是es6新增的一个语法,其主要作用是将数组或对象进行展开(这种说法也许不太准确),希望通过下面的总结能让你明白其使用方法. 个人的理解和总结使用场景如下: 1.替代apply方法,一般在函数调用时处理参数 假设我们的参数刚好是一个数组(单个参数这里就不讨论了,逐个传入

  • JavaScript 扩展运算符用法实例小结【基于ES6】

    本文实例讲述了JavaScript 扩展运算符用法.分享给大家供大家参考,具体如下: 扩展运算符格式 扩展运算符格式很简单,就是三个点(-) 重点:需要ES6 语法支持 扩展运算符作用??? 扩展运算符允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展. 1.将一个数组放入另一个数组中 下面开始通过四个例子来深刻理解扩展运算符 ①. 创建一个数组middle ②. 创建第二个包含middle的数组 ③. 输出结果 var middle =

  • es6数组之扩展运算符操作实例分析

    本文实例讲述了es6数组之扩展运算符操作.分享给大家供大家参考,具体如下: 扩展运算符(spread)是三个点(-).它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] 该运算符主要用于函数调用. function push(array, ...it

  • 详解TS对象扩展运算符和rest运算符

    详解TS对象扩展运算符和rest运算符

    概述 TypeScript 2.1 增加了对 对象扩展运算和 rest 属性提案的支持,该提案在 ES2018 中标准化.可以以类型安全的方式使用 rest 和 spread 属性. 对象 rest 属性 假设已经定义了一个具有三个属性的简单字面量对象 const marius = { name: "Marius Schulz", website: "https://mariusschulz.com/", twitterHandle: "@mariussc

  • JS ES新特性 扩展运算符介绍

    一.扩展运算符 扩展运算符是三个点... , 允许将一个表达式原地展开,当需要多个参数(比如函数的调用时) 或者多个值(比如数组)它会将其转为用逗号分隔的参数序列. 示例代码如下所示: // 定义一个数组 let arr = [1, 2, 3, 4, 5, 6] // 使用 ... 扩展运算符展开 console.log(...arr); // 1 2 3 4 5 6 // 定义一个函数 function fun(...item) { console.log(...item); } // 调用函

  • JS ES新特性 模板字符串

    目录 1.模板字符串是什么 2.多行模板字符串 2.1带表达式的模板字符串 3.带标签的模板字符串 4.原始字符串 5.判断是否包含某字符串 5.1includes()方法 5.2startsWith()方法 5.3endsWith()方法 1.模板字符串是什么 模板字符串( Template String )是增强版的字符串,使用反引号(```)来代替谱通字符串中的用双引号和单引号.它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 普通用法如下所示: // 使用 `

  • JS ES新特性之变量的解耦赋值

    目录 1.数组的解耦赋值 1.1数组解耦赋值是什么 1.2数组解耦赋值失败 1.3不完全解耦赋值 1.4默认值 1.5数组解耦赋值的复杂情况 2.对象的解耦赋值 2.1对象解耦赋值的特殊情况 2.2解耦赋值失败 2.3不完全解耦赋值 2.4默认值 3.字符串.数值.和布尔值的解耦赋值 3.1字符串解耦赋值 3.2数值和布尔值的解耦赋值 4.函数的解耦赋值 5.小括号的问题 5.1不能使用小括号的情况 5.2可以使用小括号的情况 6.变量解耦赋值的用处 6.1交换变量的值 6.2从函数返回多个值

  • C# 9.0新特性——扩展方法GetEnumerator支持foreach循环

    1.介绍 我们知道,我们要使一个类型支持foreach循环,就需要这个类型满足下面条件之一: 该类型实例如果实现了下列接口中的其中之一: System.Collections.IEnumerable System.Collections.Generic.IEnumerable<T> System.Collections.Generic.IAsyncEnumerable<T> 该类型中有公开的无参GetEnumerator()方法,且其返回值类型必须是类,结构或者接口,同时返回值类型

  • 基于JavaScript ES新特性let与const关键字

    目录 1.let关键字 1.1基本用法 1.2不存在变量提升 1.3暂时性死区 1.4不允许重复声明 1.5与函数的关系 2.const关键字 2.1基础用法 1.let关键字 1.1基本用法 let是ECMAScript 2015新增的一个关键字,用于声明变量,其用法类似于var,与之不同的是声明的变量只能在所在的代码块中使用. 语法结构如下所示: let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]; 参数说明: v

  • JavaScript ES新特性块级作用域

    目录 1.块级作用域是什么 2.为什么需要块级作用域 3.与函数声明 前言: 在学习块级作用域之前需要我们对作用域有个了解,所谓的作用域就是代码当中的某个成员起作用的范围. 1.块级作用域是什么 所谓的块级作用域,就是该变量只能在声明时的代码块或者子代码块中使用.在ECMAScript 2015以前的版本中是不存在块级作用域的,而ECMAScript 2015提供的let关键字,使JavaScript出现了块级作用域,示例代码如下所示 /* * 块级作用域只能使用 let 关键字 * let关键

  • C++11的新特性简单汇总介绍 (一)

    什么是C++11 C++11是曾经被叫做C++0x,是对目前C++语言的扩展和修正,C++11不仅包含核心语言的新机能,而且扩展了C++的标准程序库(STL),并入了大部分的C++ Technical Report 1(TR1)程序库(数学的特殊函数除外). C++11包括大量的新特性:包括lambda表达式,类型推导关键字auto.decltype,和模板的大量改进. 1. 概述 最近在看C++ Primer5 刚好看到一半,总结一下C++11里面确实加了很多新东西,如果没有任何了解,别说自己

  • SQL Server新特性SequenceNumber用法介绍

    SQL Server新特性SequenceNumber用法介绍

    简介 SequenceNumber是SQL Server2012推出的一个新特性.这个特性允许数据库级别的序列号在多表或多列之间共享.对于某些场景会非常有用,比如,你需要在多个表之间公用一个流水号.以往的做法是额外建立一个表,然后存储流水号.而新插入的流水号需要两个步骤: 1.查询表中流水号的最大值 2.插入新值(最大值+1) 现在,利用SQL Server2012中的Sequence.这类操作将会变得非常容易. SequenceNumber的基本概念 SequenceNumber的概念并不是一

  • C++11的新特性简单汇总介绍 (二)

    1. 范围for语句 C++11 引入了一种更为简单的for语句,这种for语句可以很方便的遍历容器或其他序列的所有元素 vector<int> vec = {1,2,3,4,5,6}; for(int x: vec) { cout<<x<<endl; } 2. 尾置返回类型 要想引入尾置类型,我们还得从复杂的类型声明说起.如果我们需要定义一个含有10个int元素的数组,一般是这样的: int arr[10] = {0}; 如果要定义指向这个数组的指针呢: 复制代码 代

  • PHP 7.1新特性的汇总介绍

    一.可空类型 可空类型主要用于参数类型声明和函数返回值声明. 主要的两种形式如下: <?php function answer(): ?int { return null; //ok } function answer(): ?int { return 42; // ok } function say(?string $msg) { if ($msg) { echo $msg; } } 从例子很容易理解,所指的就是通过 ? 的形式表明函数参数或者返回值的类型要么为指定类型,要么为 null. 此

随机推荐