JavaScript扩展运算符的学习及应用详情(ES6)

目录
  • 学习
  • 应用
    • 函数参数
    • 数组合并
    • 解构赋值
    • 字符串转换
    • 转换数组

前言：

扩展运算符是ES6新增的一种运算符，他可以帮助我们简化代码，简化操作，所以在开发中是非常常用的，下面我将从学习与应用两个方面来带掘友学习扩展运算符。

学习

我们先来学习一下扩展运算符的使用语法

扩展运算符使用形式为...[1,2,3]，...加上数组

其作用可以理解成与rest相反的操作，rest参数是在函数中将参数转化为数组形式传进函数内，而扩展运算符是将数组转换至以逗号相隔的参数序列。

let arr = ["a", "b"];
console.log(...arr); // a b

上面我声明了一个数组，通过扩展运算符的方式打印，得到一个参数序列，了解完语法后来主要学习扩展运算符的应用场景

应用

下面我将从函数应用，数组合并，解构赋值，字符串转换与转换数组五个方面展开扩展运算符的应用场景。

函数参数

由扩展运算符运算结果的特性，可以将其运用在函数传入参数时

function add(x, y) {
  return x + y;
}
let arr = [1, 2];
add(...arr); // 3

上面我将arr数组搭配扩展运算符传入函数，分别对应参数x与y

值得注意的是在有扩展运算符之前，我们是通过使用apply方法将数组作为参数传入函数的，它的使用方式如下，拿上面的add函数举例：

add.apply(null,arr) // 3

因为apply可以改变this指向并传入参数，借此特性可以将数组作为参数。

数组合并

在ES5中的数组合并是通过concat函数来实现的，又或者使用push来实现

let arr_1 = [1, 2, 3];
let arr_2 = [4, 5, 6];
console.log(arr_1.concat(arr_2)); // [ 1, 2, 3, 4, 5, 6 ]

而在ES6中通过扩展运算符进行直接合并，这样的做法可以很好得简洁代码，增加代码的可读性。

console.log([...arr_1,...arr_2]) // [ 1, 2, 3, 4, 5, 6 ]

解构赋值

在一个数组中，我们想要拿到第一个元素外的所有元素，那么在ES5中我们可以这么做：

let arr = [1,2,3,4]
let node = arr[0];
let rest = arr.slice(1)
console.log(rest) // [ 2, 3, 4 ]

而在ES6中我们可以直接使用解构来分割参数

let arr = [1,2,3,4]
let [a,...b] = arr
console.log(a,b) // 1 [ 2 , 3 , 4 ]

字符串转换

可以使用使用解构赋值将字符串转换为数组

console.log([...'猪痞恶霸']) // ['猪', '痞', '恶', '霸']

还可以改造length属性，因为如果字符串内包含Unicode字符，那么直接的length会有问题，所以可以使用扩展运算符转换后拿到正确的length属性

function length(str) {
    return [...str].length
}
console.log(length("\uD83D\uDE80")) // 1
console.log("\uD83D\uDE80".length) // 2

如上代码所示，使用扩展运算符可以避免Unicode长度识别问题

转换数组

我们可以通过使用扩展运算符将伪数组转化为数组，伪数组我们可以理解为类似数组的一个集合，这里简单提一下伪数组。

我们常见的有俩种伪数组，一个是arguments还有一个是DOM的children属性，获取回来的子节点集合。伪数组与数组的区别就是它们的_proto_区别，而普通数组有很多数组的方法，比如说push，shift，map等等，而伪数组却无法使用这些方法。

这就涉及到一个痛点，大家在使用DOM的时候如果想使用数组的一些方法，那怎么办呢？我们就可以先转化为数组再去使用这些方法，下面举一个简单的操作dom例子。

const divs = document.querySelectorAll('div')
const divArr = [...divs]
console.log(divArr)

到此这篇关于JavaScript扩展运算符的学习及应用详情(ES6)的文章就介绍到这了,更多相关JS扩展运算符内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS ES6展开运算符的几个妙用

    1. 添加属性 复制对象的同时,为其添加新的属性. 例子中复制了user对象到userWithPass,并添加了password属性. const user = { id: 110, name: 'Kayson Li'} const userWithPass = { ...user, password: 'Password!' } user //=> { id: 110, name: 'Kayson Li'} userWithPass //=> { id: 110, name: 'Kayson

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

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

  • JavaScript ES6解构运算符的理解和运用

    目录 前言 解构符号的作用 使用方法 解构赋值的应用 浅谈应用 提取json数据 可扩展运算符... 交换变量值 总结 前言 最近一直在学JavaScript,看到了ES6中的解构符号,觉得这个给我们的代码简洁性带来了一个飞跃式的提升,而且它已经运用在了企业开发中,假如未来你工作中,别人在用,你却读不懂别人的代码,这造成的影响还是很大的.因此,好好学习一下吧. 你可以不用,但是你不能不懂✔ JavaScript ES6中,有很多特性都是为了简化代码,方便程序员去书写的.解构运算符就是其中很好的特

  • ES6扩展运算符的用途实例详解

    ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性. 扩展运算符就是三个点"...",就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用. 看这个例子: console.log(...[3, 4, 5]) 结果: 3 4 5 调用其实就是: console.log(3, 4, 5) 合并数组 可以使用扩展运算符将多个数组进行合并. let arr1 = [1, 2, 3]

  • ES6中的rest参数与扩展运算符详解

    前言 本文主要给大家介绍了关于ES6中rest参数与扩展运算符的相关内容,rest参数和扩展运算符都是ES6新增的特性.rest参数的形式为:...变量名:扩展运算符是三个点(...).下面话不多说了,来一起看看详细的介绍: rest参数 rest参数用于获取函数的多余参数,这样就不需要使用arguments对象了.rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中. function add(...values) { let sum = 0; for (var val of val

  • 基于es6三点运算符的使用方法(实例讲解)

    先看一个es6规范下三点运算符的使用实例: let fun=function(a,...list){ console.log(a,list); }; fun('0','a','b','c');//0 [a,b,c] 以上可以看到我们现在在定义函数对象时可以动态设置参数的个数了:第一个参数a是普通参数(忽略), 大家可以看到第二个参数list前面有三个点 "...",这种写法在es6规范中有两个用途 1 . 作为参数使用. 2 . 作为拓展运算符使用. ● 三点--作为参数: let f

  • es6中的解构赋值、扩展运算符和rest参数使用详解

    前言 本文主要给大家介绍了关于es6中解构赋值.扩展运算符和rest参数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. es6中较为常用的书写风格 为了书写的方便,es6中提出了很多比较友好的书写方式,其中最为常见的属于以下几个: 字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1, 2, 3] 扩展运算符 rest参数 ... 本文希望能够学习其中的主要的用法,方便书写和简洁性. 字符串模板 在以前的日子,我们经常捡到各

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

    本文实例讲述了ES6扩展运算符用法.分享给大家供大家参考,具体如下: 扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值,扩展运算符有以下几点作用 一.展开数组 //展开数组 let a = [1,2,3,4,5], b = [...a,6,7]; console.log(b); //打印出来的值[1, 2, 3, 4, 5, 6, 7] 二.数组的拷贝 //数组的拷贝 var c = [1, 2, 3]; var d = [...c]; d.push(4); cons

  • JavaScript中运算符规则和隐式类型转换示例详解

    前言 本文主要给大家介绍了关于JavaScript运算符规则和隐式类型转换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 隐式类型转换 在 JavaScript 中,当我们进行比较操作或者加减乘除四则运算操作时,常常会触发 JavaScript 的隐式类型转换机制:而这部分也往往是令人迷惑的地方.譬如浏览器中的 console.log 操作常常会将任何值都转化为字符串然后展示,而数学运算则会首先将值转化为数值类型(除了 Date 类型对象)然后进行操作. 我们首先来

  • Javascript实现运算符重载详解

    最近要做数据处理,自定义了一些数据结构,比如Mat,Vector,Point之类的,对于加减乘除之类的四则运算还要重复定义,代码显得不是很直观,javascript没有运算符重载这个像C++.C#之类的功能的确令人不爽,于是想"曲线救国",自动将翻译代码实现运算符重载,实现思路其实很简单,就是编写一个解释器,将代码编译.例如: S = A + B (B - C.fun())/2 + D 翻译成 `S = replace(replace(A, '+', replace(replace(B

  • 深入剖析JavaScript instanceof 运算符

    深入剖析JavaScript instanceof 运算符

    instanceof 运算符简介 在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 "object".ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题.instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型.与 typeof 方法不同的是,instanceof 方法要求开发者明确地确

  • 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

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

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

  • 在JavaScript实例对象中改写原型方法详情

    目录 在JavaScript中,我们通常可以像下面的代码这样来简单地定义一个类: var sample = function() { // constructor code here } sample.prototype.func1 = function() { // func1 code here } sample.prototype.func2 = function() { // func2 code here } /* more sample prototype functions her

随机推荐