ECMAScript 6数组的扩展实例详解

2024-10-03 04:02:29

扩展运算符

扩展运算符（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')]
// [<div>, <div>, <div>]

该运算符主要用于函数调用

function push(array, ...items) {
  array.push(...items);
}
function add(x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42

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

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

下面是扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。

// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);

扩展运算符的应用-合并数组扩展运算符提供了数组合并的新写法。

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

Array.from()

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

下面是一个类似数组的对象，Array.from将它转为真正的数组。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

Array.of()

Array.of方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

数组实例的 copyWithin()

数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。

start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。

end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

这三个参数都应该是数值，如果不是，会自动转为数值。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

数组实例的 find() 和 findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5

上面代码找出数组中第一个小于 0 的成员。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

数组实例的 fill()

fill方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]

数组实例的 includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

以上就是ECMAScript 6数组的扩展实例详解的详细内容，更多关于ECMAScript 6数组扩展的资料请关注我们其它相关文章！

es6数值的扩展方法

Number的方法扩展 Number.isFinite() 方法检测有限的数值(有穷的数值) console.log(Number.isFinite(1)) // true console.log(Number.isFinite(3.1415926)) // true console.log(Number.isFinite('1')) // false console.log(Number.isFinite(NaN)) // false console.log(Number.isFinite('
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转
ECMAScript 6数值扩展实例详解

目录一.数值的扩展 Number.isFinite(), Number.isNaN() Number.parseInt(), Number.parseFloat() Number.isInteger() 一.数值的扩展 Number.isFinite(), Number.isNaN() ES6 在Number对象上,新提供了Number.isFinite()和Number.isNaN()两个方法. Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infin
ES6基础之默认参数值

如果调用函数的过程中,定义的参数缺失,此参数变量的值则会是undefined.怎么给缺失的参数赋值默认值,在ES6之前,没有简洁的语法设置缺失参数的默认值,但是我们一般可以这么编写代码解决缺失参数默认值: function myFunction(x, y, z) { x = x === undefined ? 1 : x; y = y === undefined ? 2 : y; z = z === undefined ? 3 : z; console.log(x, y, z); //Outpu
ECMAScript 6对象的扩展实现示例

目录属性的简洁表示法属性名表达式方法的 name 属性对象的扩展运算符对象的新增方法-Object.is() 对象的新增方法-Object.assign() 属性的简洁表示法对象(object)是 JavaScript 最重要的数据结构.ES6 对它进行了重大升级 ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} //
详解ECMAScript2019/ES10新属性

每年都有一些新的属性进入ECMA262标准,今年发布的ECMAScript2019/ES10同样也有很多新的特性,本文将会挑选一些普通开发者会用到的新属性进行深入的解读. Array.prototype.flat() The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. -- MDN 简单来说flat
浅谈ECMAScript 中的Array类型

前言 Array 类型是除了 Object 类型之外又是一个特别经常用的一个类型了,当然数组在其他的语言中都是不可缺少的属性,我们都知道不管 js 还是其他类的语言的数组都是数据的有序列表,但是在 javaScript 中的数组是有一定的区别的,具体的区别就是: js 中的数组保存的数据可以是任何类型的数据,比如,我可以在第一个位置来保存数字,第二个位置保存字符串,第三和第四保存一个对象都完全OK,同时我还可以非常方便的操作数组的大小,添加新数据长度也会自动增长,动态调整什么的都是没有任何问题滴
详解ECMAScript typeof用法

typeof 返回变量的类型字符串值 .其中包括 "object"."number"."string"."undefined"."boolean". 1.在变量只声明.却不初始化值 Or 在变量没有声明时返回 "undefined" > var b undefined > typeof(b) 'undefined' > typeof e 'undefined' &
ECMAScript 6数组的扩展实例详解

目录扩展运算符 Array.from() Array.of() 数组实例的 copyWithin() 数组实例的 find() 和 findIndex() 数组实例的 fill() 数组实例的 includes() 扩展运算符扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4
JavaScript中十种一步拷贝数组的方法实例详解

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是当你在使用类似于React和Redux这类库时,你会发现它是非常非常有用的. numbers = [1, 2, 3]; numbersCopy = [...numbers]; 这个方法不能有效的拷贝多维数组.数组/对象值的拷贝是通过引用而不是值复制. // numbersCopy.push(4);
Android获取arrays.xml里的数组字段值实例详解

Android获取arrays.xml里的数组字段值实例详解比如在arrays.xml里:  <string-array name="reboot_item"> <item>Reboot</item> <item>Recovery</item> <item>BootLoader</item> </string-array&g
Linux shell数组循环的实例详解

shell数组循环测试shell数组,循环的例子: arr=("a" "b" "c") echo "所有的内容如下:"${arr[@]} echo "数组的长度:"${#arr[*]} for var in ${arr[@]} do echo "打印的内容:"$var done 输出的内容如下: 以上就是Linux shell数组循环的实例详解,如有疑问请留言或者到本站社区交流讨论,感
KnockoutJS数组比较算法实例详解

这篇文章主要介绍了KnockoutJS数组比较算法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下前端开发中,数组是一种非常有用的数据结构.这篇博客会解释并分析KnockoutJS实现中使用的数据比较算法. 算法的目的 KnockoutJS使用MVVM的思想,view model中的数组元素会对应data model中的数组数据,当用户进行输入或者请求后台时,数组数据会发生变更, 从而带动UI的更新.例如购物车类的页面,用户可以通过点击
ES6新特性之函数的扩展实例详解

本文实例讲述了ES6新特性之函数的扩展.分享给大家供大家参考,具体如下: 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello 这种写法有两个好处:首先,阅读代码的人,可以立刻意识
GO语言数组和切片实例详解

本文实例讲述了GO语言数组和切片的用法.分享给大家供大家参考.具体分析如下: 一.数组与其他大多数语言类似,Go语言的数组也是一个元素类型相同的定长的序列. (1)数组的创建. 数组有3种创建方式:[length]Type .[N]Type{value1, value2, ... , valueN}.[...]Type{value1, value2, ... , valueN} 如下: 复制代码代码如下: func test5() { var iarray1 [5]int32
php array_values 返回数组的值实例详解

array_values 返回数组中所有的值基本语法: array array_values ( array $input ) array_values() 返回 input 数组中所有的值并给其建立数字索引. 参数介绍: 参数描述 input 必需.规定数组. 返回值: 返回含所有值的索引数组. 注意: 返回的新数组的所有将使用数字索引,从0开始. 实例: <?php $array = array( "php" => "php code", &qu
ES6正则的扩展实例详解

本文实例讲述了ES6正则的扩展.分享给大家供大家参考,具体如下: 1. RegExp构造函数 ES5中,RegExp构造函数的参数: 参数是字符串,这时第二个参数表示正则表达式的修饰符(flag) 参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝.但是,ES5不允许此时使用第二个参数,添加修饰符,否则会报错. ES6改变了这种行为.如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符.而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符