JS基础之ES6 数组的改进

数组是一种基础的JavaScript对象。ES6标准继续改进数组,添加了很多功能。

一、 创建数组

在es6以前,创建数组的方式主要有两种。
第一种是调用Array构造函数,另一种是用数组字面量语法。这两种方法均需要列举数组中的元素。
为了进一步简化JavaScript组的创建过程,es6增加了Array.of()和Array.from()两个方法。

1、Array.of()方法

用这个方法创建数组,只需要传入你希望在数组中包含的值。返回参数值组成的数组

Array.of(1, 2) // [1, 2]
2、Array.from()方法。

由于js不支持直接将非数组对象转化为真实数组Arguments就是一种类数组对象。如果要把它当做数组使用,则必须先转换该对象的类型
数组的原生slice()方法可以将非数组对象转换为数组

function makeArray(arrayLike){
  return Array. prototype.slice.call(arrayLike)
}
var arr = makeArray(arguments)

Array.from()方法可以接受可迭代对象或类数组对象作为第一个参数,最终返回一个数组;第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
3、与以前创建数组的方法比较
//参数只有一个时
Array.of(3) // [3]
Array(3) // [, , ,]
//参数多余1个时
Array.of(1,2,3) // [1,2,3]
Array(1,2,3) // [1,2,3]

只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度
Array.of方法用于将一组值,转换为数组。

二、所有数组添加的新方法:

1、find()和findIndex() 用于数组中查找特定的值

接受两个参数:回调函数(回调函数的参数为item,index,array);可选参数(用于指定回调函数中的this的值)

区别:

  • find()返回查找到的值
  • findIndex()返回查找到值的索引

使用场景:

  • 根据某个条件查找匹配的元素,用find()和findIndex()
  • 指向查找某个值匹配的元素,indexOf()和lastIndexOf()
2、fill()方法

fill()方法用指定的值填充一直多个数组元素。当传入一个值时,fill()方法会用这个值重写数组中的所有值。第二个和第三个参数,用于指定填充的起始位置和结束位置

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
3、copyWithin()

copyWithin()与fill()方法类似,同时改变数组中多个元素。
区别:fill()方法是将数组元素赋值为一个指定的值,而copyWithin()方法是从数组中复制元素的值。
使用这个方法,会修改当前数组。
它接受三个参数。
target(必需):从该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

copyWithin()与fill()方法的用途在定型数组中常用

三、定型数组

定型数组

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。