JavaScript中使用Spread运算符的八种方法总结

Spread运算符

允许从 iterable 表达式（如另一个数组文本）初始化部分数组文本，或允许表达式扩展到多个参数（在函数调用中）。

语法

var array = [[arg0ToN ,] ...iterable [, arg0ToN]]
func([args ,] ...iterable [, args | ...iterable])

参数

iterable

必需。 迭代对象。

arg0ToN

可选。 数组文本的一个或多个元素。

args

可选。 函数的一个或多个参数。

本文将带大家了解如何在JavaScript中使用Spread（延展操作）运算符。

ES6中引入了延展操作运算符（...）。

延展操作运算符将可迭代的对象扩展为其单独的元素，可迭代对象是可以使用 for 循环进行循环的任何对象。

可迭代的示例：Array，String，Map，Set，DOM节点。

1.在log中使用延展操作运算符

你可以在 console.log 中对可迭代对象使用延展操作操作符

let fruits = ['🍈', '🍉', '🍋', '🍌'];
console.log(...fruits); //🍈 🍉 🍋 🍌

2.用延展操作运算符复制数组

let fruits = ['🍈', '🍉', '🍋', '🍌'];
let fruitsCopy = [ ...fruits ];
console.log(...fruitsCopy); //🍈 🍉 🍋 🍌

复制对象

let user = {name : "John", age : 20 }
let userCopy = {...user}

延展操作运算符不执行深度复制。

3.延展操作运算符合并

let fruits = ['🍈', '🍉', '🍋', '🍌'];
let vegetables = ['🍅', '🍆', '🥒'];
let fruitsAndVeg = [...fruits, ...vegetables]

合并对象

合并对象时，如果已经存在某个键，则将其替换为具有相同键的最后一个对象。

let user1 = {name : "John", age : 20 };
let user2 = {name : "Ram", salary: '20K' };
let userCopy = {...user1, ...user2};
userCopy ; // {name : "Ram", age :20 , salary : '20K'};

4.延展操作运算符作为参数传递

function sum(a, b) {
 return a+b;
}
let num = [1,2];
sum(...num); // 3

与 math 函数一起使用

let num = [5,9,3,5,7];
Math.min(...num);
Math.max(...num);

5.延展操作运算符在解构变量中

let [melon, ...fruits ] = ['🍉', '🍋', '🍌', '🍊'];
melon; //🍉
fruits; // [ '🍋', '🍌', '🍊']

解构对象

let user = {name : "Ram", age: 20, salary: '20K', job : "Tester" };
let { name, age, ...details } = user;
name; // Ram
age; // 20
details; // {salary: '20K', job : 'Tester'};

6.将NodeList对象转换为数组

NodeList类似于数组，但是没有 Array 的所有方法，例如 forEach，map，filter 等。

let nodeList = document.querySelectorAll('.class')
var nodeArray = [...nodeList]

7.将字符串转换为字符

字符串也是可迭代的对象，因此我们也可以使用 ... 来字符串。

let name = "Ram";
let chars = [...name]; // ["R", "a", "m"]

8.从数组中删除重复项

let num = [1, 3, 1, 3, 3, 1];
let uniqueNum = [...new Set(num)];
uniqueNum; //[ 1, 3 ]

总结

到此这篇关于JavaScript中使用Spread运算符的八种方法就介绍到这了,更多相关JavaScript使用Spread运算符内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js 与或运算符 || && 妙用

    js 与或运算符 || && 妙用

    首先出个题:如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用代码怎么实现? 差一点的if,else: Js代码 复制代码 代码如下: var add_level = 0; if(add_step == 5){ add_level = 1; } else if(add_step == 10){ add_level = 2; } else if(add_step

  • javascript typeof的用法与typeof运算符介绍[详细]第1/2页

    经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确的是 if( typeof(document.mylist.length) != "undefined" ) {} 或 if( !isNaN(document.mylist.length) ) {} typeof的运算数未定义,返回的就是 "

  • jscript之Open an Excel Spreadsheet

    Description Demonstration script that opens an existing Excel spreadsheet named C:\Scripts\New_users.xls.  复制代码 代码如下: Set objExcel = CreateObject("Excel.Application") Set objWorkbook = objExcel.Workbooks.Open("C:\Scripts\New_users.xls"

  • js中的 || 与 && 运算符详解

    js中逻辑运算符在开发中可以算是比较常见的运算符了,主要有三种:逻辑与&&.逻辑或||和逻辑非!. 当&&和|| 连接语句时,两边的语句会转化为布尔类型(Boolean),然后再进行运算,具体的运算规则如下: 1.&& 1.1两边条件都为true时,结果才为true: 1.2如果有一个为false,结果就为false: 1.3当第一个条件为false时,就不再判断后面的条件 注意:当数值参与逻辑与运算时,结果为true,那么会返回的会是第二个为真的值:如果结

  • JavaScript展开操作符(Spread operator)详解

    你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串.展开运算符(spread)是三个点(-),可以将可迭代对象转为用逗号分隔的参数序列.如同rest参数的逆运算. 用于数组 以数组为例,首先创建一个数组, const a = [1, 2, 3], b = [4,5,6]; 你可以轻松赋值一个数组: const c = [...a] // [1,2,3] 你还可以轻松拼接两个数组: const d = [...a,...b] // [1,2,3,4,5,6] 也可

  • JS按位非(~)运算符与~~运算符的理解分析

    那么,对于typeof var!=="number"的类型来说,进行运算时,会尝试转化成32位整形数据,如果无法转换成整形数据,就转换为NaN: JS在位运算上用了更简便的一种方法来实现这中运算,那么它的实现原理大致上可以这样理解: 复制代码 代码如下: var testData=-2.9; var testResult=(typeof testData==="number"&&!isNaN(testData)&&testData!=

  • Javascript 按位取反运算符 (~)

    复制代码 代码如下: result = ~ [数字] 所有一元运算符(如 ~ 运算符)都按照下面的规则来计算表达式的值: 复制代码 代码如下: 1. 如果应用于未定义的表达式或 null 表达式,则会引发一个运行时错误.2. 将对象转换为字符串.3. 如果可能,将字符串转换为数字. 否则,将引发运行时错误.4. 布尔值被视为数字(如果为 false,则为 0:如果为 true,则为 1). 运算符将应用于结果数字. ~ 运算符查看表达式的二进制表示形式的值,并执行位非运算. 表达式中的任何一位为

  • jscript之Read an Excel Spreadsheet

    Description Demonstration script that reads the values stored in a spreadsheet named C:\Scripts\New_users.xls.  Script Code 复制代码 代码如下: Set objExcel = CreateObject("Excel.Application") Set objWorkbook = objExcel.Workbooks.Open _     ("C:\Scr

  • javascript三元运算符用法实例

    三元运算符用法实例: 如名字表示的三元运算符需要三个操作数. 语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2.满足条件时结果1否则结果2. 复制代码 代码如下: <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a="false"; document.write(" --------

  • JavaScript中使用Spread运算符的八种方法总结

    Spread运算符 允许从 iterable 表达式(如另一个数组文本)初始化部分数组文本,或允许表达式扩展到多个参数(在函数调用中). 语法 var array = [[arg0ToN ,] ...iterable [, arg0ToN]] func([args ,] ...iterable [, args | ...iterable]) 参数 iterable 必需. 迭代对象. arg0ToN 可选. 数组文本的一个或多个元素. args 可选. 函数的一个或多个参数. 本文将带大家了解如

  • JavaScript中数组去除重复的三种方法

    废话不多说了,具体方法如下所示: 方法一:返回新数组每个位子类型没变 function outRepeat(a){ var hash=[],arr=[]; for (var i = 0; i < a.length; i++) { hash[a[i]]!=null; if(!hash[a[i]]){ arr.push(a[i]); hash[a[i]]=true; } } console.log(arr); } outRepeat([2,4,4,5,"a","a"

  • JavaScript中数组去重常用的五种方法详解

    目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返

  • isArray()函数(JavaScript中对象类型判断的几种方法)

    1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 typeof 的能力有限,其对于Date.RegExp类型返回的都是"object".如: typeof {}; //

  • JavaScript中判断对象类型的几种方法总结

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

  • 在JavaScript中判断整型的N种方法示例介绍

    整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中,他们只存在于概念中: 所有的数字都是浮点数,并且整数只是没有一组没有小数的数字. 在这篇博客中,我会解释如何去检查某个值是否为整型. ECMAScript 5 在ES5中有很多方法你可以使用.有时侯,你可能想用自己的方法:一个isInteger(x)的函数,如果是整型返回true,否则返回false. 让我们看看一些例子. 通过余数检查 你可以使用余数运算(%),将一个数字按1求余,看看余数

  • JavaScript中解析JSON数据的三种方法

    概述 现在JSON格式在web开发中越来越受重视,特别是在使用ajax开发项目的过程中,经常需要将json格式的字符串返回到前端,前端解析成JS对象(JSON ). ECMA-262(E3)中没有将JSON概念写到标准中,还好在 ECMA-262(E5)中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法. 解析JSON数据的三种方法 eval()方法 解析JSON数据的最常用方法是使用javascript的eval()方法,代码如下: 复制代码 代码如下: func

  • JavaScript中创建类/对象的几种方法总结

    在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表.字典.健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象. 一.由一对大括号括起来 复制代码 代码如下: var emptyObj = {

  • Javascript中实现trim()函数的两种方法

    在JavaScript中我们需要用到trim的地方很多,但是JavaScript又没有独立的trim函数或者方法可以使用,所以我们需要自己写个trim函数来实现我们的目的. 方案一: 以原型方式调用,即obj.trim()形式,此方式简单且使用方面广泛,定义方式如下: 复制代码 代码如下: <script language="javascript"> /** * 删除左右两端的空格 */ String.prototype.trim=function() {      ret

  • JavaScript中日常收集常见的10种错误(推荐)

     1 对于this关键词的不正确使用 Game.prototype.restart = function () { this.clearLocalStorage(); this.timer = setTimeout (function() { this.clearBoard(); }, 0); }; 运行上面的代码将会出现如下错误: uncaught typeError:undefined is not a function 为什么会有这个错? this是指代当前对象本身,this的调用和它所在

随机推荐