这里只介绍常用到的ES6数组扩展
...
运算操作符可以将数组解绑
...[1,2,3] // 1,2,3
add(...[1,2,3])// add(1,2,3)
let arr1 = [1,2,3]
let arr2 = [4,5,6]
arr1.push(...arr2) // [1,2,3,4,5,6]
...
操作符的其他应用
①克隆数组
const arr1 = [1,2]
const arr2 = [...arr1] // Array.from(arr1) / arr1.concat()也可以
arr2[0] = 2
arr1 // [1,2] 不受影响,即arr2保存的并非arr1的指针,而是真正意义的克隆
②合并数组
const arr1 = [1,2]
const arr2 = [3,4]
const arr3 = [...arr1, ...arr2]
③同解耦结合
const[a, ...rest] = [1,2,3,4]
// 相当于
rest = [...[2,3,4]]
const[a, ...rest] = [1]
a // 1
rest // []
// 注意...rest只能放在最后一位,放在其他位置都会报错喔~
④字符串转数组
var str = 'jack',
[...str] // ['j','a','c','k']
[...str].reverse().join('') // 'kcaj'
Array.from(arrayLike)
用于将伪数组转换为真数组,所谓伪数组满足两个基本条件:
length
这个属性数字索引
将伪数组转化为真数组示例如下:
// NodeList伪数组
let ps = document.querySelectorAll('p')
let pArr = Array.from(ps).filter(p => p.textContent.length > 100)
// 筛选文本长度大于100的所有p填入数组赋值给pArr
// arguments对象
function fn() {
var args = Array.from(arguments)
// ...
}
只要是部署了Iteraror
接口的数据结构,Array.from都能将其转为数组,如字符串、Set结构
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
对象满足伪数组条件,也可以通过Array.from转为数组
var obj ={
"0":1,
"1":2,
length:2
}
console.log(Array.from(obj)) [1,2]
Array.from还可以传入回调函数作为第二个参数,会对每个项进行map遍历操作Array.from(arrayLike, item => item + 1)
,示例如下:
/**
*
* <span>1</span>
* <span>2</span>
* <span>3</span>
*/
let spans = document.querySelectorAll('span')
// map()
let names1 = Array.prototype.map.call(spans, s => s)
// [<span>1</span>,<span>2</span>,<span>3</span>]
// Array.from()
let names2 = Array.from(spans, s => s.textContent)
// ['1','2','3']
将一组值转换为数组
Array.of(1,2,3) // [1,2,3]
对数组进行遍历操作传入一个函数作为回调,返回符合条件的第一个项
[1,2,3,5,6,7].find(n => n > 4) // 5
填充Array.fill(item, start, end)
,将数组 [ start, end ) 范围的项替换成 item
[1, 2, 3, 4].fill(7, 1, 4) // [1,7,7,7]