logo头像

求知若渴,虚心若愚

JavaScript - 数组( Array ) - ES6新增数组方法(一)

from()

  • 将两类对象转为真正的数组
    • 类似数组的对象(array-like object)
    • 可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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']


// 转化NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
});

// 转化arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}

// 转化字符串,因为字符串有length属性,也可以通过下标访问数据
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

// 转化set
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

TIP

  • 如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组
  • 对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代
  • Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

of()

  • 将一组值,转换为数组
1
2
3
4
5
Array.of() // []  没有参数,返回空数组
Array.of(undefined) // [undefined]
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

TIP
可以用来替代Array()new Array(),解决由于参数不同而导致一些问题

find()

  • 传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。
1
2
3
let arr = [11,22,33,44,55,22,33]
let arr1 = arr.find((value, index, array) =>value > 22)
console.log(arr1) // 33 找到33,就直接返回,停止

findIndex()

  • 传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它的下标,终止搜索。
1
2
3
let arr = [11,22,33,44,55]
let arr1 = arr.findIndex((value, index, array) => value > 22)
console.log(arr1) // 2

fill()

  • 使用给定的值,填充一个数组
  • 填充完后会改变原数组
  • arr.fill(target, start, end)
    • target – 待填充的元素
    • start – 开始填充的位置-索引
    • end – 终止填充的位置-索引(不包括该位置)
1
2
3
4
5
6
7
8
9
10
let arr = [11, 22, 33, 44, 55]
let arr1 = arr.fill(88)
console.log(arr1) // [88, 88, 88, 88, 88]
console.log(arr) // [88, 88, 88, 88, 88]

let arr2 = arr.fill(5, 2)
console.log(arr2) // [88, 88, 5, 5, 5]

let arr3 = arr.fill(5, 1, 3)
console.log(arr3) // [88, 5, 5, 5, 5]
支付宝打赏 微信打赏

赞赏是对我们的肯定!