欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6快速入门第七章------数组的扩展(可私信解惑)

程序员文章站 2022-07-16 22:12:07
...

Array.from方法

Array.from方法用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。

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

只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组,如字符串。

Array.from('hello')        //  ['h', 'e', 'l', 'l', 'o']

如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。

Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

Array.from([1, 2, 3], (x) => x * x)        // [1, 4, 9]        =>是箭头函数

Array.of方法

 Array.of方法用于将一组值,转换为数组。如果没有参数,就返回一个空数组。

Array.of(7, 8, 9)     // [7,8,9]
Array.of(13)         // [13]
Array.of()     // []
Array.of(13).length     // 1

Array.of基本上可以用来替代Array()或new Array(),并且Array.of不会因为参数不同而导致重载。

如果使用Array()方法,当参数只有一个时,实际上是指定数组的长度,代码如下。

var num = Array(2);        // 使用Array 方法
var num2 = Array.of(2);    // 使用Array.of 方法
num.length          //  2
num2.length        //  1

 

数组实例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]

上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。

//     将下标为3号和4号位复制到下标为0号位和1号位  
[1, 2, 3, 4, 5].copyWithin(0, 3, 5)        //     [4, 5, 3, 4, 5]
//     -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)        //     [4, 2, 3, 4, 5]
//从下标为2开始替换(也就是数值9),后两个参数没写,替换的内容默认从下标为0开始(数值8,5,9)
[8,5,9,4,3].copyWithin(2)    //  [ 8, 5, 8, 5, 9 ]    

 

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

数组实例的find方法,用于找出第一个符合条件的数组成员。

它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。

如果没有符合条件的成员,则返回undefined。

// 查找数组中小于0的数
[1, 2, -3, 4].find(  (n) => n < 0  )        // -3       => 是箭头函数,等于 function(n) {  return n<0; }

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

[1, 2, 3, 4].find(function(value, index, arr) {  return value > 2; })     // 返回值为3

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置(下标),如果所有成员都不符合条件,则返回-1。

[1, 2, 3, 4].findIndex(function(value, index, arr) {
    return value > 2;        // 返回值为2 
}

 

其他数组实例的方法

fill

fill方法使用给定值,填充一个数组。fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

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

上面代码表示,fill方法从1号位开始,向原数组填充7,到2号位之前结束。

entries(),keys()和values()

ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组。

keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。它们的区别如下所示:

console.log("----------keys方法---------")
for (let index of ['hello', 'world'].keys()) {

    console.log("输出结果:", index);
}

输出结果: 0 
输出结果: 1


console.log("----------values方法发---------")
for (let elem of ['hello', 'world'].values()) {

    console.log("输出结果:",elem);
}

输出结果: hello 
输出结果: world


console.log("----------entries方法发---------")
for (let [index, elem] of ['hello', 'world'].entries()) {

    console.log("输出结果:",index, elem);
}

输出结果: 0 hello 
输出结果: 1 world