ES6 之 新增数组方法

本文总结一些 ES6 新增并常用的数组方法。ES6 之前的数组方法请参考 ES5 数组方法浅谈常见数组方法


ES6 新增

关于 ES6 具体的数组扩展可参考 ECMAScript 6 入门 - 数组的扩展 。下面用一些简单的例子来说明 ES6 数组扩展的用法。

Array.from()

用于将类数组和可遍历的对象转换为真正的数组

  • 类数组: 就是类似数组的对象,本质上要有 length 属性。即任何拥有 length 属性的对象,都可以通过
    Array.from() 方法转换为数组。
    1
    2
    3
    4
    5
    6
    7
    8
    let object = { '0':'a','1':'b','2':'c' }
    let arr = Array.from(object)
    console.log(arr) //[] 由于没有 length 属性打印结果为一个空数组


    let object2 = { '0':'a','1':'b','2':'c',length:3 };
    let arr2 = Array.from(object2);
    console.log(arr2); //["a", "b", "c"]


  • 参数接收数组: Array.from() 会返回一个一模一样的新数组。
    1
    2
    3
    4
    5
    6
    7
    var arr = [1,2,3]
    var newArr = Array.from(arr)
    console.log(newArr) //[1, 2, 3]

    newArr[0] = 4
    console.log(arr) //[1, 2, 3]
    console.log(newArr) //[4, 2, 3]


Array.of()

用于将一组值,转换为数组

1
2
3
4
5
6
7
8
let a = Array.of(1,2,3)
console.log(a) //[1, 2, 3]

let b = Array.of(undefined)
console.log(b) //[undefined]

let c = Array.of()
console.log(c) //[]没有参数时,返回一个空数组。



这个方法的主要目的,是弥补数组构造函数 Array() 的不足。因为在构造函数 Array() 时,只有一个值传递的时候,会被当成 length。所以 Array.of 基本上可以用来替代 Array()new Array()

1
2
Array(3)      // [, , ,]
Array.of(3) //[3]


copyWithin()

将指定位置的成员复制到其他位置(会覆盖原有成员,即改变原数组),然后返回该数组

copyWithin() 接受三个参数:

  • target(必填):从该位置开始替换数据。
  • start(可选):从该位置开始读取数据,默认为0。如果是负值,表示倒数。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
1
2
3
var arr = [1,2,3,4,5,6,7,8,9]
arr.copyWithin(0,3,6)
console.log(arr) //[4, 5, 6, 4, 5, 6, 7, 8, 9]


find() / findIndex()

find() 用于找出第一个符合条件的数组成员,返回该成员。如果没有符合条件的成员,返回 undefined

1
2
3
4
5
var arr = [1,5,10,15]
var num = arr.find(function(value) {
return value > 9
})
console.log(num) //10

1
2
3
4
5
var arr = [1,5,10,15]
var num = arr.find(function(value) {
return value > 20
})
console.log(num) //undefined



findIndex() 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回 -1

1
2
3
4
5
var arr = [1,5,10,15]
var num = arr.findIndex(function(value) {
return value > 9
})
console.log(num) //2


fill()

填充一个数组,原数组发生改变。一般用于数组的初始化。

1
2
3
var arr = ['a','b','c']
console.log(arr.fill(1)) // [1, 1, 1]
arr // [1, 1, 1]



也可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置

1
2
3
var arr = ['a','b','c']
console.log(arr.fill(1,1,2)) // ["a", 1, "c"]
arr // ["a", 1, "c"]


数组实例遍历 keys()、valueOf()、entries()

keys()

keys() 遍历出所有的索引值

1
2
3
4
5
for (let index of ['a', 'b'].keys()) {
console.log(index)
}
//0
//1


valueOf()

valueOf() 遍历所有的值

1
2
3
4
5
for (let index of ['a', 'b'].valueOf()) {
console.log(index)
}
// a
// b


entries()

entries() 遍历值和索引

1
2
3
4
5
for (let index of ['a', 'b'].entries()) {
console.log(index)
}
// [0, "a"]
// [1, "b"]


include()

判断数组是否包含给定的值,有返回 true ,没有返回 false ,第二个参数表示搜索的起始位置

1
2
3
4
var arr = [1,2,3]
console.log(arr.includes(1)) //true
console.log(arr.includes(1,0)) //true
console.log(arr.includes(1,1)) //false


flat()

数组的成员有时还是数组,flat() 用于将嵌套的数组 “ 拉平 “,变成一维的数组。该方法返回一个新数组,对原数组没有影响。

1
2
3
4
var arr = [1, 2, [3, 4]]
arr.flat() // [1, 2, 3, 4]

arr // [1, 2, [3, 4]]

本文结束  感谢您的阅读
0%