网站首页 > 技术文章 正文
拓展运算符
拓展运算符是三个点(...),它如同rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。
替代数组的apply方法
由于拓展运算符可以展开数组,所以不再需要使用apply方法将数组转为函数参数。
- 求出数组中最大元素
由于JavaScript不提供求数组最大元素的函数,所以只能套用Math.max函数将数组转为一个参数序列,然后求最大值。有了拓展运算符以后可以直接使用Math.max了。
2.通过push函数将一个数组添加到另一个数组的尾部
ES5中,push方法的参数不可以是数组,所以只好通过apply方法变通使用push方法,有了拓展运算符,可以直接将数组传入push方法。
拓展运算符的应用
- 合并数组
2.与结构赋值结合
如果将拓展运算符用于数组赋值,则只能将其放在参数的最后一位,否则会报错。
3.字符串转为数组
Array.from()
Array.from方法用于将两类对象转为真正的数组。
- 类似数组的对象(本质特征只有一点,必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而长度和位置描述不一致的都会被解析为undefined)
- 可遍历对象(包括ES6新增的数据结构Set和Map)
如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
Array.of()
Array.of方法用于将一组值转化为数组。总数返回参数值组成的数组,如果没有参数,就返回一个空数组。
原本的Array方法没有参数,有一个参数返回为[],[''],['',''],['','',''],实际上是指定数组的长度。当参数大于等于2才返回由参数组成的新数组。而Array.of方法基本可以替代Array()或new Array(),并且不存在因为参数不同而导致的重载。
copyWithin()
数组实例的copyWithin方法会在当前数组内部将指定位置的成员复制到其他位置(覆盖原有成员),然后返回当前数组。(这个方法会修改当前数组)
Array.prototype.copyWithin(target,start = 0, end = this.length);
- target(必填):从该位置开始替换数据
- start(可选):从该位置开始读取数据,默认为0,如果未负值,表示倒数
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果未负值,表示倒数。
这三个参数都应该为数值,如果不是,会自动转为数值。
find()和findIndex()
数组实例的find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
find方法可以接受三个参数,依次为当前的值,当前的位置和原数组。
数组实例的findIndex方法的用法与find方法类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。
fill()
数组实例fill方法使用给定值填充一个数组。
fill方法第一个参数是填充值,第二个参数是指定填充的起始位置,第三个参数是指定填充的结束位置。
entries()、keys()、values()
用于遍历数组的ES6新增方法:entries()、keys()、values()
- keys():对键名的遍历
- values():对键值的遍历
- entries():对键值对的遍历
includes()
数组实例返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。
该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时大于数组的长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。
indexOf方法有两个缺点:
- 不够语义化,其含义是找到参数值的第一个出现位置,所以要比较是否不等于-1,表达起来不够直观
- 其内部使用严格相等运算符(===)进行判断,会导致对NaN的误判。
数组的空位
空位不是undefined,一个位置的值等于undefined依然是有值的。空位是没有任何值的。
ES5对空位的处理很不一致,大多数情况下回忽略空位。
- forEach()、filter()、every()和some()都会跳过空位。
- map()会跳过空位,但会保留这个值。
- join()和toString()会将空位视为undefined,而undefined和null会被处理成空格字符串。
ES6则是明确将空位转换为undefined
猜你喜欢
- 2024-10-11 js中传统和es6方式 实现数组去重(js数组去重方法es6)
- 2024-10-11 重读《学习JS数据结构与算法-第三版》- 第3章 数组 二
- 2024-10-11 ES6的这些操作技巧,你会吗(es6 教程)
- 2024-10-11 Es6基础语法(es6的语法有哪些)
- 2024-10-11 ES6之扩展运算符的精彩操作(...扩展运算符)
- 2024-10-11 JS面试之数组的几个不low操作(js 数组面试题)
- 2024-10-11 数组的扩展(数组扩展长度的方法)
- 2024-10-11 ES6中Array数组你应该知道的操作(es6数组排序的方法)
- 2024-10-11 ES6 数组的遍历方法最重要的不在代码本身,而是语义化!
- 2024-10-11 ES6 数组解构赋值(es6 结构赋值)
- 02-21走进git时代, 你该怎么玩?_gits
- 02-21GitHub是什么?它可不仅仅是云中的Git版本控制器
- 02-21Git常用操作总结_git基本用法
- 02-21为什么互联网巨头使用Git而放弃SVN?(含核心命令与原理)
- 02-21Git 高级用法,喜欢就拿去用_git基本用法
- 02-21Git常用命令和Git团队使用规范指南
- 02-21总结几个常用的Git命令的使用方法
- 02-21Git工作原理和常用指令_git原理详解
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)