数组的扩展方法
# from()
from()
能将伪数组转换成真数组
function add() {
console.log(arguments) // 伪数组
// es5 转换
let arr = [].slice.call(arguments)
console.log(arr)
// es6写法
let arr1 = Array.from(arguments)
console.log(arr1)
}
add(1, 2, 3)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let lis = document.querySelectorAll('li')
console.log(lis) // 伪数组 NodeList
console.log(Array.from(lis))
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# of()
of()
方法更加方便,能够通过扩展运算符将伪数组转换成真数组
// 上面的获取li的例子
console.log([...lis])
1
2
3
2
3
let liContent = Array.from(lis, ele => ele.textContent) // 获取元素的文本值
console.log(liContent) // [1, 2, 3, 4]
1
2
2
// of 将一组的值来转换成数组
console.log(Array.of(3, 1, 2, '30')) // 把这些数放到一个数组里进行展示
1
2
2
# copyWithin()
将指定位置的元素复制到别的位置,返回这个数组
console.log([1, 2, 3, 4].copyWithin(0, 3)) // 将3往后的值替换到从0往后的位置的元素 => 4替换到1
// [4, 2, 3, 4]
1
2
2
# find()和 findIndex()
find()
找出第一个符合条件的数组成员
findIndex()
找出第一个符合条件的数组索引
// find 找出第一个符合条件的数组成员
console.log([1, 2, -10, -20, 9, 2].find(n => n < 0))
// 找出第一个符合条件的数组索引
console.log([1, 2, -10, -20, 9, 2].findIndex(n => n < 0))
1
2
3
4
5
2
3
4
5
# entries()、keys()、values()
返回一个迭代器,可能前端里叫遍历器,可以使用数组的
for ... of
循环遍历
let demoArr = ['a', 'b']
for (let index of demoArr.keys()) {
console.log(index)
}
for (let index of demoArr.values()) {
console.log(index)
}
console.log(demoArr.entries())
for (let [index, ele] of demoArr.entries()) {
console.log(index, ele)
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
编辑 (opens new window)
上次更新: 2021/10/28, 00:17:30